「HTMLのescape（エスケープ）処理の仕方が分からない」「具体的にどう使うの？」

そんな悩みはありませんか？

HTML・CSSを理解していても、escape処理については自信がないという方も多いのではないでしょうか。

今回は、HTMLのescape処理について学びたい、という方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、HTMLのescape処理について何ができるのか、どんなときに必要なのか、が分かるようになりますよ。

ぜひ最後まで読んでくださいね！

escape処理とは？どんな時に使うもの？

escape処理とは、HTML上の「<」や「>」、「”」などの特殊文字を、そのまま表示させるための処理のことです。

それぞれの特殊文字にコードが割り当てられています。

例えば、<div>は、「&lt;div&gt;」というコードで記述でき、escape処理をすることでHTMLタグの挙動をするのではなく、ただの文字列として表示されるようになります。

主なescape文字を紹介します。

Web上には、特殊文字をescape処理するツールがありますので、活用してみてくださいね。

では、このようなescape処理は、どのような場面で使われるのでしょうか？

ここでは主に3つの場面での使い方を紹介します。

それぞれ見ていきましょう。

Web開発のセキュリティについて

Webサービスやアプリなど、Web開発をする際のセキュリティとしてescape処理が重要になってきます。

例えば、SNSやユーザー登録できるサービスなどでは、ユーザーが書き込んだものを、他の人が閲覧することができますね。

ここに、JavaScriptを用いた以下のようなスクリプトが書き込まれたとします。

<script>alert('注意！！')</script>

ここでHTMLがescape処理されなかった場合、どうなるのでしょうか？

Webページを開いた瞬間にスクリプトが実行され、ポップアップが勝手に出現するようになります。

このようにサイトにスクリプトを埋め込んで実行させる攻撃のことを、XSS（クロスサイトスクリプティング）といいます。

対処としてescape処理することを「XSS対策」と呼びますね。

より悪質なものになると、自動的に他サイトに移動したり、マルウェア感染などを引き起こしたりします。

また、個人情報などの入力を促す入力フォームが表示されることもあります。

Web上で意図しない挙動を防ぐために、escape処理が必要になるのです。

escape処理はプログラムの中で行います。PHPでは「htmlspecialchars()」を使って攻撃を防ぎます。

ブログのコメント欄について

ブログもWeb上で運用しているため、XSSを受ける危険性があります。

ただ、個人でブログを運用していても、escape処理についてはあまり意識していないことが多いですよね。

多くのブログサービスでは、記事の執筆やコメント入力において自動的にescape処理がされています。

ブログが簡単に作れるWordPressでも、コメントにスクリプトを入力しようとするとHTMLタグが自動的に削除されます。

記事を執筆する際にもHTMLタグが削除されるので、サンプルコードなどを記述したい場合には、コードが入力できるプラグインやテーマを使用する必要がありますね。

プログラムでのHTMLタグ出力について

セキュリティ以外の面でもescape処理が必要になることがあります。

PHPなどのプログラムを使ってHTMLタグやその他の記号を出力したい場合にescape処理を使います。

例えば、PHPで文字列を出力したい場合には、以下のように記述します。

echo "こんにちは。これはサンプルです。"

文字列の左右を「”（ダブルクォーテーション）」または「’（シングルクォーテーション）」で囲います。

文字列の中で「”」をそのまま出力したいときがあると思います。

以下のようにそのまま書くのは間違いです。

echo "こんにちは。これは"サンプル"です。"

この方法では、「こんにちは。これは」の範囲が文字列だと判断され、実行エラーになります。

ここに、「¥（円記号）」を入れることで、そのまま出力することができます。

echo "こんにちは。これは\"サンプル\"です。"

HTMLタグを出力するときにも同じことができます。

echo "<a href=\"#\" target=\"_blank\" class=\"sample\">リンク</a>"

使用しているエディタによっては、「¥（円記号）」ではなく「\（バックスラッシュ）」で表示されることがありますが、意味は変わりません。

他にもプログラムの特殊記号をescape処理するために円記号を使うことはよくあります。

覚えておくと今後の学習で役に立つでしょう。

まとめ：Web開発やプログラムの知識としてescape処理は大事

今回は、HTMLのescape処理について使用場面や使い方などを解説してきました。

セキュリティ以外には、プログラムでHTMLタグの出力をしたいときのescape処理についても説明しましたね。

Web開発やプログラムの学習には必須知識なので、これを機会に理解しておきましょう。

今回の記事が参考になれば幸いです。

＼プログラミングスクールを比較／