HighlightJS i unescaped code

HighlightJS i unescaped code
hercules
  • Rejestracja:ponad 5 lat
  • Ostatnio:ponad 2 lata
  • Postów:77
0

Cześć,
używam sobie na stronie biblioteki highlightJs: https://highlightjs.org/
żeby ładnie wystylować kod.
Dokładnie chciałbym stylować kod TypeScriptowy.
Wstawiam więc taki blok ze swoim kodem:

Kopiuj
<pre>
          <code class="language-typescript">
            enum ChangeDetectionStrategy {
              OnPush: 0
              Default: 1 
            }
          </code>
</pre>

wywołuję

Kopiuj
hljs.highlightAll();

i kod ładnie się styluje. Czyli wszystko zadziałało.
Problem polega na tym, że w konsoli lecą Warningi:

Kopiuj
One of your code blocks includes unescaped HTML. This is a potentially serious security risk.
https://github.com/highlightjs/highlight.js/wiki/security
The element with unescaped HTML:
<code class="language-typescript hljs">...</code>

Googlając wszędzie problem opisany jest w przypadku gdy kod w bloku code jest html'em. Wtedy trzeba go "escape'ować", to zrozumiałe.
Ale mój kod jest TypeScriptem. Na to nigdzie nie znalazłem rozwiązania.
Problem też wystąpi w kodzie innych języków (C#, C++, JAVA).
Może ktoś z Was używał highlightJS i wie jak sobie z tym poradzić?

LukeJL
  • Rejestracja:około 11 lat
  • Ostatnio:około 3 godziny
  • Postów:8423
1

kod w TS również może być mylący (np. generyki mają nawiasy trójkątne <coś tam> ).

One of your code blocks includes unescaped HTML.

może chodzi o inny blok kodu, niż wkleiłeś?


hercules
  • Rejestracja:ponad 5 lat
  • Ostatnio:ponad 2 lata
  • Postów:77
0

@LukeJL: to jest jedyny kod (jedyny pre code na stronie). I w treści warninga jest on wskazany: ...

LukeJL
  • Rejestracja:około 11 lat
  • Ostatnio:około 3 godziny
  • Postów:8423
2

Może ... oznacza pominięcie treści, a nie faktyczne trzy kropki?
No i może on łapie już <code class="language-typescript"> jako kod i stąd ten komunikat?

A weź spróbuj inaczej np.

Kopiuj
 hljs.highlight('const foo: string = "<div>kotek</div>" ', {language:'ts'}).value

powinno dać ci:
<span class="hljs-keyword">const</span> foo: <span class="hljs-built_in">string</span> = <span class="hljs-string">&quot;&lt;div&gt;kotek&lt;/div&gt;&quot;</span>

czyli ładnie <> są eskejpowane i <div>kotek</div> zamienia się w &lt;div&gt;kotek&lt;/div&gt;


edytowany 1x, ostatnio: LukeJL
hercules
  • Rejestracja:ponad 5 lat
  • Ostatnio:ponad 2 lata
  • Postów:77
0

@LukeJL: No tak ale ja w swoim przykładzie nie mam żadnych znaczników HTML. Mam jedynie zwykłą deklarację enuma. I wali warningiem jak wyżej.
Jak dodam jakikolwiek inny kod, również w innym języku to też wali takim błędem. Ale żaden kod nie ma znaczników HTMLowych/XMLowych, które trzebaby escapeować

Chociaż w treści warningu wygląda to tak jakby on to co jest wewnątrz bloku code wystylował (czyli wywołał metodę highlightAll) co sprowadza sie do dodania znacznikwó HTMLowych np
span class="hljs-selector"
i dopiero wtedy walnął warningiem, że te znaczniki, które sam dodał są nieescapeowane

edytowany 3x, ostatnio: hercules
Xarviel
  • Rejestracja:ponad 3 lata
  • Ostatnio:dzień
  • Postów:847
2

A jak dokładnie wywołujesz tą funkcje?

Bo zrobiłem sobie prosty przykład na CodePen i żeby odwzorować Twój błąd musiałem dwa razy wywołać funkcję hljs.highlightAll();

Kopiuj
<pre>
  <code class="language-typescript">
    enum ChangeDetectionStrategy {
      OnPush: 0
      Default: 1 
    }
    
    class TypeScript {
      constructor(private name: string, private surname: string) {}
    }
  </code>
</pre>

<script>
  hljs.highlightAll();
  hljs.highlightAll();
</script>

Wątpię, żebyś miał coś takiego w kodzie, ale może Twój fragment odpala się kilkukrotnie i dlatego dostajesz ostrzeżenie?

edytowany 1x, ostatnio: Xarviel
hercules
  • Rejestracja:ponad 5 lat
  • Ostatnio:ponad 2 lata
  • Postów:77
1

@Xarviel:
W punkt. Aż się głupio przyznać...
Wywołałem highlightAll w angularowym hooku ngAfterViewChecked, co faktycznie wywoływało się dwa razy...

Głupi błąd.

@LukeJL, @Xarviel
Dzięki wielkie za pomoc!!!

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.