JavaScriptのエスケープ関数で特殊文字をエンコードする5つの方法

JavaScriptのエスケープ関数で特殊文字をエンコードする方法JS
この記事は約20分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●JavaScriptのエスケープ関数とは

JavaScriptを使った開発をしていると、特殊文字の扱いに頭を悩ませた経験があるのではないでしょうか。

例えば、ユーザーからの入力データをそのままHTMLに出力すると、予期せぬ動作を引き起こす可能性があります。

こういった問題を防ぐために、エスケープ関数の出番となります。

○エスケープ関数の役割

エスケープ関数は、特殊な意味を持つ文字を別の表現に置き換える役割を果たします。

具体的には、次のようなケースで使用されます。

  • HTMLタグやJavaScriptコードが含まれるユーザー入力をそのままWebページに表示する際に、意図しない動作を防ぐ
  • URLパラメータとして特殊文字を含む値を渡す際に、正しくエンコードする
  • JSONデータ内の特殊文字をエスケープして、正しい形式で出力する

要するに、エスケープ関数を適切に使うことで、アプリケーションのセキュリティと安定性を高められるわけです。

○エスケープが必要な文字一覧

JavaScriptでは、次の文字がエスケープの対象となります。

  • ダブルクオート（”）
  • シングルクオート（’）
  • バックスラッシュ（\）
  • 改行（\n）
  • タブ（\t）
  • キャリッジリターン（\r）

このほかにも、HTMLのタグに使われる <、>、& なども、エスケープが必要な特殊文字として知られています。

これらの文字をエスケープせずに使うと、HTMLの構造が崩れたり、JavaScriptコードが意図せず実行されたりする恐れがあります。

○サンプルコード1：HTMLのエスケープ

ではここで、実際にHTMLの特殊文字をエスケープする例を見てみましょう。

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

const inputText = '<script>alert("Hello!");</script>';
const escapedText = escapeHtml(inputText);
console.log(escapedText);

実行結果

&lt;script&gt;alert(&quot;Hello!&quot;);&lt;/script&gt;

このコードでは、正規表現を使ってHTMLの特殊文字を該当するエスケープシーケンスに置換しています。

結果として、元の文字列に含まれていた <script> タグが無害化され、意図しないJavaScriptコードの実行を防げました。

●主要なエスケープ関数の使い方

前項ではHTMLのエスケープ処理について触れましたが、JavaScriptにはそれ以外にも様々なエスケープ関数が用意されています。

ここからは、代表的なエスケープ関数を詳しく見ていきましょう。

○escape関数（非推奨）

かつてのJavaScriptでは、escape関数がよく使われていました。

この関数は引数の文字列を、ISO-8859-1文字セットの範囲内でエスケープシーケンスに変換します。

const originalText = 'Hello, world! 日本語';
const escapedText = escape(originalText);
console.log(escapedText);  // "Hello%2C%20world%21%20%u65E5%u672C%u8A9E"

escape関数の特徴は、ASCII文字の一部（@、*、_、+、-、.、/）をエスケープしないことです。

また、マルチバイト文字（日本語など）は%uXXXX形式にエンコードされます。

ただし、この関数はもはや非推奨とされています。

理由は、エンコーディングの一貫性が欠けており、UTF-8環境では使いにくいためです。

代わりに、次に紹介するencodeURI関数やencodeURIComponent関数の使用が推奨されています。

○encodeURI関数

encodeURI関数は、URIとして使える文字はそのままに、特殊文字のみをエスケープします。

具体的には、;/?:@&=+$,#のような予約文字はエンコードされません。

const originalURL = 'https://example.com/search?q=Hello, world!';
const encodedURL = encodeURI(originalURL);
console.log(encodedURL);  // "https://example.com/search?q=Hello,%20world!"

結果を見ると分かる通り、URLに必要な :、/、?、= などの文字はエンコードされずに残っています。

一方で、スペースは %20 に置き換えられました。

つまり、encodeURI関数はURL全体をエンコードするのに適しているわけです。

○encodeURIComponent関数

encodeURIComponent関数は、encodeURIよりも厳密にエンコードを行います。

RFC 3986で定義された予約文字（;/?:@&=+$,#）もエスケープ対象となります。

const originalParam = 'Hello, world!';
const encodedParam = encodeURIComponent(originalParam);
console.log(encodedParam);  // "Hello%2C%20world%21"

この関数は、URLのパラメータ部分だけをエンコードしたい場合に最適です。

