HTMLで特殊文字のエスケープ処理を行う方法【初心者向け】

初心者向けにHTMLで特殊文字のエスケープ処理を行う方法について解説しています。ブラウザ上では何が起きてるか分からないかもしれないですが、サイトのセキュリティ的にも大事な部分なので、ぜひ実際に書いて慣れていきましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

HTMLで特殊文字をエスケープする方法についてテックアカデミーのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説しています。

目次

そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

特殊文字とは

特殊文字とは、<>や”といったHTMLを書く際に使う記号や、©や£のような通常の文字とは異なる特別な文字のことを指します。

 

エスケープとは

エスケープとは、HTML上で特殊文字を期待通りに表示するために施す処理のことです。

特殊文字に指定されている文字は、割り当てられている記号を記述することで表示できます。

 

例えば、<は&lt;であったり、©は&copy;など、特殊文字には必ず該当する記号が割り当たっています。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

主なエスケープ文字一覧

シングルクォーテーションのみ、数値表現でコードを表示しています。

記号 コード 意味
< &lt; 小なり
> &gt; 大なり
&#39;
シングルクォーテーション
&quot;
ダブルクォーテーション
& &amp;
アンパサンド(アンド)
&nbsp; 空白
¥ &yen; 日本円
¢ &cent; セント
£ &pound; ポンド
¦ &brvbar; 縦破線
© &copy; コピーライト
® &reg; 登録商標
° &deg; 気温を表す度
± &plusmn; プラスマイナス
× &times; 掛け算の乗算
÷ &divide; 割り算の除算
µ &micro; マイクロ
· &middot; 中点
§ &sect; セクション
« &laquo; 左引用
» &raquo; 右引用
² &sup2; 上付き2
³ &sup3; 上付き3
¹ &sup1; 上付き1
¼ &frac14; 4分の1
½ &frac12; 2分の1
¾ &frac34; 4分の3

 

エスケープしない危険性

エスケープしないと、「意図しない挙動」が発生する危険性があります。

例えば、メールフォームなどで情報を送信するページを作ったとします。

 

この時、メールフォームにエスケープ処理を施さないことで、クロスサイトスクリプティング(XSS)という攻撃の標的にされることがあります。

具体的に次のような攻撃を受けます。

  • セッションハイジャック
  • XSS(クロスサイトスクリプティング)

これら2つの攻撃について解説します。

 

セッションハイジャック

セッションハイジャックとは、何らかの方法でセッションが乗っ取られることを指します。

セッションが乗っ取られることにより、ユーザーの権限を使われて不正な操作をされたり、ユーザーの個人情報・重要情報が盗まれる場合があります。

つまり、「なりすまし」による不正アクセスが可能になります。

セッションハイジャックの対策にもエスケープ処理が有効です。

 

XSS(クロスサイトスクリプティング)

XSS(クロスサイトスクリプティング)とは、サイトにスクリプトを埋め込み実行することです。

XSSの対策にもエスケープ処理が有効です。

 

実際に書いてみよう

HTML上で特殊文字を扱う処理の使用例を見ていきましょう。

HTML

<html>
  <head>
    <title></title>
    <meta charset="utf-8" />
  </head>
  <body>
    <strong>この文字列は太くなります。</strong>
    <br />
    &lt;strong&gt;この文字は太くなりません。&lt;/strong&gt;
    <br />

    <h1>よく使う特殊記号</h1>

    &amp;(アンパサンド)
    <br />
    &lt;(小なり)
    <br />
    &gt;(大なり)
    <br />
    &quot;(ダブルクォーテーション)
    <br />
    &#39;(シングルクォーテーション)
    &nbsp;(空白)
    <br />
    &copy;(コピーライト)
  </body>
</html>

 

表示結果

 

解説

次のコードはHTMLでstrongタグが適用されるため、太字で表示されます。

<strong>この文字列は太くなります。</strong>

 

次のコードはエスケープ処理されるため、strongが文字列で表示されるだけで、太字にはなりません。

もし、このコードがサーバを攻撃するようなコードだったとしても、エスケープ処理することで安全になります。

&lt;strong&gt;この文字は太くなりません。&lt;/strong&gt;

 

次のコードでは、エスケープ処理をすることで、以下の結果が表示されます。

&amp;(アンパサンド)
&lt;(小なり)
&gt;(大なり)
&quot;(ダブルクォーテーション)
&#39;(シングルクォーテーション)
&nbsp;(空白)
&copy;(コピーライト)

 

実行結果

それぞれの特殊記号が正常に表示されていることがわかります。

 

以上、特殊文字をエスケープする処理の流れを解説しました。

特殊文字をブラウザ上に表示させたい場合は、参考にしてみてください。

 

 

大石ゆかり

内容が分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

執筆してくれたメンター

中本賢吾(なかもとけんご)
アジマッチ有限会社 代表取締役社長

開発実績:PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。WordPressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。小学生がオリジナルAndroidアプリをGoogle Playでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。

 

HTMLを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

HTMLを学習していて、このように思ったことはありませんか?

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!