S3とWebKitのディスクキャッシュが引き起こすCORSエラーの解決策

問題の概要

SP(iOS)のChromeおよびSafariで、チャットボットサービスのチャットウィンドウ内に画像を表示する際、最初の表示は問題なく行われるのに、ウィンドウを一度閉じて再度開くとCORSエラーで画像が表示されなくなる現象が発生していました。この問題は、PC(macOS)のChromeでは発生しませんでした。

問題の原因

今回、クライアントからバックエンドのAPIを叩き、バックエンドで生成されたS3の署名付きURLを介して画像を取得するプロセスを採用していました。この際、S3のCORS設定でフロントエンドのURLを適切に設定していたのですが、iOSデバイスでの二度目のアクセス時にブラウザのディスクキャッシュが使用されて、Access-Control-Allow-Originヘッダがレスポンスに含まれないためにCORSエラーが発生していました。

解決策

WebKitをレンダリングエンジンに使用するブラウザ(Chrome(iOS), Safari(iOS), Safari(macOS))では、画像などの静的リソースをキャッシュする際にCORSに関するヘッダー(Access-Control-Allow-Origin)を省略して保存する挙動が確認されました。

この問題を解決するために、S3から画像を取得する際にキャッシュを無効にするためのResponseCacheControl: 'no-cache'オプションをGetObjectリクエストに明示的に含めました。これにより、すべての画像リクエストがネットワークを通じて行われて、キャッシュされたレスポンスが原因でCORSエラーになるのを防ぐことができました。

const command = new GetObjectCommand({
  Bucket: bucketName,
  Key: key,
  ResponseCacheControl: 'no-cache'  // キャッシュ無効化
})