encodeURIComponent関数でエンコードしたパラメータを、encodeURI関数でエンコードしたURL本体と結合することで、安全なURL文字列を作れます。

○サンプルコード2：URLのエスケープ

これらの関数の違いを踏まえて、適切なエスケープ処理を行うサンプルコードを書いてみましょう。

function buildURL(baseURL, params) {
  let paramString = '';
  for (let key in params) {
    if (paramString !== '') paramString += '&';
    paramString += encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
  }
  return encodeURI(baseURL) + '?' + paramString;
}

const baseURL = 'https://example.com/search';
const params = {
  q: 'Hello, world!',
  category: 'greetings'
};
const url = buildURL(baseURL, params);
console.log(url);

実行結果

"https://example.com/search?q=Hello%2C%20world!&category=greetings"

ここでのポイントは、baseURLをencodeURI関数でエンコードし、パラメータのキーと値をencodeURIComponent関数でエンコードしている点です。

こうすることで、URLの構造を壊さずに特殊文字を適切にエスケープできます。

○サンプルコード3：JSONのエスケープ

続いて、JSONデータをエスケープする例も見てみましょう。

JSONの仕様では、文字列中の “、\、制御文字などを \（バックスラッシュ）でエスケープする必要があります。

function escapeJSON(str) {
  return str.replace(/[\\"\u0000-\u001F\u2028\u2029]/g, function (m) {
    switch (m) {
      case '\\': return '\\\\';
      case '"': return '\\"';
      case '\b': return '\\b';
      case '\f': return '\\f';
      case '\n': return '\\n';
      case '\r': return '\\r';
      case '\t': return '\\t';
      default:
        const code = m.charCodeAt(0).toString(16);
        return '\\u' + '0000'.substring(code.length) + code;
    }
  });
}

const originalJSON = '{"message":"Hello, world! \\ \" \n"}';
const escapedJSON = escapeJSON(originalJSON);
console.log(escapedJSON);  // "{\"message\":\"Hello, world! \\\\ \\\" \\n\"}"

正規表現を駆使したこのコードは、JSONで特別な意味を持つ文字を適切にエスケープしています。

これでJSON.parse関数でパースできる安全なJSON文字列が得られます。

エスケープ処理は、自前で実装するとなかなか大変です。

しかしながら、一般的なケースであれば、JavaScriptの標準関数や定番ライブラリを使えば効率よく対応できるでしょう。

重要なのは、データの形式に応じて適切な関数を選ぶことです。

次項からは、エスケープ処理を行う際の注意点や、XSS対策への応用などを見ていきます。

単なる文字列変換としてだけでなく、エスケープ処理がWebセキュリティに果たす役割も理解を深めていきましょう。

●エスケープ処理の注意点

エスケープ処理を行う際には、いくつか注意すべきポイントがあります。

ここでは、文字列リテラルでのエスケープと、正規表現でのエスケープについて詳しく見ていきましょう。

○文字列リテラルでのエスケープ

JavaScriptの文字列リテラルでは、特殊な意味を持つ文字をバックスラッシュ（\）でエスケープする必要があります。

具体的には、次のような文字がエスケープ対象となります。

  • ダブルクオート（”）
  • シングルクオート（’）
  • バックスラッシュ（\）
  • 改行（\n）
  • タブ（\t）
  • キャリッジリターン（\r）

例えば、次のようなコードを考えてみましょう。

const message = "He said, "Hello!"";
console.log(message);

このコードは、ダブルクオート（”）がエスケープされていないため、シンタックスエラーになります。正しくは、次のようにエスケープ処理を行う必要があります。

const message = "He said, \"Hello!\"";
console.log(message);  // "He said, "Hello!""

または、テンプレート文字列（バッククォート）を使えば、エスケープ処理を簡略化できます。

const message = `He said, "Hello!"`;
console.log(message);  // "He said, "Hello!""

文字列リテラルでのエスケープ処理は、一見面倒に感じるかもしれません。

しかし、これを怠ると、予期せぬエラーやセキュリティ上の問題につながる恐れがあります。

コーディングの際は、常にエスケープ処理を意識するようにしましょう。

○正規表現でのエスケープ

正規表現では、特別な意味を持つメタ文字をバックスラッシュ（\）でエスケープする必要があります。

代表的なメタ文字には、次のようなものがあります。

  • ドット（.）
  • アスタリスク（*）
  • プラス（+）
  • ハット（^）
  • ドル（$）
  • 縦棒（|）
  • 疑問符（?）
  • 括弧（( )）
  • 大括弧（[ ]）
  • 中括弧（{ }）

