Qraft(クラフト) 資格・学習クイズアプリ

React入門 練習問題 45:JSXの属性:HTMLの直接挿入

Reactで意図的に生のHTML文字列を直接DOMに挿入するための属性として正しいものはどれか。

  1. dangerouslySetInnerHTML
  2. dangerouslyInsertHTML
  3. dangerouslyInjectHTML
  4. dangerouslyAppendHTML
  5. dangerouslyWriteHTML
正解と解説を見る
正解:dangerouslySetInnerHTML

Reactで生のHTML文字列をDOMに直接挿入する場合は、「dangerouslySetInnerHTML」属性を使用するのが正解です。

【正解の理由】
ReactはデフォルトでXSS(クロスサイトスクリプティング=悪意のあるコードを実行させる攻撃)を防ぐために文字列をエスケープ処理(=無害化)します。そのため、意図的にHTMLタグとして解釈させたい場合は、開発者が危険性を認識した上で「dangerouslySetInnerHTML」を明示的に指定する仕様になっています。

【不正解の理由】
• 「dangerouslyInsertHTML」という属性はReactに存在しない
• 「dangerouslyInjectHTML」という属性はReactに存在しない
• 「dangerouslyAppendHTML」という属性はReactに存在しない
• 「dangerouslyWriteHTML」という属性はReactに存在しない

← 前の問題問題一覧次の問題 →
アプリで解いてレーティングを上げる(無料・登録不要)