React入門 練習問題 45:JSXの属性:HTMLの直接挿入
Reactで意図的に生のHTML文字列を直接DOMに挿入するための属性として正しいものはどれか。
- dangerouslySetInnerHTML
- dangerouslyInsertHTML
- dangerouslyInjectHTML
- dangerouslyAppendHTML
- dangerouslyWriteHTML
正解と解説を見る
正解:dangerouslySetInnerHTML
Reactで生のHTML文字列をDOMに直接挿入する場合は、「dangerouslySetInnerHTML」属性を使用するのが正解です。
【正解の理由】
ReactはデフォルトでXSS(クロスサイトスクリプティング=悪意のあるコードを実行させる攻撃)を防ぐために文字列をエスケープ処理(=無害化)します。そのため、意図的にHTMLタグとして解釈させたい場合は、開発者が危険性を認識した上で「dangerouslySetInnerHTML」を明示的に指定する仕様になっています。
【不正解の理由】
• 「dangerouslyInsertHTML」という属性はReactに存在しない
• 「dangerouslyInjectHTML」という属性はReactに存在しない
• 「dangerouslyAppendHTML」という属性はReactに存在しない
• 「dangerouslyWriteHTML」という属性はReactに存在しない