これらのメタ文字をリテラルとして扱いたい場合は、バックスラッシュでエスケープします。

○サンプルコード4：正規表現のエスケープ

例えば、ユーザーが入力した文字列を正規表現で検索する場合を考えてみましょう。

function searchText(text, pattern) {
  const escapedPattern = pattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  const regex = new RegExp(escapedPattern, 'g');
  return text.match(regex);
}

const inputText = 'Hello, world! (JavaScript)';
const searchPattern = '(JavaScript)';
const matches = searchText(inputText, searchPattern);
console.log(matches);  // ["(JavaScript)"]

ここでは、ユーザー入力の検索パターンに含まれる可能性のあるメタ文字を、正規表現を使ってエスケープ処理しています。

これで、意図しない正規表現パターンになることを防げます。

●XSS対策とエスケープ処理

JavaScriptを使ったWebアプリケーション開発において、セキュリティは非常に重要な要素です。

中でもXSS（クロスサイトスクリプティング）は、最も注意すべき脆弱性の1つとされています。

ここでは、XSSの脅威と、それを防ぐためのエスケープ処理について詳しく見ていきましょう。

○XSSの脅威とは

XSSとは、攻撃者が悪意のあるスクリプトをWebページに注入し、ユーザーの権限で実行させる攻撃手法です。

具体的には、次のような被害が想定されます。

  • ユーザーの個人情報（クッキー、セッションIDなど）を盗み取られる
  • 偽のログインフォームを表示させ、ユーザーのパスワードを詐取される
  • ユーザーの権限で不正な操作（送金、商品購入など）を行われる

XSSは、Webアプリケーションの信頼性を大きく損なう脆弱性です。

エンジニアは常にXSSを意識し、適切な対策を講じる必要があります。

○サンプルコード5：ユーザー入力のサニタイズ

XSS対策の基本は、ユーザー入力をエスケープ処理することです。

つまり、HTMLタグやJavaScriptコードとして解釈されるような文字をエンコードし、無害化するわけです。

例えば、掲示板のような投稿機能を持つWebアプリケーションを考えてみましょう。

function postMessage(message) {
  // メッセージをエスケープ処理する
  const escapedMessage = escapeHtml(message);

  // エスケープ処理したメッセージをHTMLに挿入する
  const messageElement = document.createElement('p');
  messageElement.innerText = escapedMessage;
  document.getElementById('messages').appendChild(messageElement);
}

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

// ユーザーの投稿を処理する
const userInput = '<script>alert("XSS Attack!");</script>';
postMessage(userInput);

ここでは、ユーザーの投稿内容をescapeHtml関数でエスケープ処理してから、HTMLに挿入しています。

これにより、たとえ投稿内容にスクリプトタグが含まれていても、それが実行されることはありません。

実行結果

<p>&lt;script&gt;alert("XSS Attack!");&lt;/script&gt;</p>

このように、エスケープ処理を施すことで、XSSのリスクを大幅に減らすことができるのです。

○専用ライブラリの活用

エスケープ処理は、一見シンプルな作業ですが、実際には様々なパターンを考慮する必要があります。

そのため、自前でエスケープ処理を実装するのは、バグを生み出すリスクがあります。

XSS対策に限らず、エスケープ処理を行う際は、信頼できるライブラリを活用するのが賢明です。

例えば、Node.jsの場合は「he」、PHPなら「htmlspecialchars」といった具合です。

このライブラリは、様々なエッジケースに対応した、堅牢なエスケープ処理を提供してくれます。

セキュリティは、Webアプリケーション開発において欠かせない要素です。

XSSをはじめとする脆弱性を防ぐために、エスケープ処理を適切に行うことが求められます。

単なる文字列変換としてだけでなく、エスケープ処理がセキュリティに果たす役割を理解することが、エンジニアとしてのスキルアップにつながるでしょう。

●エスケープ関数の応用例

ここまで、JavaScriptにおけるエスケープ処理の基本的な使い方や注意点を見てきました。

エスケープ関数は、HTMLやURLなどの文字列を適切にエンコードするために欠かせない存在です。

しかし、エスケープ処理の出番はそれだけではありません。私たちエンジニアは、日常的に様々なデータを扱います。

そのデータを安全に処理するためにも、エスケープ関数の活用が求められるのです。

○サンプルコード6：CSVデータのエスケープ

例えば、ユーザー情報をCSV形式でエクスポートする機能を考えてみましょう。

