Reactで生 HTMLソースを表示するには？

通常は、外部で入力された HTMLソースを、画面にそのまま出力するのは推奨されていないが、要件によっては生のHTMLソースを扱うケースもあるだろう。

そこで、今回は Reactで HTMLソースを画面に表示する方法を紹介する。

スポンサーリンク

dangerouslySetInnerHTML

Reactで HTMLをそのまま表示させる場合は、dangerouslySetInnerHTML属性を使用する。

<div dangerouslySetInnerHTML={{__html: 'First <br/>Second'}}></div>

通常 HTMLをそのまま画面に表示する行為は危険であるため、Reactでは危険を自覚させるために、dangerouslySetInnerHTML 属性に __html というキーを持つオブジェクトを渡す必要があります。

<script> タグを含んでいても大丈夫

外部ソースの HTMLを表示する時に気になるのが、HTMLソースの中に <script> タグなどが含まれていた時の XSS攻撃の問題だ。

Reactの dangerouslySetInnerHTML は、内部的には innerHTML 属性に HTMLを流しているいる。innerHTML はソースの中に含まれる <scirpt> タグは実行されない仕様なので、怪しいスクリプトが実行される心配は一旦はしなくていい。

ただし、未知の攻撃や、HTML破壊（わざと終了タグがないHTMLで画面表示を崩壊させる攻撃）には対処できないので、心配な場合は DOMPurify などのセーフティーに HTMLソースをパースするライブラリなどを使うのもよいであろう。