はじめに
いなたつアドカレの五日目の記事です。
今回はReactで生のhtmlを扱うための方法とその時の注意について少し、、、
ざっくりいうと
- dangerouslySetInnerHTMLを使おう
- XSS に気をつけよう
- markdownから変換して表示も可能だよ
dangerouslySetInnerHTMLを使う
<span dangerouslySetInnerHTML={{ __html: html}} />
dangerouslySetInnerHTML属性に__html(あんだーばーあんだーばーへいちてぃーえむえる)に展開したいhtmlを設定する オブジェクト を渡すことで指定したhtmlをタグ内部に展開することができます。
dangerouslyやねん
XSSの危険がつきまとってくるんですよね。
XSSってのはクロスサイトスクリプティングといって、テキストボックスにhtmlを埋め込み、予期せぬ動作をさせようとすることです。
これの何がdangerouslyかというと
- テキストボックスにスクリプトを入力し、javascriptを実行させることで、クッキーなどを盗みなりすましができる
- 同様に、アプリケーションの機能を悪用されるかもしれない
クッキーでセッションIDなんかを保持しているとなりすましの温床になりかねないですね。。。。
dangerouslyって名前についてるのはこういうところからなので、まあ、あまり使わない方がいいですね。
じゃあどーやって対策すんの
** サニタイズ **
markdownがうんぬんかんぬん
markdownを生のhtmlに変換してここにぶちこんでやるぜーしたらmarkdownエディタのプレビューっぽいことできるって話
次回reactとmarkedのお話を書きます。。。。