CSVファイルでは、カンマ（,）がデータの区切り文字として使われます。

そのため、データ内にカンマが含まれていると、意図しない区切りが発生してしまいます。

function exportCSV(data) {
  let csv = '';
  for (let i = 0; i < data.length; i++) {
    let row = data[i];
    for (let j = 0; j < row.length; j++) {
      let cell = row[j];
      // セルの内容をエスケープ処理する
      cell = cell.replace(/"/g, '""');
      if (cell.includes(',') || cell.includes('"') || cell.includes('\n')) {
        cell = '"' + cell + '"';
      }
      csv += (j > 0 ? ',' : '') + cell;
    }
    csv += '\n';
  }
  return csv;
}

const data = [
  ['John', 'Doe', 'john@example.com'],
  ['Jane', 'Doe', 'jane@example.com, jane@example.org'],
  ['Bob', 'Smith', 'bob@example.com']
];
const csvData = exportCSV(data);
console.log(csvData);

実行結果

John,Doe,john@example.com
Jane,Doe,"jane@example.com, jane@example.org"
Bob,Smith,bob@example.com

ここでのポイントは、データ内のカンマと改行、ダブルクォートをエスケープ処理している点です。

セルの内容に区切り文字が含まれている場合は、セル全体をダブルクォートで囲むことで、それが1つのデータであることを明示しています。

このように、CSVデータを扱う際は、適切なエスケープ処理が不可欠です。

エスケープを怠ると、データの整合性が損なわれ、予期せぬ動作につながる恐れがあります。

○サンプルコード7：コマンドライン引数のエスケープ

Node.jsでシェルコマンドを実行する場合も、エスケープ処理が重要です。

ユーザーから受け取ったコマンドライン引数をそのまま使うと、シェルインジェクションの脆弱性につながります。

const child_process = require('child_process');

function executeCommand(command, args) {
  // コマンドライン引数をエスケープ処理する
  const escapedArgs = args.map(arg => "'" + arg.replace(/'/g, "'\\''") + "'");
  const shellCommand = command + ' ' + escapedArgs.join(' ');

  child_process.exec(shellCommand, (error, stdout, stderr) => {
    if (error) {
      console.error(`exec error: ${error}`);
      return;
    }
    console.log(`stdout: ${stdout}`);
    console.error(`stderr: ${stderr}`);
  });
}

const userInput = "Hello 'World'";
executeCommand('echo', [userInput]);

実行結果

stdout: Hello 'World'

stderr:

ここでは、シングルクォート（’）を使ってコマンドライン引数を囲み、その中のシングルクォートはエスケープ処理しています。

これで、たとえ引数に空白や特殊文字が含まれていても、それらが別の引数として解釈されることを防げます。

シェルコマンドを実行する際は、常にユーザー入力をエスケープ処理するクセをつけましょう。

エスケープを怠ると、悪意のあるユーザーにシステムを乗っ取られる可能性があります。

○サンプルコード8：ログ出力でのエスケープ

アプリケーションのログ出力においても、エスケープ処理が役立ちます。

ログにユーザー入力をそのまま出力すると、ログの解析を困難にしたり、ログインジェクション攻撃の危険性があったりします。

function logMessage(message) {
  // メッセージをエスケープ処理する
  const escapedMessage = message.replace(/\n/g, '\\n').replace(/\r/g, '\\r');
  console.log(`[INFO] ${escapedMessage}`);
}

const userInput = "Hello\nWorld\r\n!";
logMessage(userInput);

実行結果

[INFO] Hello\nWorld\r\n!

ここでは、メッセージ内の改行文字（\nと\r）をエスケープシーケンスに置き換えています。

これにより、改行を含むユーザー入力がログの1行として出力されるようになります。

ログ出力では、タブ文字やダブルクォートなども同様にエスケープ処理するとよいでしょう。

ログの一貫性と安全性を保つために、エスケープ処理は欠かせません

まとめ

JavaScriptのエスケープ関数について、詳しく見てきましたが、いかがでしたでしょうか。

エスケープ処理は、データを安全に扱うために欠かせない技術です。

私たちエンジニアにとって、エスケープ処理をマスターすることは、セキュアで効率的なコーディングのための第一歩だと思います。

HTMLやURLのエスケープだけでなく、CSVデータやシェルコマンド、ログ出力など、様々なシーンで活躍するエスケープ処理の重要性を実感していただけたのではないでしょうか。

JavaScriptのエスケープ関数について理解を深められたことで、皆さんのコーディングスキルがさらに磨かれることを願っています。