はじめに (対象読者・この記事でわかること)

この記事は、PHPでWebアプリケーションを開発している方、特にフロントエンドとの連携でクロスオリジンに関する問題に直面している方、または今後Chromeブラウザのセキュリティ強化に伴う影響を懸念している方を対象としています。

この記事を読むことで、Google Chromeのセキュリティポリシー変更によりSharedArrayBufferが利用制限された背景と、それによって発生しうる問題の概要がわかります。さらに、AWS環境（S3、CloudFront）でPHPアプリケーションがクロスオリジン問題を回避し、必要なリソースに安全にアクセスできるようにするためのCORS（Cross-Origin Resource Sharing）設定の具体的な方法を理解し、実際に実装できるようになります。Webアプリケーションのセキュリティとパフォーマンスを両立させたいと考えている方にとって、この記事が課題解決の一助となれば幸いです。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 * PHPでのWebアプリケーション開発経験 * AWS S3およびCloudFrontの基本的な利用経験 * HTTPプロトコルおよびCORSの基本的な概念

SharedArrayBuffer利用制限とPHP開発への影響

近年、Webブラウザ、特にGoogle Chromeはセキュリティとプライバシー保護を強化する動きを加速させています。その一環として、SharedArrayBufferの利用に制限がかけられました。SharedArrayBufferは、Web Workers間でメモリを共有し、WebAssembly (Wasm) と連携することで、複雑な計算や高パフォーマンスな処理をWebブラウザ上で実現するための重要な機能です。しかし、サイドチャネル攻撃（Spectreなど）のリスク源となる可能性が指摘されたため、Chrome 88以降では、WebページがCross-Origin-Opener-Policy (COOP) と Cross-Origin-Embedder-Policy (COEP) ヘッダーの両方を設定し、「Cross-Origin Isolation」状態になっている場合にのみ利用可能とされました。

PHP自体が直接SharedArrayBufferを利用することはありません。しかし、PHPで構築されたバックエンドAPIと連携するフロントエンド（JavaScriptやWebAssemblyを利用したSPAなど）がSharedArrayBufferに依存している場合、この制限が大きな影響を及ぼします。例えば、クライアントサイドで複雑な画像処理や動画エンコード、機械学習の推論などをWebAssemblyで行い、そのパフォーマンス向上にSharedArrayBufferが使われていた場合、COOP/COEPヘッダーが正しく設定されていないと、これらの機能が動作しなくなります。

この問題の解決には、サーバー側で適切なHTTPヘッダーを設定し、ブラウザを「Cross-Origin Isolation」状態にする必要があります。しかし、既存の複雑なWebアプリケーション環境において、COOP/COEPヘッダーの導入は、すべてのリソースが同一オリジンか、またはCORSが適切に設定されていることを要求するため、容易ではありません。特に、静的コンテンツをS3でホストし、PHPアプリケーションとは異なるオリジンで動作している場合など、複数のオリジンからリソースをロードする環境では、CORS設定の徹底が不可欠となります。これにより、クロスオリジンリソースへのアクセスを許可しつつ、必要なセキュリティレベルを維持するバランスが求められます。

AWS環境におけるCORS設定徹底ガイド

PHPアプリケーションがAWS環境で動作し、SharedArrayBufferの利用制限や一般的なクロスオリジン問題に直面している場合、AWSのサービスにおけるCORS設定は非常に重要です。ここでは、特に静的コンテンツのホスティングによく利用されるS3と、コンテンツ配信に利用されるCloudFrontでのCORS設定について詳しく解説します。

ステップ1：CORSとは何か？基本をおさらい

CORS（Cross-Origin Resource Sharing）は、Webブラウザが異なるオリジン（ドメイン、プロトコル、ポートのいずれかが異なる）にあるリソースにアクセスする際のセキュリティメカニズムです。ブラウザは、セキュリティ上の理由から、スクリプトによるHTTPリクエストを同一オリジンに制限する「同一オリジンポリシー（Same-Origin Policy）」を設けています。しかし、現代のWebアプリケーションでは、APIサーバー、画像ストレージ、CDNなど、複数の異なるオリジンからリソースを読み込むことが一般的です。

CORSは、サーバー側が特定のヘッダー（例: Access-Control-Allow-Origin）をHTTPレスポンスに含めることで、異なるオリジンからのアクセスを明示的に許可する仕組みを提供します。SharedArrayBufferの利用制限においては、COOP/COEPヘッダーの導入により、厳格なクロスオリジンポリシーが適用されるため、CORSが正しく設定されていないリソースへのアクセスはすべて拒否されることになります。

ステップ2：AWS S3でのCORS設定

