更新日: 2022年09月13日
公開日: 2017年12月28日

【初心者向け】HTMLを使ったエスケープ処理について詳しく解説！

Webアプリやアプリ開発の際に必須となるエスケープ処理。
最低限のセキュリティ処理として概要を知っておきたいですよね。
今回は、HTML初心者の方でもエスケープ処理を試せるコード（PHP言語）を紹介していますので、よかったらご利用下さい。

【エスケープ】escape：脱出、逃亡などの意味

【初心者向け】HTMLを使ったエスケープ処理について詳しく解説！
Webアプリ（アプリ）とHTMLの関係
エスケープ処理とは？
HTMLの特殊文字とは？
エスケープ処理を試してみる
開発環境とエスケープ処理
まとめ

【初心者向け】HTMLを使ったエスケープ処理について詳しく解説！

Webアプリ（アプリ）とHTMLの関係

【Webの処理フロー】*上図参照
Web上で入力されたデータ①は、サーバーに転送され②、事前に用意されているプログラムに入力されて③、処理される④。

まずHTML言語は、ブラウザ上に文字や画像、記号などを表示するためのプログラミング言語です。 HTMLで書かれた文字や表が出力される過程としては、Google ChromeやEdge、SafariなどのブラウザがHTMLファイルに書かれている文字コードを読み取って、それに従ってHTML言語を日本語や記号に変換して画面に表示してくれます。

ブログ記事などでよく見かける「コメント記入欄」やショッピングサイトで見かける「ユーザー情報記入欄」などがない静的な・・・Webページであれば特に気にすることはないのですが、コメント欄やユーザー情報記入欄を設けている動的な・・・Webページでは適切な処置をしたプログラムを用意する必要があります。それは本来コメントやユーザー情報を記述する欄に、JavaScriptなど動的な言語を用いてプログラムコードを記入されると、Webサイトのユーザー情報が漏洩したりする恐れがあるためです。

例えば <script>alert('XSS')</script> 、こんなコードをコピペして、画面上にポップアップが表示されるサイトはヤバイです。試しに当ブログサイトの記事検索欄にコピペしてみて下さい。ポップアップは表示されずに、「検索結果はありません」と表示されると思います。

実は、この <script>alert('XSS')</script> を入力してから、検索処理を行うプログラムで <script>alert('XSS')</script> はエスケープ処理されています。

エスケープ処理とは？

エスケープ処理とは、検索処理を行うプログラムやコメント投稿を表示するプログラムなどに用いられる文字変換の処理方法です。検索処理やコメント投稿を表示するプログラム（PHPやRuby、Javaなど）に、プログラムコードと同じ < や >、? など半角記号をそのまま処理プログラムに取り込むとバグの原因となります。そのため処理プログラムを実行する際に、一度半角記号を < や > に変換。こうすることでバグを未然に防ぎ、ハッカーからの攻撃（XSSなど）を防ぐことができます。

HTMLの特殊文字とは？

一般的にエスケープ処理された文字 < や > などは「特殊文字」といいます。 Webページのコードを見ている時に < や ' など &○○; の書式で書かれているものがあれば、それは記号を意味するコードと認識しましょう。

Webページを制作する段階で、わざわざ特殊文字でWebページを作ることはないと思いますが、WordPressなどでは投稿欄の編集ページを「テキスト」にすると特殊文字が登場してきますので事前に知っておきたいですね。

HTMLの特殊文字はこうしたエスケープ処理を指すことが多いですが、実はもう一つ使い方があります。それは絵文字です。

🎅 とHTMLに書くとサンタ 🎅 が表示されたり、 🎃 とするとハロウィーンのかぼちゃ 🎃 が表示されます。これはHTMLでよく使われる文字コードの UTF-8 に特殊記号が含まれているためで、専用のコードを書くことによって絵文字の出力が可能に。画像や写真を用意しなくても済む場面が出てきそうですし、色や大きさをコーディングで変えられる点もいいですね。

エスケープ処理を試してみる

これからWebアプリやスマホアプリを作ろうとしている方、エンジニア就職や転職を考えている方は、是非一度エスケープ処理を体験してみましょう。実際にエスケープしている・・・・ものとしていない・・・・・ものを動かしてみるとより理解が深まると思います。

今回は、比較的簡単に試せる PHP言語を使ってエスケープを体験してみます。

【体験の前準備】
・PHPのローカル開発環境（XAMPPやMAMPなど）

【エスケープなし　PHP_NoXSS.php】

<html>
<body>
<form action="" method="post">
<input type="text" name="textbox" value="" />
<input type="submit" value="送信" />
</form>
入力文字：
  <?php
  print $_POST["textbox"];
  ?>
</body>
</html>

【エスケープあり　PHP_OkXSS.php】

<html>
<body>
<form action="<?= $_SERVER['PHP_SELF']; ?>" method="post">
<input type="text" name="textbox" value="" />
<input type="submit" value="送信" />
</form>
入力文字：
  <?php
  print htmlspecialchars( $_POST["textbox"] );
  ?>     
</body>
</html>

PHPの場合は、print文のところに htmlspecialchars を加えることで、エスケープ処理されます。 2つのファイルを用意してブラウザで起動、そして入力欄に <script>alert('XSSの危険')</script> をコピペしてみて下さい。

＞＞　結果

【エスケープなし　PHP_NoXSS.php】

【エスケープあり　PHP_OkXSS.php】

エスケープ処理ありの方は、<script>のコードを特殊文字に変換して JavaScript の実行を回避していますね。これによって悪意あるユーザーからの攻撃を回避することができます。

開発環境とエスケープ処理

近年Webやアプリ開発環境において、使用する言語の多様化以外にフレームワークやCMS（WordPress）が使われることは当たり前となりました。実はこのエスケープ処理、フレームワークによって設定方法は違います。先ほどのPHPの場合は、print文に htmlspecialchars を加えればよかったのですが、Java（JSP）の場合は c:out だったり、JavaScriptの場合はエスケープ用のコード記述が必要だったり。また一方でRuby on RailsやAngularJSはエスケープ処理が標準搭載なのに比べて、Spring（java）はSpring Security の設定が必要だったり。エスケープ処理の仕方もいろいろあるんだな、ということを知っておきたいですね。

＼一流デザイナーのスキルが身に付く／

無料カウンセリングはこちら

まとめ

エスケープ処理は、Webアプリやアプリ開発において当たり前の工程なので、エンジニアへの就職・転職を考えている方は知っておきたいですよね。エスケープ処理以前に、 <p> や <form> などのタグがよくわからないという方は、CodeCampでHTML学習からはじめてみませんか？また就職・転職を念頭にプログラミング学習に取り組まれている方・取り組む方は、受講料をお得にできるエンジニア転職がありますよ。

【お断り】
本稿で紹介しているエスケープ処理は、Webセキュリティ対策の一部分です。エスケープ処理だけ行っていればWebアプリやスマホアプリを安全に保てるものではありません。エスケープ処理以外のセキュリティに関することは、下記をご参照ください。