MENU
  1. ホーム
  2. JavaScript
  3. JavaScriptでの文字列エスケープとアンエスケープ方法を詳しく解説

JavaScriptでの文字列エスケープとアンエスケープ方法を詳しく解説

JavaScript

JavaScriptにおける文字列のエスケープとアンエスケープは、開発者がデータを安全に処理し、表示するために欠かせない技術です。特に、Web開発の現場では、ユーザーからの入力を安全に扱うことが重要であり、エスケープとアンエスケープの技術はその一環として必要不可欠です。エスケープとは、文字列内の特殊文字を特定のシーケンスで置き換えることを指し、これにより文字列が意図しない形で解釈されるのを防ぎます。一方、アンエスケープはエスケープされた文字列を元の状態に戻すことを意味します。本記事では、JavaScriptにおける文字列のエスケープとアンエスケープの基礎から応用までを詳しく解説し、実践的な例や演習問題を通じて理解を深めます。これにより、安全で効率的な文字列処理を実現するための知識を習得できるでしょう。

目次

文字列のエスケープとは

文字列のエスケープとは、文字列内に含まれる特殊な意味を持つ文字を別の表現に置き換えることです。これにより、プログラムやシステムがその文字を正しく解釈し、意図した通りに処理できるようにします。

エスケープの目的

エスケープの主な目的は、特殊文字がプログラムの構文やデータのフォーマットを壊すのを防ぐことです。例えば、ダブルクォート（”）やバックスラッシュ（\）などの文字は、文字列の境界やエスケープシーケンスとして解釈されるため、これらを適切にエスケープしないと、文字列が正しく処理されません。

エスケープの具体例

エスケープの具体例として、以下のようなシナリオがあります：

  • HTMLの中で特殊文字（例えば、< や >）を表示するためにエスケープする。
  • SQLクエリ内で文字列として扱うデータに含まれるシングルクォート（’）をエスケープする。
  • JavaScriptの文字列内で改行やタブを表現するためにエスケープシーケンスを使用する。

エスケープを適切に行うことで、文字列が意図した通りに解釈され、安全かつ正確に処理されるようになります。次のセクションでは、JavaScriptでの具体的なエスケープ方法について詳しく見ていきます。

JavaScriptでのエスケープ方法

JavaScriptでは、文字列内の特殊文字をエスケープするためにさまざまな方法が用意されています。これにより、文字列が正しく解釈され、意図した通りに表示されます。

バックスラッシュを使用したエスケープ

JavaScriptでは、バックスラッシュ（\）を使って文字列内の特殊文字をエスケープします。以下に主なエスケープシーケンスの例を示します：

  • \"：ダブルクォート
  • \'：シングルクォート
  • \\：バックスラッシュ
  • \n：改行
  • \t：タブ
let str = "This is a \"quoted\" string with a newline\nand a tab\tcharacter.";
console.log(str);

encodeURIComponentとdecodeURIComponent

JavaScriptでは、URLエンコードやデコードを行うために、encodeURIComponentとdecodeURIComponent関数を使用します。これにより、URLのクエリパラメータなどで特殊文字を安全に扱うことができます。

let url = "https://example.com/search?query=JavaScript &エスケープ";
let encodedUrl = encodeURIComponent(url);
console.log(encodedUrl); // "https%3A%2F%2Fexample.com%2Fsearch%3Fquery%3DJavaScript%20%26%E3%82%A8%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%97"

エスケープ関数の使用

JavaScriptには、文字列をエスケープするための関数も用意されています。例えば、HTMLエスケープを行うために独自の関数を作成することができます。

