HTML エスケープ処理：サンプルコードとライブラリ紹介

2024-05-09

HTMLでエスケープが必要な文字

HTMLには、構文解析を混乱させたり、予期しない動作を引き起こしたりする可能性がある文字があります。このような文字を正しく表示するために、エスケープ処理と呼ばれる処理が必要です。

エスケープ処理とは、特殊な意味を持つ文字を、その本来の意味ではなく記号として扱うための変換処理です。具体的には、以下の2つの方法があります。

エンティティ参照の使用 特殊文字を、あらかじめ定義された記号 (& + 文字コード or 文字名 + ;) に置き換えます。例：< (小于記号) を < に置き換え

エスケープが必要な文字

一般的に、以下の文字はHTMLでエスケープする必要があります。

HTMLタグ構文に関わる記号
- < (小于記号)
- & (アンド記号)
- " (引用符)
- ' (アポストロフィ)
制御文字
- タブ (\t)
- 改行 (\n)
- キャリッジリターン (\r)
特殊記号
- 商標記号 (™)
- 著作権記号 (©)
その他
- 長音符 (ー)
- 中点 (・)

エスケープ処理を怠ると、以下のような問題が発生する可能性があります。

構文解析エラー ブラウザがHTMLコードを誤って解釈し、正しく表示されない可能性があります。
クロスサイトスクリプティング (XSS) 攻撃 悪意のあるコードを挿入され、ユーザーの情報を窃取されたり、サイトが改ざんされたりする可能性があります。

HTMLで特殊文字を使用する場合は、必ずエスケープ処理を行いましょう。

以下のツールが、エスケープ処理を簡単に行うのに役立ちます。

HTML エスケープ処理のサンプルコード

以下に、HTMLでエスケープ処理を行うためのサンプルコードを示します。

エンティティ参照を使用する場合

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTML エスケープ処理</title>
</head>
<body>
  <p>この文章には &lt;script&gt; タグが含まれています。</p>
</body>
</html>

上記のコードは、<script> タグを含む文章を出力します。しかし、< と > はエンティティ参照に置き換えられているため、ブラウザは正しくスクリプトタグを解釈せず、単なる文字列として表示します。

文字コードを使用する場合

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTML エスケープ処理</title>
</head>
<body>
  <p>この文章には &#60;script&#62; タグが含まれています。</p>
</body>
</html>

上記のコードは、エンティティ参照の代わりに、< と > という文字コードを使用して、<script> タグを表しています。

ライブラリを使用する場合

プログラミング言語によっては、HTMLエスケープ処理を行うためのライブラリが用意されています。以下は、Pythonにおけるライブラリの使用例です。

import cgi

html = "<p>この文章には &lt;script&gt; タグが含まれています。</p>"

escaped_html = cgi.escape(html)

print(escaped_html)

上記のコードは、cgi モジュールの escape 関数を使用して、html 変数内の特殊文字をエスケープします。

HTMLにおけるエスケープ処理は、構文解析エラーやXSS攻撃を防ぐために重要な役割を果たします。サンプルコードを参考に、状況に応じて適切な方法でエスケープ処理を行いましょう。

HTMLエスケープ処理のその他の方法

従来の説明に加えて、HTMLエスケープ処理を行うその他の方法についていくつかご紹介します。

JavaScriptライブラリを使用すれば、クライアントサイドでエスケープ処理を簡単に行うことができます。以下は、代表的なライブラリとその使用方法の例です。

DOMPurify

https://github.com/cure53/DOMPurify/blob/main/demos/README.md

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTML エスケープ処理</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dompurify.min.js"></script>
</head>
<body>
  <script>
    const dirtyHTML = '<p>この文章には &lt;script&gt; タグが含まれています。</p>';
    const escapedHTML = DOMPurify.sanitize(dirtyHTML);

    document.getElementById('output').innerHTML = escapedHTML;
  </script>
  <div id="output"></div>
</body>
</html>

上記のコードは、DOMPurify ライブラリを使用して、<script> タグを含む文字列をエスケープします。

JQuery

https://jquery.com/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTML エスケープ処理</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <script>
    const dirtyHTML = '<p>この文章には &lt;script&gt; タグが含まれています。</p>';
    const escapedHTML = $('<div></div>').html(dirtyHTML).text();

    $('#output').html(escapedHTML);
  </script>
  <div id="output"></div>
</body>
</html>

サーバーサイドでエスケープ処理を行うことで、より安全な処理を実現できます。以下は、代表的なプログラミング言語におけるエスケープ処理の例です。

PHP

<?php
$dirtyHTML = '<p>この文章には &lt;script&gt; タグが含まれています。</p>';
$escapedHTML = htmlentities($dirtyHTML);

echo $escapedHTML;

Python

import cgi

dirtyHTML = "<p>この文章には &lt;script&gt; タグが含まれています。</p>"
escapedHTML = cgi.escape(dirtyHTML)

print(escapedHTML)

Java

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class EscapeServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        String dirtyHTML = "<p>この文章には &lt;script&gt; タグが含まれています。</p>";
        String escapedHTML = StringEscapeUtils.escapeHtml4(dirtyHTML);

        response.setContentType("text/html");
        response.getWriter().print(escapedHTML);
    }
}