Wie render ich Markdown von einer React-Komponente sicher?

Question

Ich möchte Markdown in meiner ReactJS App anzeigen, aber es ist wichtig, dass es sicher ausgeführt wird. Die Markdown-Dateien, die ich anzeigen werde, sind nicht vertrauenswürdiger öffentlicher Inhalt.

Ich habe verschiedene Lösungen gesehen und sie alle verwenden gefährlich SetInnerHTML.

Ich kann mir nicht helfen zu denken, dass dies, na ja, gefährlich sein könnte.

Wer hat irgendwelche Ideen?

dank

Answer 1

They gave dangerouslySetInnerHTML a scary name very deliberately, dass die Menschen sehr sorgfältig darüber denken würde treffen, ob sie benötigt sie/verwenden, ob sie es richtig verwendet haben. Da du diese Frage stellst, ist es klar, dass der Job gut gemacht ist! Aber Markdown Rendering ist in der Tat ein Fall, wo es notwendig ist.

Grundsätzlich kommt es darauf an: dangerouslySetInnerHTML ist nur gefährlich, wenn Sie nicht sicherstellen, dass das Zeug, das Sie hineinstecken, vorher sicher ist. Sei vorsichtig, aber lass dich nicht davon abschrecken!

EDIT: Wie von Waylan in den Kommentaren erwähnt, war das Beispiel, das ich gab, ziemlich naiv und berücksichtigte nicht other ways XSS attacks can be achieved through Markdown. Höchstwahrscheinlich werden Sie die Ausgabe durch einen Desinfizierer anstatt/sowie die Eingabe laufen lassen, andernfalls ist es sehr möglich, bösartigen HTML zu erzeugen, ohne so etwas wie das Einbetten eines script Tags zu tun. Der Hauptpunkt meiner Antwort bleibt jedoch derselbe; dangerouslySetInnerHTML ist nur so gefährlich wie das, was Sie hineingesteckt haben. Machen Sie Ihre Nachforschungen, stellen Sie sicher, dass die Eingabe sicher ist und Ihnen nichts passiert.