危険なinnerHTMLの使用
誤ったinnerHTMLの使用は、クロスサイト・スクリプティング(XSS)攻撃を許してしまう恐れがあります。
ユーザー入力を表示のためのサニタイジングは、ご存知のとおりエラーになる傾向があり、
適切なサニタイズに失敗することでインターネット上でのWEB脆弱性を引き起こす原因になります。
我々の設計哲学は、安全にする事は“簡単”であるべきで、
開発者は“安全では無い”操作を実行する際には、その意図を明確にすべきというものです。
このdangerouslySetInnerHTMLというプロパティ名は故意に怖がらせるような名付けをしており、
このプロパティ値(文字列の代わりにオブジェクトを使用)は、サニタイズされたデータを示すのに使用することが出来ます。
セキュリティへの影響と適切にデータがサニタイズされていることを完璧に確認した後に、
__htmlキーとサニタイズされたデータの値を含む新しいオブジェクトを作成します。
下記はJSX文法を使用した例になります。
function createMarkup() { return {__html: 'First · Second'}; };
<div dangerouslySetInnerHTML={createMarkup()} />
ここでポイントとなるのは、あなたが誤って<div dangerouslySetInnerHTML={getUsername()} />としてしまっても、
getUsername()が{__html: ''}形式のオブジェクトでは無くただの文字列を返すため、何も描画されないという点です。
この{__html:...}文法の背景にある意図は、一種の"type/taint(汚点、汚染)"であるとみなすことです。
このラッパーオブジェクトを使用した関数から、サニタイズされたデータが返され、
印付けられたこのデータは後ほどdangerouslySetInnerHTMLに渡されます。
このような理由から、我々は<div dangerouslySetInnerHTML={{__html: getMarkup()}} />形式で書かないことをお奨めしています。
この機能は主に、DOM文字列を操作するライブラリと協同作業するために提供されるものであるため、 提供されるHTMLは"well-formed"(XML仕様に従った形式)でなければいけません。(すなわち、XMLバリデーションをパスするもの)
これを使用した完全な例を見たいのであれば、 Reactのトップページの最後の例を参照してください。