function escapeHtml(str) {
    return str.replace(/&/g, "&amp;")
              .replace(/</g, "&lt;")
              .replace(/>/g, "&gt;")
              .replace(/"/g, "&quot;")
              .replace(/'/g, "&#039;");
}

let unsafeString = "<script>alert('Hello!');</script>";
let safeString = escapeHtml(unsafeString);
console.log(safeString); // "&lt;script&gt;alert('Hello!');&lt;/script&gt;"

テンプレートリテラルを使ったエスケープ

テンプレートリテラル（バッククォート“）を使用することで、複雑な文字列内でのエスケープを簡単に行うことができます。テンプレートリテラルでは、改行や変数埋め込みが簡単にできるため、可読性が向上します。

let name = "John";
let message = `Hello, ${name}!
Welcome to the "JavaScript World".`;
console.log(message);

これらの方法を適切に使い分けることで、JavaScriptでの文字列操作がより安全で効果的になります。次のセクションでは、文字列のアンエスケープについて詳しく解説します。

文字列のアンエスケープとは

文字列のアンエスケープとは、エスケープされた文字列を元の状態に戻すプロセスです。これは、エスケープされた特殊文字をその元の形に変換することを意味します。

アンエスケープの目的

アンエスケープの主な目的は、エスケープされた文字列をユーザーが読みやすい形に戻すことです。例えば、データベースやファイルシステムから読み込んだ文字列がエスケープされている場合、その文字列を表示する前にアンエスケープする必要があります。また、エスケープされた文字列を再度操作するためにもアンエスケープが必要です。

アンエスケープの具体例

アンエスケープの具体例として、以下のようなシナリオがあります：

  • Webページ上で表示されるHTMLエスケープされた文字列を元に戻す。
  • URLパラメータとしてエンコードされた文字列をデコードする。
  • JavaScriptコード内でエスケープされた文字列を正しく表示する。

これにより、ユーザーが入力したデータや他のシステムから取得したデータを正確に表示および処理できるようになります。次のセクションでは、JavaScriptでのアンエスケープ方法について詳しく見ていきます。

JavaScriptでのアンエスケープ方法

JavaScriptでは、エスケープされた文字列を元に戻すためのさまざまなアンエスケープ手法が用意されています。これにより、エスケープされた文字列を再び正しく処理し、表示することができます。

unescape関数の使用

JavaScriptの古い関数であるunescapeは、エスケープされた文字列をデコードするために使用されます。ただし、この関数は非推奨とされているため、最新のアプリケーションでは使用を避けるべきです。

let escapedStr = "Hello%20World%21";
let unescapedStr = unescape(escapedStr);
console.log(unescapedStr); // "Hello World!"

decodeURIComponent関数の使用

decodeURIComponentは、URLエンコードされた文字列をデコードするための推奨される方法です。これは、encodeURIComponentでエンコードされた文字列を元に戻すために使用されます。

let encodedUrl = "https%3A%2F%2Fexample.com%2Fsearch%3Fquery%3DJavaScript%20%26%E3%82%A8%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%97";
let decodedUrl = decodeURIComponent(encodedUrl);
console.log(decodedUrl); // "https://example.com/search?query=JavaScript &エスケープ"

独自のアンエスケープ関数の作成

HTMLエスケープされた文字列をデコードするために、独自のアンエスケープ関数を作成することも可能です。以下の例では、一般的なHTMLエスケープ文字をデコードする関数を示します。

function unescapeHtml(str) {
    return str.replace(/&amp;/g, "&")
              .replace(/&lt;/g, "<")
              .replace(/&gt;/g, ">")
              .replace(/&quot;/g, "\"")
              .replace(/&#039;/g, "'");
}

let escapedHtml = "&lt;div&gt;Hello &amp; welcome!&lt;/div&gt;";
let unescapedHtml = unescapeHtml(escapedHtml);
console.log(unescapedHtml); // "<div>Hello & welcome!</div>"

テンプレートリテラルの利用

テンプレートリテラルを使うことで、文字列内の特殊文字をそのまま使用することができ、エスケープやアンエスケープの必要性が低減されます。特に、バッククォート“を使ったテンプレートリテラルは、多行文字列や埋め込み式に便利です。

let name = "John";
let message = `Hello, ${name}!
Welcome to the "JavaScript World".`;
console.log(message);

これらの方法を使って、JavaScriptでのエスケープされた文字列を効果的にアンエスケープすることができます。次のセクションでは、よく使われるエスケープシーケンスについて詳しく説明します。

よく使われるエスケープシーケンス

エスケープシーケンスは、文字列内で特殊な意味を持つ文字や制御文字を適切に表現するために使用されます。JavaScriptでは、さまざまなエスケープシーケンスが提供されており、これを利用することで文字列を正確に操作できます。

代表的なエスケープシーケンス

以下に、JavaScriptでよく使われるエスケープシーケンスを示します：

エスケープシーケンス説明使用例
\'シングルクォート\' -> '
\"ダブルクォート\" -> "
\\バックスラッシュ\\ -> \
\n改行\n -> 改行
\rキャリッジリターン\r -> キャリッジリターン
\tタブ\t -> タブ
\bバックスペース\b -> バックスペース
\fフォームフィード\f -> フォームフィード
\uXXXXUnicode文字\u0041 -> A

使用例

以下に、上記のエスケープシーケンスを使用した具体的な例を示します：

let singleQuote = 'It\'s a single quote';
let doubleQuote = "She said, \"Hello!\"";
let backslash = "This is a backslash: \\";
let newLine = "First line\nSecond line";
let tab = "Column1\tColumn2\tColumn3";

console.log(singleQuote);  // It's a single quote
console.log(doubleQuote);  // She said, "Hello!"
console.log(backslash);    // This is a backslash: \
console.log(newLine);      // First line
                           // Second line
console.log(tab);          // Column1  Column2  Column3

Unicodeエスケープシーケンス

Unicodeエスケープシーケンスを使用すると、特定のUnicode文字を表現できます。これは、国際化対応が必要な場合に非常に便利です。

let unicodeChar = "\u3042"; // これは日本語の「あ」です
console.log(unicodeChar);   // あ

これらのエスケープシーケンスを適切に使用することで、文字列の正確な表現と処理が可能となります。次のセクションでは、HTMLエスケープとJavaScriptの関係について詳しく見ていきます。

HTMLエスケープとJavaScript

HTMLエスケープは、HTML文書内で特殊文字が誤って解釈されるのを防ぐための重要な技術です。JavaScriptを使用する場合でも、ユーザー入力や外部データをHTMLに埋め込む際には、エスケープ処理が不可欠です。

HTMLエスケープの目的

HTMLエスケープの主な目的は、HTML特殊文字（例：<, >, &, “）がブラウザによってHTMLタグやエンティティとして誤解されるのを防ぐことです。これにより、クロスサイトスクリプティング（XSS）などのセキュリティリスクを低減できます。

エスケープの例

以下の表に、一般的なHTMLエスケープシーケンスを示します：

文字エスケープシーケンス説明
<&lt;小なり記号
>&gt;大なり記号
&&amp;アンパサンド
"&quot;ダブルクォート
'&#039;シングルクォート

JavaScriptによるHTMLエスケープ

JavaScriptでHTMLエスケープを行うためには、特定の文字をエスケープシーケンスに置き換える関数を使用します。以下は、その一例です：

function escapeHtml(str) {
    return str.replace(/&/g, "&amp;")
              .replace(/</g, "&lt;")
              .replace(/>/g, "&gt;")
              .replace(/"/g, "&quot;")
              .replace(/'/g, "&#039;");
}

let unsafeString = "<script>alert('Hello!');</script>";
let safeString = escapeHtml(unsafeString);
console.log(safeString); // "&lt;script&gt;alert('Hello!');&lt;/script&gt;"

HTMLエスケープの重要性

HTMLエスケープは、特にユーザー生成コンテンツを扱う際に重要です。これを怠ると、悪意のあるユーザーがスクリプトを挿入し、他のユーザーのブラウザで実行される危険があります。この種の攻撃はXSSとして知られており、セキュリティ上の重大な脅威となります。

アンエスケープの必要性

逆に、エスケープされたHTMLを表示する場合にはアンエスケープが必要です。以下に、その例を示します：

function unescapeHtml(str) {
    return str.replace(/&amp;/g, "&")
              .replace(/&lt;/g, "<")
              .replace(/&gt;/g, ">")
              .replace(/&quot;/g, "\"")
              .replace(/&#039;/g, "'");
}

let escapedHtml = "&lt;div&gt;Hello &amp; welcome!&lt;/div&gt;";
let unescapedHtml = unescapeHtml(escapedHtml);
console.log(unescapedHtml); // "<div>Hello & welcome!</div>"

HTMLエスケープとアンエスケープを適切に行うことで、ユーザーの入力や外部データを安全に扱うことができます。次のセクションでは、エスケープがセキュリティに与える影響について詳しく説明します。

セキュリティとエスケープ

エスケープは、Webアプリケーションのセキュリティを強化するための重要な手段です。特に、クロスサイトスクリプティング（XSS）攻撃やSQLインジェクションなどの一般的な攻撃からシステムを守る役割を果たします。

クロスサイトスクリプティング（XSS）

XSS攻撃は、悪意のあるユーザーがWebページにスクリプトを挿入し、他のユーザーのブラウザで実行される攻撃です。エスケープ処理を怠ると、攻撃者がJavaScriptを挿入してユーザーのデータを盗む、セッションをハイジャックする、またはサイトの外観を変更することが可能になります。

XSS攻撃の例

次の例は、エスケープ処理を行わないことでXSS攻撃が可能になるシナリオです：

<!DOCTYPE html>
<html>
<body>
    <div id="user-input"></div>

    <script>
        let userInput = "<script>alert('XSS');</script>";
        document.getElementById("user-input").innerHTML = userInput;
    </script>
</body>
</html>

上記のコードでは、userInput変数がエスケープされずにHTMLに挿入されるため、スクリプトが実行されてしまいます。

SQLインジェクション

SQLインジェクションは、ユーザー入力を介して悪意のあるSQLコードを実行させる攻撃です。これにより、データベースのデータが漏洩したり、破壊されたりする可能性があります。エスケープ処理は、入力されたデータがSQLコードとして解釈されるのを防ぐために重要です。

SQLインジェクションの例

次の例は、SQLインジェクション攻撃が成功する可能性のあるシナリオです：

let userInput = "'; DROP TABLE users; --";
let query = "SELECT * FROM users WHERE name = '" + userInput + "'";
console.log(query); // SELECT * FROM users WHERE name = ''; DROP TABLE users; --
// 実行すると、usersテーブルが削除されてしまう

このコードでは、ユーザー入力がエスケープされずにSQLクエリに組み込まれるため、悪意のあるSQLコードが実行されます。

エスケープとアンエスケープのベストプラクティス

  • 常にエスケープ：ユーザーからの入力や外部データをHTML、SQL、JavaScriptなどに組み込む際は、必ず適切なエスケープ処理を行う。
  • アンエスケープを慎重に：アンエスケープが必要な場合、データのソースと使用目的を確認し、信頼できるデータのみをアンエスケープする。
  • ライブラリの活用：エスケープとアンエスケープの処理には、信頼性の高いライブラリやフレームワークを使用する。例えば、HTMLエスケープにはDOMPurify、SQLエスケープにはプリペアドステートメントを使用する。

セキュリティツールとライブラリ

以下のツールやライブラリを利用することで、エスケープとアンエスケープを効果的に管理し、セキュリティを向上させることができます：

  • DOMPurify：HTMLを安全にクリーンアップするためのライブラリ。
  • OWASP Java Encoder：Java向けのセキュアなエスケープライブラリ。
  • Express.jsのexpress-validator：Node.jsアプリケーションでの入力検証とサニタイゼーション。

これらのエスケープ手法とベストプラクティスを活用することで、Webアプリケーションのセキュリティを大幅に向上させることができます。次のセクションでは、エスケープとアンエスケープの実践例について具体的に見ていきます。

エスケープとアンエスケープの実践例

ここでは、JavaScriptを使った具体的なエスケープとアンエスケープの実践例をいくつか紹介します。これらの例を通じて、エスケープとアンエスケープの技術を実際にどのように適用するかを理解しましょう。

HTMLエスケープの実践例

ユーザーからの入力を安全に表示するためのHTMLエスケープの例です。例えば、ブログのコメント欄において、ユーザーが入力したコメントをエスケープして表示します。

<!DOCTYPE html>
<html>
<head>
    <title>Comment Section</title>
</head>
<body>
    <div id="comments"></div>
    <script>
        function escapeHtml(str) {
            return str.replace(/&/g, "&amp;")
                      .replace(/</g, "&lt;")
                      .replace(/>/g, "&gt;")
                      .replace(/"/g, "&quot;")
                      .replace(/'/g, "&#039;");
        }

        let userComment = "<script>alert('XSS');</script> Nice post!";
        let safeComment = escapeHtml(userComment);
        document.getElementById("comments").innerHTML = `<p>${safeComment}</p>`;
    </script>
</body>
</html>

この例では、escapeHtml関数を使用してユーザーのコメントをエスケープし、安全にHTMLに挿入しています。

URLエンコードとデコードの実践例

URLクエリパラメータを安全にエンコードおよびデコードする例です。ユーザーの入力をURLパラメータとして送信し、受け取る際にデコードします。

<!DOCTYPE html>
<html>
<head>
    <title>Search Page</title>
</head>
<body>
    <div id="result"></div>
    <script>
        function encodeQueryParam(param) {
            return encodeURIComponent(param);
        }

        function decodeQueryParam(param) {
            return decodeURIComponent(param);
        }

        let searchQuery = "JavaScript & エスケープ";
        let encodedQuery = encodeQueryParam(searchQuery);
        let url = `https://example.com/search?query=${encodedQuery}`;
        console.log(url); // "https://example.com/search?query=JavaScript%20%26%20%E3%82%A8%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%97"

        let receivedQuery = "JavaScript%20%26%20%E3%82%A8%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%97";
        let decodedQuery = decodeQueryParam(receivedQuery);
        document.getElementById("result").innerText = `Search query: ${decodedQuery}`;
    </script>
</body>
</html>

この例では、encodeURIComponentとdecodeURIComponentを使用して、URLパラメータを安全にエンコードおよびデコードしています。

SQLエスケープの実践例

SQLクエリにおいて、ユーザー入力を安全に扱うためのエスケープの例です。ここでは、Node.jsとMySQLを使用した例を示します。

const mysql = require('mysql');
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'test'
});

connection.connect();

let userInput = "admin' OR '1'='1";
let query = 'SELECT * FROM users WHERE username = ' + mysql.escape(userInput);

connection.query(query, (error, results, fields) => {
    if (error) throw error;
    console.log(results);
});

connection.end();

この例では、mysql.escapeを使用してユーザー入力をエスケープし、SQLインジェクションを防いでいます。

これらの実践例を通じて、JavaScriptでのエスケープとアンエスケープの具体的な方法とその重要性を理解することができました。次のセクションでは、エスケープとアンエスケープのトラブルシューティングについて詳しく説明します。

エスケープとアンエスケープのトラブルシューティング

エスケープとアンエスケープを適切に行うためには、いくつかのよくある問題やその解決策を知っておくことが重要です。ここでは、一般的な問題とそのトラブルシューティング方法を紹介します。

問題1: エスケープの不足によるセキュリティリスク

エスケープ処理を怠ると、XSSやSQLインジェクションのようなセキュリティリスクが生じます。特に、ユーザー入力を直接的にHTMLやSQLに挿入する場合、適切なエスケープが不可欠です。

解決策

  • HTMLエスケープ：ユーザー入力をHTMLに挿入する際は、必ずエスケープ処理を行う。
  • SQLエスケープ：SQLクエリにユーザー入力を含める際は、プレースホルダやエスケープ関数を使用する。
// HTMLエスケープ例
function escapeHtml(str) {
    return str.replace(/&/g, "&amp;")
              .replace(/</g, "&lt;")
              .replace(/>/g, "&gt;")
              .replace(/"/g, "&quot;")
              .replace(/'/g, "&#039;");
}

// SQLエスケープ例（Node.js + MySQL）
let userInput = "admin' OR '1'='1";
let query = 'SELECT * FROM users WHERE username = ' + mysql.escape(userInput);

問題2: 二重エスケープ

エスケープ処理を二重に行うと、意図しない文字列が生成されてしまいます。例えば、&が&amp;とエスケープされた後に再度エスケープされると、&amp;amp;となります。

解決策

  • 適切なエスケープ処理の管理：エスケープを必要とする処理を明確にし、重複してエスケープしないようにする。
  • エスケープ済みフラグの使用：データが既にエスケープされている場合、それを示すフラグを使用して二重エスケープを防ぐ。
let userInput = "<script>alert('Hello');</script>";
let firstEscape = escapeHtml(userInput); // &lt;script&gt;alert(&#039;Hello&#039;);&lt;/script&gt;
let secondEscape = escapeHtml(firstEscape); // &amp;lt;script&amp;gt;alert(&amp;#039;Hello&amp;#039;);&amp;lt;/script&amp;gt;
// Avoid secondEscape by checking if already escaped

問題3: アンエスケープの失敗

アンエスケープが正しく行われないと、表示される文字列が意図したものと異なる場合があります。特に、エスケープシーケンスが複数重なる場合に問題が発生しやすいです。

解決策

  • 正しいアンエスケープ処理の実装：エスケープされた文字列を正確に元に戻すためのアンエスケープ関数を使用する。
  • テストと検証：エスケープとアンエスケープの処理を十分にテストし、正確に機能することを確認する。
function unescapeHtml(str) {
    return str.replace(/&amp;/g, "&")
              .replace(/&lt;/g, "<")
              .replace(/&gt;/g, ">")
              .replace(/&quot;/g, "\"")
              .replace(/&#039;/g, "'");
}

let escapedHtml = "&lt;div&gt;Hello &amp; welcome!&lt;/div&gt;";
let unescapedHtml = unescapeHtml(escapedHtml);
console.log(unescapedHtml); // <div>Hello & welcome!</div>

問題4: パフォーマンスの低下

大規模なデータや頻繁なエスケープ/アンエスケープ処理を行うと、パフォーマンスが低下する可能性があります。

解決策

  • 最適化された関数の使用：効率的なエスケープ/アンエスケープ関数を使用する。
  • バッチ処理の実装：大量のデータを一括で処理するバッチ処理を実装し、パフォーマンスを向上させる。
// Example of optimized escape function
function optimizedEscapeHtml(str) {
    const map = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    };
    return str.replace(/[&<>"']/g, function(m) { return map[m]; });
}

これらのトラブルシューティング方法を活用することで、エスケープとアンエスケープの問題を効果的に解決し、セキュアで高性能なアプリケーションを構築することができます。次のセクションでは、応用と演習問題を通じて理解をさらに深めます。

応用と演習問題

ここでは、エスケープとアンエスケープの理解を深めるために、実践的な応用例と演習問題を提供します。これにより、学んだ内容を実際のプロジェクトに応用する力を養います。

応用例1: フォーム入力の安全な処理

ユーザーからのフォーム入力を受け取り、それを安全に処理して表示する例を示します。特に、XSS攻撃を防ぐためのエスケープ処理を強調します。

<!DOCTYPE html>
<html>
<head>
    <title>Safe Form Input</title>
</head>
<body>
    <form id="userForm">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username">
        <button type="button" onclick="submitForm()">Submit</button>
    </form>
    <div id="result"></div>

    <script>
        function escapeHtml(str) {
            return str.replace(/&/g, "&amp;")
                      .replace(/</g, "&lt;")
                      .replace(/>/g, "&gt;")
                      .replace(/"/g, "&quot;")
                      .replace(/'/g, "&#039;");
        }

        function submitForm() {
            let userInput = document.getElementById("username").value;
            let safeInput = escapeHtml(userInput);
            document.getElementById("result").innerHTML = `Hello, ${safeInput}!`;
        }
    </script>
</body>
</html>

この例では、ユーザーが入力したデータをエスケープし、安全に表示しています。

応用例2: 動的に生成されるHTMLのエスケープ

サーバーから取得したデータを動的にHTMLに挿入する際のエスケープ処理の例です。

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Content</title>
</head>
<body>
    <div id="content"></div>
    <script>
        function escapeHtml(str) {
            return str.replace(/&/g, "&amp;")
                      .replace(/</g, "&lt;")
                      .replace(/>/g, "&gt;")
                      .replace(/"/g, "&quot;")
                      .replace(/'/g, "&#039;");
        }

        async function fetchData() {
            let response = await fetch('https://api.example.com/data');
            let data = await response.json();
            let safeContent = escapeHtml(data.content);
            document.getElementById("content").innerHTML = safeContent;
        }

        fetchData();
    </script>
</body>
</html>

この例では、APIから取得したデータをエスケープしてからHTMLに挿入しています。

演習問題1: エスケープ関数の実装

次の要件を満たすエスケープ関数を実装してください：

  • & を &amp;
  • < を &lt;
  • > を &gt;
  • " を &quot;
  • ' を &#039;
function escapeHtml(str) {
    // 実装をここに記述
}

// テストコード
console.log(escapeHtml("<script>alert('test');</script>")); // &lt;script&gt;alert(&#039;test&#039;);&lt;/script&gt;

演習問題2: SQLエスケープの実装

次の要件を満たすSQLエスケープ関数を実装してください：

  • シングルクォート ' を '' に変換する
function escapeSql(str) {
    // 実装をここに記述
}

// テストコード
console.log(escapeSql("O'Reilly")); // O''Reilly

演習問題3: URLエンコードとデコードの実装

次の要件を満たすURLエンコードとデコード関数を実装してください：

function encodeQueryParam(param) {
    // 実装をここに記述
}

function decodeQueryParam(param) {
    // 実装をここに記述
}

// テストコード
let encoded = encodeQueryParam("JavaScript & エスケープ");
console.log(encoded); // "JavaScript%20%26%20%E3%82%A8%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%97"

let decoded = decodeQueryParam(encoded);
console.log(decoded); // "JavaScript & エスケープ"

これらの演習を通じて、エスケープとアンエスケープの技術を実践的に学ぶことができます。最後に、この記事のまとめを行います。

まとめ

本記事では、JavaScriptにおける文字列のエスケープとアンエスケープについて詳しく解説しました。エスケープとは、文字列内の特殊文字を別の表現に置き換えることで、誤解を防ぎ、安全にデータを処理するための技術です。アンエスケープは、その逆の操作で、エスケープされた文字列を元に戻すことを指します。

エスケープとアンエスケープは、特にWeb開発において重要な役割を果たし、XSSやSQLインジェクションといったセキュリティリスクを軽減するために必要不可欠です。この記事では、HTML、URL、SQLにおけるエスケープとアンエスケープの具体的な方法、実践例、よく使われるエスケープシーケンス、そしてトラブルシューティング方法について詳しく説明しました。

また、実践的な応用例と演習問題を通じて、エスケープとアンエスケープの技術を実際のプロジェクトにどのように適用するかを学びました。これらの知識とスキルを活用することで、安全で効率的なJavaScriptアプリケーションを構築することができます。

JavaScript
文字列操作 JavaScript エスケープ アンエスケープ

コメント

コメントする

目次