2023-03-31

Webリクエストのエンコーディング

Webリクエストのエンコーディングタイプ

Web開発の世界では、エンコーディングはデータが安全かつ効率的に送信され、処理されることを保証する上で重要な役割を果たします。本書は、Webリクエストで使用されるURLエンコーディング、HTMLエンコーディング、JSONエンコーディング、Base64エンコーディング、およびマルチパートフォームデータエンコーディングなど、さまざまなエンコーディングタイプについて詳しく説明し、これらのエンコーディングタイプを理解することで、開発者がより堅牢で安全なWebアプリケーションを構築できるようになります。

エンコーディングは次の理由から重要です。

互換性
異なるシステムやプログラミング言語はデータを異なる方法で解釈する場合があるため、エンコーディングはさまざまなプラットフォームで理解できるようにデータを表現する標準的な方法を提供します。
セキュリティ
適切なエンコーディングにより、クロスサイトスクリプティング（XSS）攻撃やSQLインジェクションなどのセキュリティ脆弱性から保護することができます。データをエンコードすることで、開発者は攻撃者が悪意のあるコードをアプリケーションに挿入するリスクを軽減できます。
データの整合性
エンコーディングにより、システム間で転送されるデータが完全であり、変更されていないことが保証され、データの整合性を維持するために必要です。
可読性
JSONやXMLなどのエンコーディングタイプは、データをより読みやすく管理しやすくし、開発者が複雑なデータ構造を効率的に扱うことができるようにします。

この記事では以下のエンコーディングタイプについて説明します。

URLエンコーディング
HTMLエンコーディング
JSONエンコーディング
Base64エンコーディング
マルチパートフォームデータエンコーディング

HTML エンコーディング

HTMLエンコーディングは、HTMLドキュメント内で特別な意味を持つ文字や、ドキュメントのテキストコンテンツ内に許可されていない文字を表現するために使用される方法です。HTMLエンコーディングの目的は、ブラウザで文字が正しく表示され、HTMLマークアップに干渉しないようにすることです。

HTMLエンコーディングでは、特殊文字は文字参照に置き換えられます。文字参照には、名前付きエンティティ（例：小なり記号の<）または数値エンティティ（例：小なり記号の<）があります。

HTMLエンコーディングは、以下のシナリオで使用されます。

予約文字
HTMLドキュメント内には、小なり記号 (<)、大なり記号 (>)、アンパサンド (&) など、特定の意味を持つ文字があります。これらの文字をテキストコンテンツの一部として含める必要がある場合は、HTMLエンコードする必要があります。
安全でない文字
空白や非表示文字、引用符や角括弧など、セキュリティ上の問題を引き起こす可能性がある文字があります。HTMLエンコードすることで、これらの文字が安全に表示されるようにします。
非 ASCII 文字
HTMLエンコードを使用して、HTMLドキュメント内の非ASCII文字（例：英語以外の言語の文字）を表現できます。これにより、ブラウザが使用する文字セットやエンコーディングに関係なく、文字が正しく表示されます。
HTML エンコーディングの実践
HTMLエンコーディングを使用するには、次の手順に従います。

HTMLドキュメント内でエンコードする必要がある文字を特定
各特殊文字を適切な文字参照で置き換え。名前付きエンティティまたは数値エンティティのいずれかです。

例えば、次のHTMLスニペットには、小なり記号が含まれています。

<p>The value of x is less than 10.</p>

小なり記号をHTMLエンコードするには、名前付きエンティティ<に置き換えます。

<p>The value of x is &lt; 10.</p>

ほとんどのプログラミング言語やWebフレームワークには、HTMLエンコーディングやデコーディングを実行するための組み込み関数やライブラリが提供されています。これらのツールを使用することで、HTML文書がWebブラウザで正しく表示され、クロスサイトスクリプティング（XSS）攻撃などのセキュリティリスクが減少するようにすることができます。

URLエンコーディング

URLエンコーディングは、URL内で特別な意味を持つ文字や許容されない文字を表現するための方法です。URLエンコーディングを使用することで、URLを安全に送信し、Webブラウザやサーバーで正しく解釈できるようにします。

URLエンコーディングでは、許容されない文字や予約された文字は、パーセント記号（%）と、文字のASCII値を表す2桁の16進数で置き換えられます。例えば、スペース文字は%20でエンコードされ、アットマーク（@）は%40でエンコードされます。

URLエンコーディングは、次のような場合に使用されます。

予約文字
いくつかの文字は、URL内で特別な意味を持ちます。例えば、スラッシュ（/）、クエスチョンマーク（?）、アンパサンド（&）などです。これらの文字をパラメータ値やパスセグメントの一部として含める必要がある場合は、URLエンコードする必要があります。
安全でない文字
いくつかの文字は、URL内で使用すると問題を引き起こす可能性があります。例えば、スペース文字や印刷不可能な文字などが挙げられます。URLエンコーディングにより、これらの文字を安全に送信できます。
非ASCII文字
URLエンコーディングは、URL内の非ASCII文字（英語以外の言語の文字など）を表現するために使用されます。これにより、標準のURLで許容される限られた文字セットに互換性があるようになります。

