☰

AWS API Gateway - CORS「access-control-allow-origin」 - 複数のエントリ 質問する

tag-icon • tag-icon amazon-web-services amazon-s3 aws-lambda cors aws-api-gateway
AWS API Gateway - CORS「access-control-allow-origin」 - 複数のエントリ 質問する

定義済みの AWS API Gateway に接続する AWS Lambda インスタンスがあります。CORS を有効にしてaccess-control-allow-originの定義を与えるとhttp://example.com、 から Lambda インスタンスにアクセスできるようになりますhttp://example.com。ただし、 を使用するとhttps://example.com機能しません。

では、AWS では、access-control-allow-originワイルドカードを使用せずに複数の値を使用して定義するにはどうすればよいでしょうか? のようなものを使用しようとしました*.example.comが、うまくいきません。

'*'編集: API ゲートウェイで値として使用し、S3 バケットに CORS ルールを設定した場合、安全になりますか? バケット ルールの例:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://example.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>https://example.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>https://www.example.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

ベストアンサー1

複数の Origin を有効にしたい場合、これは CORS では常に厄介な問題でした。

他のシステム (express/nginx など) での一般的な回避策は次のとおりです。

  • Originブラウザから送信されたヘッダーを検査する
  • 発信元のホワイトリストと照合する
  • 一致する場合は、受信をヘッダーOriginとして返しAccess-Control-Allow-Origin、そうでない場合はプレースホルダー（デフォルトのオリジン）を返します。

これは、モック統合を使用する AWS-Gateway の自動配線 CORS サポートを使用する場合には不可能ですが、リクエストを処理するための独自のコードを記述すれば可能ですOPTIONS。

以下は、Lambda プロキシ統合を使用して記述されたサンプル コードです。

const allowedOrigins = [
    "http://example.com",
    "http://example.com:8080",
    "https://example.com",
    "https?://[a-z]*.?myapp.com",
    "http://localhost:[0-9]*"
];

exports.handler = (event, context) => {
    const origin = event.headers.Origin || event.headers.origin;
    var goodOrigin = false;

    if (origin) {
        allowedOrigins.forEach( allowedOrigin => {
            if (!goodOrigin && origin.match(allowedOrigin)) {
                goodOrigin = true;
            }
        });
    }

    context.succeed({
        headers: {
            "Access-Control-Allow-Headers": "Accept,Accept-Language,Content-Language,Content-Type,Authorization,x-correlation-id",
            "Access-Control-Expose-Headers": "x-my-header-out",
            "Access-Control-Allow-Methods": "DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT",
            "Access-Control-Allow-Origin": goodOrigin ? origin : allowedOrigins[0]
        },
        statusCode: 204
    });
};

これを Lambda 関数として保存します。API-Gateway でこれを設定するには、OPTIONSメソッドを追加し、チェックマークを付けて選択Integration Requestします。Lambda FunctionUse Lambda Proxy integration

もちろん、これの欠点は、ラムダ関数に対して料金を支払うことであり、ラムダ関数の呼び出しには、モック統合よりも 50 ミリ秒の追加の遅延が発生する可能性があります。

おすすめ記事