JavaScriptのURLエンコード関数の比較：encodeURI()とencodeURIComponent()関数

JavaScriptのURLエンコード関数

JavaScriptではURLをエンコードするための関数としてencodeURI()とencodeURIComponent()の2つがあります。
ここでは、これら2つの関数の使用目的と違いについて比較していきます。

URLエンコード関数の比較

JavaScriptで使用するURLエンコード関数encodeURI()とencodeURIComponent()の2つを表で比較してみましょう。

JavaScriptで使用されるURLエンコード関数であるencodeURI()関数とencodeURIComponent()関数の2つを表で比較します。
特徴	`encodeURI()`	`encodeURIComponent()`
使用目的	一部の特殊文字を除いてURIをエンコード	URIコンポーネントをエンコード
使用対象	URI全体をエンコードする際に使用	クエリ文字列内の各値をエンコードする際に使用
エンコードされない文字	A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #	A-Z a-z 0-9 - _ . ! ~ * ' ( )
XMLHttpRequestリクエストでの使用	不適切（特殊文字が正しく処理されない）	適切（特殊文字がエンコードされ正しく処理される）

encodeURI()関数とencodeURIComponent()関数の違いをコード例で確認してみましょう。

JavaScript

const set1 = ";,/?:@&=+$"; // 予約された文字（Reserved Characters）
const set2 = "-_.!~*'()"; // 予約されていない文字（Unescaped Characters）
const set3 = "#"; // Number Sign
const set4 = "ABC abc 123"; // アルファベットと数字 + 空白

console.log(encodeURI(set1)); // ;,/?:@&=+$
console.log(encodeURI(set2)); // -_.!~*'()
console.log(encodeURI(set3)); // #
console.log(encodeURI(set4)); // ABC%20abc%20123（空白が%20にエンコードされる）

console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
console.log(encodeURIComponent(set2)); // -_.!~*'()
console.log(encodeURIComponent(set3)); // %23
console.log(encodeURIComponent(set4)); // ABC%20abc%20123（空白が%20にエンコードされる）

上記の結果から分かるように

encodeURI()関数はURIの一部と見なされる文字を除き、一部の特殊文字をエンコードしません。空白は%20にエンコードされ、set1とset2の結果では特殊文字の一部がエンコードされていないことが確認できます。
encodeURIComponent()関数はほぼすべての特殊文字をエンコードし、あらゆる文字に対して適用されます。set1、set2、set3、set4の結果では、すべての特殊文字と空白がエンコードされていることが分かります。

これらの結果から、encodeURI()関数とencodeURIComponent()関数の動作と違いを理解できます。

推奨事項と注意点

以下の表にencodeURI()とencodeURIComponent()を使用する際の推奨事項と注意点をまとめました。

JavaScriptのURLエンコード関数を使用する際の推奨事項と注意点
項目	推奨事項	注意点
HTTPリクエスト作成時のデータエンコード	encodeURIComponent()関数を使用してデータをエンコード	特殊文字と空白の処理に注意
URL構成要素のエンコード	encodeURI()関数を使用	URI全体をエンコードする必要がある場合に使用
外部入力の検証	外部データを含む場合は検証と処理を行う	セキュリティ問題の予防が必要である
URLの長さ制限の確認	長さ制限を考慮	最大長を超えないように注意
特殊文字の処理	encodeURIComponent()関数を使用	encodeURI()関数は特殊文字の処理を考慮する必要がある
GETおよびPOSTリクエストの関数選択	GETにはencodeURIComponent()関数を使用し、POSTでは必要に応じて選択	リクエスト方式に応じて関数を選択
環境の互換性を確認	さまざまな環境での動作検証が必要である	動作が想定と異なる場合がある

補足説明として、URLエンコードはセキュリティのために必要な処理ですが、完全に安全を保証するものではありません。URLエンコードによって特殊文字や空白をエンコードすることはセキュリティ問題の予防に役立ちますが、すべてのセキュリティ問題を解決できるわけではありません。そのため、URLエンコードに加えて他のセキュリティ対策も併せて実施することが推奨されます。

仕様書

JavaScriptのURLエンコード関数の仕様書
仕様書
`encodeURI()`	ECMAScript Language Specification #sec-encodeuri-uri
`encodeURIComponent()`	ECMAScript Language Specification #sec-encodeuricomponent-uricomponent