URLエンコーディングの実践

URLエンコーディングを使用するには、以下の手順に従います。

エンコードする必要があるURL内の文字を特定します。
許容されない文字や予約された文字を、パーセント記号（%）と、文字のASCII値を表す2桁の16進数で置き換えます。

例えば、次のクエリ文字列を含むURLを考えてみます。

For example, consider the following URL containing a query string with a space character:

https://example.com/search?query=hello world

スペース文字をURLエンコードするには、%20で置き換えます。

https://example.com/search?query=hello%20world

ほとんどのプログラミング言語やWebフレームワークには、URLエンコーディングやデコーディングを実行するための組み込み関数やライブラリが提供されています。これらのツールを使用することで、URLが適切にエンコードされ、Webブラウザやサーバーで正しく解釈できるようにすることができます。

Base64エンコーディング

Base64エンコーディングは、64種類の異なるASCII文字のセットを使用して、バイナリデータを文字列表現に変換する方法です。このエンコーディング方式は、画像やファイルなどのバイナリデータを、電子メールやHTTPなどのテキストデータを扱うメディアで送信することを可能にするように設計されています。

Base64エンコーディングは、3バイトのバイナリデータを4つのASCII文字に変換することで動作します。エンコードされた文字列は、大文字と小文字のアルファベット、数字、2つの追加文字（通常は+と/）のみで構成されています。

Base64エンコーディングは、次のような場合に一般的に使用されます。

バイナリデータの埋め込み
Base64エンコーディングを使用すると、JSON、XML、またはHTMLなどのテキストベースの形式にバイナリデータ（画像やファイルなど）を埋め込むことができます。これにより、大きなペイロード内の小さなバイナリデータを送信したり、HTML文書内にインライン画像を含めたりすることができます。
データURI
データURIは、外部リソースであるかのようにWebページ内にデータをインラインで含めることができるURIスキームです。Base64エンコーディングは、データURIを作成するためによく使用されます。これにより、画像、スタイルシート、またはスクリプトのデータURIを作成でき、Webページを読み込むために必要なHTTPリクエストの数を減らすことができます。
安全なトークン生成
Base64エンコーディングは、安全なトークンや識別子を生成するために使用することができます。暗号ハッシュや暗号化と組み合わせることで、Base64エンコードされたトークンは、安全な認証や承認の目的に使用できます。

Base64エンコーディングの実践

次に、小さなバイナリデータを表すBase64エンコードされた文字列の例を示します。

aGVsbG8gd29ybGQ=

このエンコードされた文字列は、ASCIIテキスト「hello world」のバイナリデータを表します。Base64エンコードされた文字列をバイナリデータに戻すには、逆のプロセスを行い、4つのASCII文字を3バイトのバイナリデータに変換します。

Base64エンコーディングを使用してバイナリデータを大きなペイロード内に埋め込む場合、エンコードされたデータを説明するメタデータを含めることが一般的です。例えば、データURIを使用してHTML文書に画像を埋め込む場合、画像のMIMEタイプを含める必要があります。

<img src="data:image/png;base64,iVBORw0KGg..." alt="An example image" />

この例では、<img>タグのsrc属性に、image/pngのMIMEタイプを含むデータURIがあります。その後に、画像のBase64エンコードされたバイナリデータが続きます。

ほとんどのプログラミング言語は、Base64エンコードされたデータを扱うための組み込みサポートやライブラリを提供しています。WebリクエストでBase64エンコードされたデータを送信する場合は、データを適切にフォーマットし、Content-Typeヘッダーなどの適切なヘッダーを設定して、サーバーがデータを解釈できるようにする必要があります。

JSONエンコーディング

JSON (JavaScript Object Notation) エンコーディングは、人間が読み書きしやすく、機械が解析や生成しやすい軽量なテキストベースのデータ交換形式です。JSONエンコーディングは、配列やキーと値のペアなどの構造化データオブジェクトの文字列表現としてデータを転送するために使用されます。

JSONエンコーディングは、XMLやその他のマークアップ言語と比較して、よりコンパクトで効率的なデータ転送手段を提供するため、WebサービスやAPIなどでの使用が増えています。さらに、JavaScriptでネイティブにサポートされているため、Webアプリケーションや現代のフロントエンドフレームワークにとって理想的な選択肢となっています。

JSONエンコーディングは、以下のようなシナリオで一般的に使用されます:

WebサービスとAPI
JSONエンコーディングは、複雑なデータ構造を簡単に表現でき、プログラミング言語で広くサポートされ、XMLよりも効率的であるため、WebサービスやAPIのデフォルトデータ形式としてよく使用されます。
AJAXリクエスト
Webアプリケーションのクライアントとサーバー間でデータを送信する場合、JSONエンコーディングはAJAXリクエストの人気のある選択肢です。これは、JSONがJavaScriptやその他のクライアント側言語で簡単に解析できるため、Webアプリケーションでデータを扱いやすくなるためです。
設定ファイル
JSONエンコーディングは、人間が読みやすい形式で設定データを保存するためにも使用できます。多くの現代のアプリケーションやツールは、その簡単さと使いやすさのために、JSONを設定ファイルのフォーマットとして使用しています。

JSONエンコーディングの実践

JSONエンコーディングを使用するには、オブジェクト、配列などのデータ構造を特定の構文規則で表現します。例えば:

オブジェクトは波かっこ{}で囲まれ、キーと値のペアで構成されます。

配列は角かっこ[]で囲まれ、値のリストを含む
キーは文字列でなければならず、ダブルクォーテーションで囲まれる
値は文字列、数値、オブジェクト、配列、またはtrue、false、nullの特別なキーワードのいずれかであることができる

以下は、JSONエンコードされたオブジェクトの例です。

{
  "firstName": "John",
  "lastName": "Doe",
  "age": 30,
  "email": "john.doe@example.com",
  "address": {
    "street": "123 Main St",
    "city": "New York",
    "state": "NY",
    "postalCode": "10001"
  },
  "phoneNumbers": [
    {
      "type": "home",
      "number": "555-555-1234"
    },
    {
      "type": "work",
      "number": "555-555-5678"
    }
  ]
}

この例では、人物を表すJSONオブジェクトがあり、名前、年齢、連絡先情報などのさまざまなプロパティが含まれています。データ構造にはネストされたオブジェクトや配列が含まれており、JSONエンコーディングの柔軟性が示されています。

ほとんどのプログラミング言語は、JSONデータを処理するための組み込みのサポートまたはライブラリを提供しています。JSONエンコードされたデータをWebリクエストで送信する場合は、サーバーがデータを解釈する方法を知るように、Content-Typeヘッダーをapplication/jsonに設定することが重要です。

マルチパートフォームデータエンコーディング

マルチパートフォームデータエンコーディングは、HTTPリクエスト内のバイナリまたは大量のテキストデータを転送するために使用される方法で、通常はフォーム送信の文脈で使用されます。このエンコードタイプは、各パートに独自のコンテンツタイプやメタデータを持つ、複数のデータパートを単一のリクエストで送信することができます。ファイルのアップロードやテキストとバイナリデータを単一のリクエストで送信する場合に特に有用です。

マルチパートフォームデータエンコーディングは、以下のようなシナリオで一般的に使用されます。

ファイルのアップロード
ユーザーがWebフォームを介して、画像やドキュメントなどのファイルをサーバーにアップロードする必要がある場合、マルチパートフォームデータエンコーディングが推奨されます。これにより、ファイルのバイナリコンテンツが他のフォームフィールドとともに送信されます。
大量のテキストデータ
一度に大量のテキストデータを送信する必要がある場合、マルチパートフォームデータエンコーディングを使用すると、URLやJSONエンコーディングなどの他のエンコーディングタイプよりも効率的です。
異なるコンテンツタイプ
フォームにテキストフィールド、ファイルアップロード、その他のデータタイプが混在している場合、マルチパートフォームデータエンコーディングを使用することで、全てのデータを単一のリクエストで送信し、各パートを別々に識別できます。

マルチパートフォームデータエンコーディングの実践

マルチパートフォームデータエンコーディングを使用する場合、リクエストの各パートは一意のバウンダリ文字列で区切られます。バウンダリ文字列は通常、クライアント（例えばWebブラウザ）によって生成され、リクエストのContent-Typeヘッダーに含まれます。

典型的なマルチパートフォームデータリクエストは次のようになります。

POST /upload HTTP/1.1
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary12345

------WebKitFormBoundary12345
Content-Disposition: form-data; name="username"

john_doe
------WebKitFormBoundary12345
Content-Disposition: form-data; name="profile_picture"; filename="profile.jpg"
Content-Type: image/jpeg

(binary content of the image)
------WebKitFormBoundary12345--

この例では、リクエストは2つのフィールドを持つフォームを送信しています。1つは"username"という名前のテキストフィールドで、もう1つは"profile_picture"という名前のファイルアップロードフィールドです。バウンダリ文字列は----WebKitFormBoundary12345であり、各パートはこのバウンダリ文字列で区切られています。最後のバウンダリ文字列には、リクエストの終了を示すために、さらに2つのハイフンが追加されています。

アプリケーションでマルチパートフォームデータエンコーディングを使用する場合、ほとんどのプログラミング言語やWebフレームワークは、このデータタイプのエンコーディングとデコーディングを処理するための組み込み機能またはライブラリを提供しています。これらのツールは、リクエストを解析し、各パートを分離し、データを処理するために利用できます。