AWS S3は、静的ファイル（画像、CSS、JavaScriptファイルなど）のホスティングに広く利用されます。PHPアプリケーションのフロントエンドがS3にデプロイされている場合や、S3から画像などのメディアファイルを読み込む場合、S3バケットに対するCORS設定が必要です。

  1. S3バケットポリシーの編集:

    • AWSマネジメントコンソールにログインし、S3サービスへ移動します。
    • CORS設定を行いたいバケットを選択し、「アクセス許可」タブをクリックします。
    • 「CORS (Cross-Origin Resource Sharing)」セクションまでスクロールし、「編集」をクリックします。

  2. CORS構成の追加: XML形式でCORS設定を記述します。以下は一般的な設定例です。

    xml <?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>https://your-php-app.com</AllowedOrigin> <AllowedOrigin>http://localhost:3000</AllowedOrigin> <!-- 開発環境向け --> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>DELETE</AllowedMethod> <AllowedMethod>HEAD</AllowedMethod> <AllowedHeader>*</AllowedHeader> <ExposeHeader>ETag</ExposeHeader> <ExposeHeader>x-amz-meta-custom-header</ExposeHeader> <MaxAgeSeconds>3000</MaxAgeSeconds> </CORSRule> </CORSConfiguration>

    • <AllowedOrigin>: リソースへのアクセスを許可するオリジンを指定します。ワイルドカード * も使用できますが、セキュリティの観点からは特定オリジンを指定することが推奨されます。複数指定可能です。
    • <AllowedMethod>: 許可するHTTPメソッドを指定します。GET, POST, PUT, DELETE, HEAD など。
    • <AllowedHeader>: リクエストに含めることを許可するヘッダーを指定します。* はすべてのヘッダーを許可します。Content-Type, Authorization などを指定する場合もあります。
    • <ExposeHeader>: ブラウザからアクセス可能なレスポンスヘッダーを指定します。カスタムヘッダーをフロントエンドで取得したい場合に設定します。
    • <MaxAgeSeconds>: CORSプリフライトリクエストの結果をキャッシュする秒数です。OPTIONS リクエストの頻度を減らすために使用します。

  3. 保存: 設定を保存します。これにより、指定されたオリジンからのS3リソースへのクロスオリジンアクセスが許可されます。

ステップ3：AWS CloudFrontでのCORS設定

CloudFrontはCDN（コンテンツデリバリーネットワーク）として、S3やEC2などのオリジンからコンテンツを高速に配信します。S3にCORS設定を行ったとしても、CloudFrontを介してコンテンツを配信する場合、CloudFront側でもCORS関連のヘッダーが適切に処理されるように設定する必要があります。

  1. ディストリビューションの編集:

    • AWSマネジメントコンソールでCloudFrontサービスへ移動します。
    • CORS設定を適用したいディストリビューションを選択し、「ディストリビューション設定」を開きます。
    • 「ビヘイビア」タブに移動し、関連するキャッシュビヘイビアを選択して「編集」をクリックします。

  2. ヘッダーのキャッシュポリシーとオリジンリクエストポリシーの設定: CORSを正しく機能させるには、CloudFrontがクライアントからのOriginヘッダーやAccess-Control-Request-Headersヘッダーをオリジンにフォワードし、オリジンからのAccess-Control-Allow-Originなどのレスポンスヘッダーをクライアントに返す必要があります。

    • レガシーキャッシュ設定を使用しない場合 (推奨):
      • キャッシュポリシー:
        • 「キャッシュポリシー」で「Managed-CORS-S3Origin」またはカスタムキャッシュポリシーを作成します。
        • カスタムポリシーを作成する場合、Origin ヘッダーを「ヘッダー」セクションに含め、「含む (Include)」に設定します。これにより、CloudFrontがOriginヘッダーをキャッシュキーに含めてオリジンに転送します。
      • オリジンリクエストポリシー:
        • 「オリジンリクエストポリシー」で「Managed-CORS-S3Origin」またはカスタムポリシーを作成します。
        • カスタムポリシーを作成する場合、「ヘッダー」セクションで、Origin、Access-Control-Request-Headers、Access-Control-Request-Method を含めるように設定します。これにより、CloudFrontがこれらのヘッダーをオリジンに転送します。
    • レガシーキャッシュ設定を使用する場合:
      • 「キャッシュキーとオリジンリクエスト (以前のキャッシュ設定)」セクションで、以下の設定を行います。
      • 「ヘッダーをキャッシュに含める」で「Whitelist」を選択し、Origin をホワイトリストに追加します。
      • 「HTTPメソッド」で GET, HEAD, OPTIONS を許可するように設定します。CORSのプリフライトリクエストで利用されるOPTIONSメソッドを許可することが重要です。

  3. Lambda@Edgeの利用 (より複雑なシナリオ): S3やCloudFrontのネイティブなCORS設定だけでは対応できない複雑なロジック（例: 動的な Access-Control-Allow-Origin ヘッダー生成、リクエストヘッダーに基づく詳細な制御）が必要な場合は、Lambda@Edgeを利用して、Viewer RequestまたはOrigin ResponseイベントでHTTPヘッダーを動的に操作することも可能です。

    例えば、以下のようなLambda関数をOrigin Responseトリガーに設定することで、S3からのレスポンスにCORSヘッダーを追加できます。

    ```javascript 'use strict'; exports.handler = (event, context, callback) => { const response = event.Records[0].cf.response; const headers = response.headers;

    // Originヘッダーが存在しない場合は、任意のオリジンからのアクセスを許可しない
// もしくは、特定のオリジンからのアクセスのみ許可するロジックをここに記述
// 例: headers['origin'][0].value にリクエスト元オリジンが入る
const allowedOrigin = 'https://your-php-app.com'; // 特定のオリジンを許可

// Access-Control-Allow-Origin ヘッダーを追加
headers['access-control-allow-origin'] = [{ key: 'Access-Control-Allow-Origin', value: allowedOrigin }];
headers['access-control-allow-methods'] = [{ key: 'Access-Control-Allow-Methods', value: 'GET, HEAD, OPTIONS' }];
headers['access-control-allow-headers'] = [{ key: 'Access-Control-Allow-Headers', value: 'Content-Type, Authorization, X-Amz-Date, X-Api-Key, X-Amz-Security-Token' }];
headers['access-control-max-age'] = [{ key: 'Access-Control-Max-Age', value: '86400' }]; // 24時間キャッシュ

callback(null, response);

    }; ```

