Flash Advent Calendar 21日目 - CORSとプリフライト -

swf2jsで地味に苦しんだのが、CORSとプリフライトリクエストによるエラー問題です。

CORSとは

クロスサイトリクエストフォージェリ(CSRF)などのセキュリティ攻撃を防止するため
同一生成元ポリシー(Same-Origin Policy)という仕組みです。

CORS (Cross-Origin Resource Sharing)は
この制約を一部解除し、異なるオリジン(ドメイン)間でリソースを共有するための仕組みです。

なんで急に問題になったのか？

これまでFlashから動的にSWFや画像のリソースを取得する際に
ドメインが異なっていてもエラーなく取得できていました。

swf2jsはJavaScriptで作られておりブラウザの仕様に準拠する必要があります。

ですので、異なるオリジン(ドメイン)間でのリソースの取得・共有の際に
ブラウザ側でエラー対象となり、処理がそこで停止してしまいます。

対処方法

これまでの傾向として、APIはバックエンドで管理してるサーバー(ApahceやNginx)
画像やSWFなどの静的ファイルはCDNに設置されている事が多かったです。

CDNで一番多かったのはAWSのS3でした。
状況にもよるのですが、このような感じで、AllowedOriginを*にして頂き対応いただきました。

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

サーバー側はApacheやNginxが多かったのですが
こちらも同様で*で対応頂いたケースが多かったです。

Access-Control-Allow-Origin: *

プリフライト

セッション情報やFlashのヘッダーに合わせることで
通常のリクエスト前にプリフライトリクエストが発生してしまいました。

swf2js側はセッションのON/OFFを設定できるよう追加したのと
Flashのヘッダーにセットされる X-Requested-With のON/OFFを追加する事で
プリフライトリクエストが発生しないようにしました。

プリフライトリクエストが発生しない条件

1. GET, HEAD, POSTのうちいずれか
2. ヘッダーに含まれるのが以下のうちいずれか
3. ユーザーエージェントによって自動的に設定されたヘッダー
   • Accept
   • Accept-Language
   • Content-Language
   • Content-Type
4. Content-Typeのヘッダーが以下のいずれか
   • application/x-www-form-urlencoded
   • multipart/form-data
   • text/plain
5. リクエストに使用されるどのXMLHttpRequestUploadにもイベントリスナーが登録されていないこと。
6. リクエストにReadableStreamオブジェクトが使用されていないこと。

ブラウザの仕様に準拠する事になるので
こういった、設定が必須となります。

もし、無料版のswf2jsをご利用になってる方で、同じようなエラーの解決策となれば嬉しいです。