Web制作の「入り口」で知っておきたい：textContentとinnerHTMLの決定的な違い
Web制作を学び始めると、JavaScriptを使って画面上の文字を書き換えるシーンによく出会いますよね。例えば、「ボタンを押したら挨拶を表示する」とか、「フォームに入力した名前を画面に出す」といった機能です。
このとき、多くの入門書やチュートリアルで目にするのが `textContent` と `innerHTML` という2つのプロパティです。
「どっちを使っても文字は表示されるし、同じじゃないの？」
そう思うのも無理はありません。実はこれ、見た目は同じでも、「中身の扱い方」がまるで違うんです。そして、この違いを知っておかないと、あなたの作ったWebサイトが、悪意ある攻撃者に狙われる「穴」になってしまう可能性があるのです。
今日は、フロントエンドの現場で絶対に守るべき「セキュリティの鉄則」を、一緒に優しく紐解いていきましょう。
—
1. 例え話で理解する：郵便物と怪しい小包
Webブラウザに文字を表示させる作業を、「郵便受けに手紙を届ける」ことに例えてみましょう。
`textContent` は「封筒の中身だけ」を渡す
`textContent` は、受け取った文字データを「ただの文字」としてそのまま表示します。郵便で言えば、「中身が何であれ、封筒を開けずにそのままポストに入れる」ようなものです。中身がどんなに危険な文章（悪意あるコード）であっても、それは単なる紙の束として扱われるため、何の影響も受けません。
`innerHTML` は「箱を開けて組み立てる」
一方で `innerHTML` は、受け取った文字列を「HTMLタグ」として解釈します。これは、「届いた小包を勝手に開封して、中の部品を組み立てて設置する」ようなもの。もし小包の中に爆弾（悪意あるスクリプト）が入っていたら……？ ブラウザはそれを「指示通りに組み立てなきゃ！」と受け入れてしまい、爆発（XSS攻撃）が起きてしまうのです。
—
2. なぜ `innerHTML` は危ないの？（XSSの脅威）
XSS（クロスサイトスクリプティング）という言葉を耳にしたことはありますか？ 難しそうに聞こえますが、要するに「ユーザーの入力欄を悪用して、勝手にプログラムを実行させる攻撃」のことです。
例えば、名前を入力するフォームに、普通の名前ではなく `` なんていう「いたずらコード」を入力されたとします。
もしあなたが `innerHTML` を使っていたら、ブラウザは「おっ、画像タグだ！ 表示しなきゃ！」と勘違いし、その場で攻撃者のプログラムを動かしてしまいます。これが、Webサイトを乗っ取られたり、ユーザーの個人情報を盗まれたりする最大の原因の一つです。
—
3. 実践！安全な書き方を選ぼう
まずは、実際にコードを見てみましょう。あなたのエディタにコピペして、動作の違いを確認してみてください。
// 画面上の
を操作すると仮定します
const messageBox = document.getElementById(‘message’);
const userInput = “危険なデータ“;
// 【安全な方法】textContentを使う
// これなら、HTMLタグもそのまま「文字」として表示されます
messageBox.textContent = userInput;
// 画面には 危険なデータ という文字列がそのまま出ます。安全！
// 【危険な方法】innerHTMLを使う
// これだと、HTMLとして解釈されてしまい、赤い太字で「危険なデータ」と表示されます
// もしここに
コメント