InnerHTMLって使ってはいけないの？

質問

InnerHTMLって使ってはいけないの？

プロの「引き出し」を増やす　HTML+CSSコーディングの強化書　改訂2版 [ 草野あけみ ] 価格:3300円 (2026/4/24 20:26時点) 感想(0件)

1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］ [ Mana ] 価格:2585円 (2026/4/24 20:25時点) 感想(3件)

解答

結論から言うと、「使ってはいけない」わけではないですが、無条件に使うのは危険です。 場面を選ぶべきAPIです。 1. 何が問題なのか（本質） 最大の問題は XSS（クロスサイトスクリプティング） です。 element.innerHTML = userInput; ここで userInput に <script>alert(1)</script> のようなものが入ると、 → そのまま実行される可能性がある つまり **「文字列として扱いたいものが、コードとして実行される」**のが危険です。 2. 安全に使えるケース 逆に言うと、次の条件なら基本的に問題ありません： 自分で完全に制御している固定HTML 外部入力を一切含まない 例： element.innerHTML = "<p>Hello</p>"; これは安全です。 3. 危険なケース 特に危ないのは： ユーザー入力をそのまま入れる APIレスポンスを無加工で入れる URLパラメータをそのまま使う 4. 代替手段 多くの場合はこっちを使う方がいいです。 テキストだけなら element.textContent = userInput; → HTMLとして解釈されないので安全 要素を組み立てる const p = document.createElement("p");p.textContent = userInput;element.appendChild(p); 5. パフォーマンスの話 innerHTMLは 一度全部パースし直す 既存のDOMを作り直す ので → 頻繁に使うと重い 6. 実務的な結論 現場感覚で言うと： 簡単な静的挿入 → innerHTMLでOK ユーザー入力を含む → 絶対に避ける 複雑なUI → DOM操作やフレームワーク 7. よくある誤解 「innerHTMLは危険だから全部禁止」 → これは極端です 正しくは 「入力の信頼性を保証できない場合は使うな」 8. 一番重要な視点 本質はAPIではなく 「そのデータは信頼できるか？」 です。 信頼できる → innerHTMLでもOK 信頼できない → サニタイズ or textContent

開発系エンジニアのためのDocker絵とき入門 [ 鈴木亮 ] 価格:3080円 (2025/10/29 20:54時点) 感想(0件)

お客をつかむウェブ心理学 なぜ、このサイトをクリックしてしまうのか?[本/雑誌] (DO) / 川島康平/著 価格:1650円 (2025/7/31 12:28時点) 感想(0件)

にほんブログ村