ハマった点やエラー解決：Preflight Request（OPTIONSメソッド）の問題

CORSで最もよく遭遇する問題の一つが、ブラウザからのプリフライトリクエスト（OPTIONSメソッド）が正しく処理されないことです。

典型的なエラーメッセージ: Access to fetch at 'https://your-s3-bucket.s3.amazonaws.com/your-resource.js' from origin 'https://your-php-app.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

このエラーは、ブラウザがCORSリクエストを送信する前に、まずOPTIONSメソッドでサーバーに対してプリフライトリクエストを送り、クロスオリジンリクエストが許可されているかを確認しますが、このOPTIONSリクエストへのレスポンスに適切なCORSヘッダー（特にAccess-Control-Allow-Origin）が含まれていない場合に発生します。S3では、AllowedMethodにOPTIONSを含めることでこの問題に対処できますが、CloudFrontを間に挟むと、CloudFrontがOPTIONSリクエストを正しくオリジンにフォワードしない、またはキャッシュしないために問題が発生することがあります。

解決策

  • S3のCORS設定の確認:
    • AllowedMethodにOPTIONSが含まれていることを確認します。
    • AllowedOriginに、実際にリクエストを発信するオリジンが正確に指定されていることを確認します（ワイルドカード * を利用する場合は特に注意）。
  • CloudFrontのビヘイビア設定の確認:
    • HTTPメソッド: CloudFrontのキャッシュビヘイビアで、OPTIONSメソッドが許可されていることを確認します。
    • ヘッダーフォワード: Originヘッダーだけでなく、Access-Control-Request-HeadersやAccess-Control-Request-Methodもオリジンにフォワードするように設定します。これは、オリジン（S3など）がプリフライトリクエストを正確に解釈するために必要です。
    • キャッシュポリシーとオリジンリクエストポリシー: 最新のCloudFrontでは、これらのポリシーを適切に設定することで、CORS関連ヘッダーのハンドリングが容易になります。特に、S3をオリジンとする場合は「Managed-CORS-S3Origin」ポリシーの利用を検討してください。
  • ブラウザの開発者ツールで確認:
    • ネットワークタブを開き、CORSエラーが発生しているリクエストのOPTIONSリクエストと、その後の実際のGET/POSTリクエストのヘッダーを詳細に確認します。
    • レスポンスヘッダーにAccess-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headersが正しく含まれているか、その値が期待通りかを確認します。

これらの設定を徹底することで、SharedArrayBufferの利用制限下でも、PHPアプリケーションとフロントエンドがAWS環境で安全かつ円滑に連携できるようになります。

まとめ

本記事では、Google ChromeによるSharedArrayBufferの利用制限という背景を踏まえ、PHPを用いたWebアプリケーション開発において遭遇しうるクロスオリジン問題を解決するためのAWSにおけるCORS設定について解説しました。

  • SharedArrayBufferの利用制限: Chromeのセキュリティ強化（COOP/COEPヘッダーの義務付け）により、SharedArrayBufferは特定の条件下でしか利用できなくなり、フロントエンドでWasmなどを利用しているPHPアプリケーションに影響を及ぼす可能性があります。
  • AWS S3でのCORS設定: 静的ファイルホスティングのS3バケットで、XML形式のCORSポリシーを適切に設定することで、許可されたオリジンからのアクセスを有効化する方法を説明しました。
  • AWS CloudFrontでのCORS設定: CDNとしてCloudFrontを利用する場合、S3のCORS設定に加えて、CloudFrontのキャッシュビヘイビアでOPTIONSメソッドの許可と、OriginなどのCORS関連ヘッダーのフォワードが必須であることを強調しました。

この記事を通して、SharedArrayBuffer利用制限時代におけるクロスオリジン問題の理解を深め、AWS S3およびCloudFrontを活用したCORS設定により、PHPアプリケーションとフロントエンドが安全かつスムーズに連携できるような環境を構築するための具体的な知見と手法を得られたことと思います。 今後は、COOP/COEPヘッダーのより詳細な導入方法や、Lambda@Edgeを用いたより高度なCORS制御についても記事にする予定です。

参考資料