⛓️
【Cloudfront】Authorizationヘッダー付きのリクエストで403が返ってくるのをなんとかする
はじめに
Basic認証付き(Cloudfront Functions)のCDNにAuthorizationヘッダーつけてリクエストしようとしたらハマった。
タイトルの通り、AuthorizatonヘッダーつけてCloudfrontのCDNにリクエスト投げると、プリフライト(OPTIONS)で403が返ってきてしまうので、なんとかする
結論
- S3のCORSで「ExposeHeaders」に「Access-Control-Allow-Origin」を追加する
- Cloudfrontのキャッシュキーとレスポンスヘッダーポリシーで許可するヘッダーを明示的に指定する
- Cloudfront FunctionsでOPTIONSをパススルーさせる
- Cloudfront Functionsでレスポンスヘッダーに「Access-Control-Allow-Origin」を追加する
やり方
S3
- S3バケット > アクセス許可 > Cross-Origin Resource Sharing (CORS)
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"HEAD"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [
"Access-Control-Allow-Origin"
]
}
]
Cloudfront
- Cloudfront > ディストリビューション > ビヘイビア > キャッシュキーとオリジンリクエスト > キャッシュキー設定
const mediaCachePolicy = new cloudfront.CachePolicy(this, `${settings.resourcePrefix}-media-cache-policy`, {
cachePolicyName: `${settings.resourcePrefix}-media-cache-policy`,
headerBehavior: cloudfront.CacheHeaderBehavior.allowList('Authorization'),
})
「Authorization」ヘッダーを明示的に追加
- Cloudfront > ディストリビューション > ビヘイビア > レスポンスヘッダーポリシー
const medialResponseHeadersPolicy = new cloudfront.ResponseHeadersPolicy(this, `${settings.resourcePrefix}-media-response-header-policy`, {
corsBehavior: {
accessControlAllowCredentials: false,
accessControlAllowHeaders: ['Authorization'],
accessControlAllowOrigins: ['*'],
accessControlExposeHeaders: ['*'],
accessControlAllowMethods: ['GET', 'HEAD', 'OPTIONS'],
originOverride: true,
}
});
「Authorization」ヘッダーを明示的に追加。
- Cloudfront > 関数
function handler(event) {
var request = event.request;
var headers = request.headers;
var method = request.method;
var responseHeaders = {
"access-control-allow-origin": { value: "*" },
}
if(method === "OPTIONS") {
return {
statusCode: 204,
statusDescription: "NoContent",
headers: responseHeaders
};
}
var authString = "Basic base64EncodedString";
if (typeof headers.authorization === "undefined" || headers.authorization.value !== authString) {
return {
statusCode: 401,
statusDescription: "Unauthorized",
headers: responseHeaders
};
}
return request;
}
リクエストメソッドが「OPTIONS」の場合、Basic認証挟まず204ステータスで返却。
さいごに
こちらにも記載されている通り、安易に「*(All)」で全許可しちゃダメだなと思いました。
カスタムヘッダーを追加する場合も、同様の手順でできます。
Discussion