Submit Search
Upload
CloudFront経由でのCORS利用
•
11 likes
•
12,227 views
Yuta Imai
Follow
CloudFront経由でCORSを利用する際にハマったのでその原因とワークアラウンドのメモ。
Read less
Read more
Report
Share
Report
Share
1 of 10
Recommended
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
Akihiro Kuwano
[社内勉強会]ELBとALBと数万スパイク負荷テスト
[社内勉強会]ELBとALBと数万スパイク負荷テスト
Takahiro Moteki
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
Yahoo!デベロッパーネットワーク
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
Hiroshi Tokumaru
マルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのこと
Amazon Web Services Japan
[Aurora事例祭り]Amazon Aurora を使いこなすためのベストプラクティス
[Aurora事例祭り]Amazon Aurora を使いこなすためのベストプラクティス
Amazon Web Services Japan
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
AWS Black Belt Online Seminar 2018 Amazon DynamoDB Advanced Design Pattern
AWS Black Belt Online Seminar 2018 Amazon DynamoDB Advanced Design Pattern
Amazon Web Services Japan
Recommended
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
Akihiro Kuwano
[社内勉強会]ELBとALBと数万スパイク負荷テスト
[社内勉強会]ELBとALBと数万スパイク負荷テスト
Takahiro Moteki
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
Yahoo!デベロッパーネットワーク
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
Hiroshi Tokumaru
マルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのこと
Amazon Web Services Japan
[Aurora事例祭り]Amazon Aurora を使いこなすためのベストプラクティス
[Aurora事例祭り]Amazon Aurora を使いこなすためのベストプラクティス
Amazon Web Services Japan
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
AWS Black Belt Online Seminar 2018 Amazon DynamoDB Advanced Design Pattern
AWS Black Belt Online Seminar 2018 Amazon DynamoDB Advanced Design Pattern
Amazon Web Services Japan
DeNA の AWS アカウント管理とセキュリティ監査自動化
DeNA の AWS アカウント管理とセキュリティ監査自動化
DeNA
PHPからgoへの移行で分かったこと
PHPからgoへの移行で分かったこと
gree_tech
ネットストーカー御用達OSINTツールBlackBirdを触ってみた.pptx
ネットストーカー御用達OSINTツールBlackBirdを触ってみた.pptx
Shota Shinogi
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
AWS Black Belt Online Seminar 2017 Amazon ElastiCache
AWS Black Belt Online Seminar 2017 Amazon ElastiCache
Amazon Web Services Japan
俺のTerraform CI/CD ライフサイクル
俺のTerraform CI/CD ライフサイクル
HonMarkHunt
DatadogでAWS監視やってみた
DatadogでAWS監視やってみた
tyamane
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
Akihiro Suda
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
mosa siru
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
Yuki Hirano
Linux女子部 systemd徹底入門
Linux女子部 systemd徹底入門
Etsuji Nakai
AWS Black Belt Techシリーズ Amazon SNS モバイルプッシュ
AWS Black Belt Techシリーズ Amazon SNS モバイルプッシュ
Amazon Web Services Japan
AWS で Presto を徹底的に使いこなすワザ
AWS で Presto を徹底的に使いこなすワザ
Noritaka Sekiyama
RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話
Takuto Wada
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Takafumi ONAKA
Mercari JPのモノリスサービスをKubernetesに移行した話 PHP Conference 2022 9/24
Mercari JPのモノリスサービスをKubernetesに移行した話 PHP Conference 2022 9/24
Shin Ohno
がっつりMongoDB事例紹介
がっつりMongoDB事例紹介
Tetsutaro Watanabe
nginx入門
nginx入門
Takashi Takizawa
20210526 AWS Expert Online マルチアカウント管理の基本
20210526 AWS Expert Online マルチアカウント管理の基本
Amazon Web Services Japan
Kinesis + Elasticsearchでつくるさいきょうのログ分析基盤
Kinesis + Elasticsearchでつくるさいきょうのログ分析基盤
Amazon Web Services Japan
CloudFront、RedshiftなどAWSが支える動画広告の舞台裏~インフラのイノベーションがもたらす動画広告のイノベーション~
CloudFront、RedshiftなどAWSが支える動画広告の舞台裏~インフラのイノベーションがもたらす動画広告のイノベーション~
Takeshi Yako
送る言葉
送る言葉
Hiroshi Hasegawa
More Related Content
What's hot
DeNA の AWS アカウント管理とセキュリティ監査自動化
DeNA の AWS アカウント管理とセキュリティ監査自動化
DeNA
PHPからgoへの移行で分かったこと
PHPからgoへの移行で分かったこと
gree_tech
ネットストーカー御用達OSINTツールBlackBirdを触ってみた.pptx
ネットストーカー御用達OSINTツールBlackBirdを触ってみた.pptx
Shota Shinogi
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
AWS Black Belt Online Seminar 2017 Amazon ElastiCache
AWS Black Belt Online Seminar 2017 Amazon ElastiCache
Amazon Web Services Japan
俺のTerraform CI/CD ライフサイクル
俺のTerraform CI/CD ライフサイクル
HonMarkHunt
DatadogでAWS監視やってみた
DatadogでAWS監視やってみた
tyamane
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
Akihiro Suda
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
mosa siru
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
Yuki Hirano
Linux女子部 systemd徹底入門
Linux女子部 systemd徹底入門
Etsuji Nakai
AWS Black Belt Techシリーズ Amazon SNS モバイルプッシュ
AWS Black Belt Techシリーズ Amazon SNS モバイルプッシュ
Amazon Web Services Japan
AWS で Presto を徹底的に使いこなすワザ
AWS で Presto を徹底的に使いこなすワザ
Noritaka Sekiyama
RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話
Takuto Wada
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Takafumi ONAKA
Mercari JPのモノリスサービスをKubernetesに移行した話 PHP Conference 2022 9/24
Mercari JPのモノリスサービスをKubernetesに移行した話 PHP Conference 2022 9/24
Shin Ohno
がっつりMongoDB事例紹介
がっつりMongoDB事例紹介
Tetsutaro Watanabe
nginx入門
nginx入門
Takashi Takizawa
20210526 AWS Expert Online マルチアカウント管理の基本
20210526 AWS Expert Online マルチアカウント管理の基本
Amazon Web Services Japan
Kinesis + Elasticsearchでつくるさいきょうのログ分析基盤
Kinesis + Elasticsearchでつくるさいきょうのログ分析基盤
Amazon Web Services Japan
What's hot
(20)
DeNA の AWS アカウント管理とセキュリティ監査自動化
DeNA の AWS アカウント管理とセキュリティ監査自動化
PHPからgoへの移行で分かったこと
PHPからgoへの移行で分かったこと
ネットストーカー御用達OSINTツールBlackBirdを触ってみた.pptx
ネットストーカー御用達OSINTツールBlackBirdを触ってみた.pptx
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
AWS Black Belt Online Seminar 2017 Amazon ElastiCache
AWS Black Belt Online Seminar 2017 Amazon ElastiCache
俺のTerraform CI/CD ライフサイクル
俺のTerraform CI/CD ライフサイクル
DatadogでAWS監視やってみた
DatadogでAWS監視やってみた
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
Linux女子部 systemd徹底入門
Linux女子部 systemd徹底入門
AWS Black Belt Techシリーズ Amazon SNS モバイルプッシュ
AWS Black Belt Techシリーズ Amazon SNS モバイルプッシュ
AWS で Presto を徹底的に使いこなすワザ
AWS で Presto を徹底的に使いこなすワザ
RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Mercari JPのモノリスサービスをKubernetesに移行した話 PHP Conference 2022 9/24
Mercari JPのモノリスサービスをKubernetesに移行した話 PHP Conference 2022 9/24
がっつりMongoDB事例紹介
がっつりMongoDB事例紹介
nginx入門
nginx入門
20210526 AWS Expert Online マルチアカウント管理の基本
20210526 AWS Expert Online マルチアカウント管理の基本
Kinesis + Elasticsearchでつくるさいきょうのログ分析基盤
Kinesis + Elasticsearchでつくるさいきょうのログ分析基盤
Viewers also liked
CloudFront、RedshiftなどAWSが支える動画広告の舞台裏~インフラのイノベーションがもたらす動画広告のイノベーション~
CloudFront、RedshiftなどAWSが支える動画広告の舞台裏~インフラのイノベーションがもたらす動画広告のイノベーション~
Takeshi Yako
送る言葉
送る言葉
Hiroshi Hasegawa
FluentdとAWSを使ったログの運用
FluentdとAWSを使ったログの運用
Keisuke Izumiya
いまNode Express4で書いてるディレクターが 初めて書き始める2ヶ月前くらいの自分に言っておく
いまNode Express4で書いてるディレクターが 初めて書き始める2ヶ月前くらいの自分に言っておく
Takahiro YAMAGUCHI
RICOH THETAの全天球画像でペーパークラフト
RICOH THETAの全天球画像でペーパークラフト
Takehiko YOSHIDA
EC2とVarnishで画像配信
EC2とVarnishで画像配信
Issei Naruta
CloudFront最近の事例と間違った使い方
CloudFront最近の事例と間違った使い方
Hirokazu Ouchi
GUERRA DE CANUDOS
GUERRA DE CANUDOS
Louise Caldart Colombo
例外設計における大罪
例外設計における大罪
Takuto Wada
Life of an Fluentd event
Life of an Fluentd event
Kiyoto Tamura
AWS OpsWorksハンズオン
AWS OpsWorksハンズオン
Amazon Web Services Japan
How I learned to stop worrying and love the cloud
How I learned to stop worrying and love the cloud
Shlomo Swidler
Pakistan ky wasail
Pakistan ky wasail
jawed shaikh
Ilan Goren @ German Israel Congress 2013, Berlin
Ilan Goren @ German Israel Congress 2013, Berlin
ilangoren
Embedded projects
Embedded projects
Senthil Kumar
Bad Implementations of Good Ideas: How Systematic Inattention to Performance ...
Bad Implementations of Good Ideas: How Systematic Inattention to Performance ...
Doug Sillars
Over onze site
Over onze site
pgvanderpoel
STRATEGIC MANAGEMENT - DRGORAD
STRATEGIC MANAGEMENT - DRGORAD
Deepak R Gorad
Promotion on pinterest
Promotion on pinterest
ejpy
Como ser un gran maestro
Como ser un gran maestro
Werton Bastos
Viewers also liked
(20)
CloudFront、RedshiftなどAWSが支える動画広告の舞台裏~インフラのイノベーションがもたらす動画広告のイノベーション~
CloudFront、RedshiftなどAWSが支える動画広告の舞台裏~インフラのイノベーションがもたらす動画広告のイノベーション~
送る言葉
送る言葉
FluentdとAWSを使ったログの運用
FluentdとAWSを使ったログの運用
いまNode Express4で書いてるディレクターが 初めて書き始める2ヶ月前くらいの自分に言っておく
いまNode Express4で書いてるディレクターが 初めて書き始める2ヶ月前くらいの自分に言っておく
RICOH THETAの全天球画像でペーパークラフト
RICOH THETAの全天球画像でペーパークラフト
EC2とVarnishで画像配信
EC2とVarnishで画像配信
CloudFront最近の事例と間違った使い方
CloudFront最近の事例と間違った使い方
GUERRA DE CANUDOS
GUERRA DE CANUDOS
例外設計における大罪
例外設計における大罪
Life of an Fluentd event
Life of an Fluentd event
AWS OpsWorksハンズオン
AWS OpsWorksハンズオン
How I learned to stop worrying and love the cloud
How I learned to stop worrying and love the cloud
Pakistan ky wasail
Pakistan ky wasail
Ilan Goren @ German Israel Congress 2013, Berlin
Ilan Goren @ German Israel Congress 2013, Berlin
Embedded projects
Embedded projects
Bad Implementations of Good Ideas: How Systematic Inattention to Performance ...
Bad Implementations of Good Ideas: How Systematic Inattention to Performance ...
Over onze site
Over onze site
STRATEGIC MANAGEMENT - DRGORAD
STRATEGIC MANAGEMENT - DRGORAD
Promotion on pinterest
Promotion on pinterest
Como ser un gran maestro
Como ser un gran maestro
More from Yuta Imai
Node-RED on device to Apache NiFi on cloud, via SORACOM Canal, with no Internet
Node-RED on device to Apache NiFi on cloud, via SORACOM Canal, with no Internet
Yuta Imai
HDP2.5 Updates
HDP2.5 Updates
Yuta Imai
Deep Learning On Apache Spark
Deep Learning On Apache Spark
Yuta Imai
Hadoop in adtech
Hadoop in adtech
Yuta Imai
Hadoop/Spark セルフサービス系の事例まとめ
Hadoop/Spark セルフサービス系の事例まとめ
Yuta Imai
IoTアプリケーションで利用するApache NiFi
IoTアプリケーションで利用するApache NiFi
Yuta Imai
OLAP options on Hadoop
OLAP options on Hadoop
Yuta Imai
Apache ambari
Apache ambari
Yuta Imai
Spark at Scale
Spark at Scale
Yuta Imai
Dynamic Resource Allocation in Apache Spark
Dynamic Resource Allocation in Apache Spark
Yuta Imai
Apache Hiveの今とこれから - 2016
Apache Hiveの今とこれから - 2016
Yuta Imai
Hadoop最新事情とHortonworks Data Platform
Hadoop最新事情とHortonworks Data Platform
Yuta Imai
Benchmark and Metrics
Benchmark and Metrics
Yuta Imai
Hadoop and Kerberos
Hadoop and Kerberos
Yuta Imai
Spark Streaming + Amazon Kinesis
Spark Streaming + Amazon Kinesis
Yuta Imai
オンラインゲームの仕組みと工夫
オンラインゲームの仕組みと工夫
Yuta Imai
Amazon Machine Learning
Amazon Machine Learning
Yuta Imai
Global Gaming On AWS
Global Gaming On AWS
Yuta Imai
Digital marketing on AWS
Digital marketing on AWS
Yuta Imai
EC2のストレージどう使う? -Instance Storageを理解して高速IOを上手に活用!-
EC2のストレージどう使う? -Instance Storageを理解して高速IOを上手に活用!-
Yuta Imai
More from Yuta Imai
(20)
Node-RED on device to Apache NiFi on cloud, via SORACOM Canal, with no Internet
Node-RED on device to Apache NiFi on cloud, via SORACOM Canal, with no Internet
HDP2.5 Updates
HDP2.5 Updates
Deep Learning On Apache Spark
Deep Learning On Apache Spark
Hadoop in adtech
Hadoop in adtech
Hadoop/Spark セルフサービス系の事例まとめ
Hadoop/Spark セルフサービス系の事例まとめ
IoTアプリケーションで利用するApache NiFi
IoTアプリケーションで利用するApache NiFi
OLAP options on Hadoop
OLAP options on Hadoop
Apache ambari
Apache ambari
Spark at Scale
Spark at Scale
Dynamic Resource Allocation in Apache Spark
Dynamic Resource Allocation in Apache Spark
Apache Hiveの今とこれから - 2016
Apache Hiveの今とこれから - 2016
Hadoop最新事情とHortonworks Data Platform
Hadoop最新事情とHortonworks Data Platform
Benchmark and Metrics
Benchmark and Metrics
Hadoop and Kerberos
Hadoop and Kerberos
Spark Streaming + Amazon Kinesis
Spark Streaming + Amazon Kinesis
オンラインゲームの仕組みと工夫
オンラインゲームの仕組みと工夫
Amazon Machine Learning
Amazon Machine Learning
Global Gaming On AWS
Global Gaming On AWS
Digital marketing on AWS
Digital marketing on AWS
EC2のストレージどう使う? -Instance Storageを理解して高速IOを上手に活用!-
EC2のストレージどう使う? -Instance Storageを理解して高速IOを上手に活用!-
CloudFront経由でのCORS利用
1.
2.
はじめに • CloudFront経由でS3のCORS(Cross Origin
Resource Sharing)を利用しようと思って少し ハマったので、CORSの仕様自体 (http://www.w3.org/TR/cors/)から一度ちゃん と読んでまとめてみた。
3.
通常のCORSリクエスト リクエストにはOriginヘッダが必要!サーバー側の実装に依 存するが、仕様上ではOriginヘッダがあるときのみ、CORSリ クエストとして認識し、レスポンスのヘッダ内でAccess- Control-*を返す。
ヘッダ Origin: http://test-domain GETリクエスト WEB Browser サー バー レスポンス ヘッダ Access-Control-Allow-Origin: http://test-domain Access-Control-Allow-Methods: GET Access-Control-Max-Age: 3000 Access-Control-Allow-Credentials: true
4.
CORSレスポンス CORSのレスポンスには、ヘッダ内に以下のような項目が含 まれている。これらが含まれていないとCORSにはならな い。リクエストにOriginヘッダがなかったり、後述のpreflight リクエストに失敗したりするとこれらのヘッダはつかない。 •
Access-Control-Allow-Origin • Access-Control-Allow-Methods • Access-Control-Max-Age • Access-Control-Allow-Credentials 最低限、Access-Control-Allow-Originが含まれていればブラウ ザ側で解釈してくれる。(少なくともChromedでは) ex. Access-Control-Allow-Origin: http://test-domain
5.
カスタムヘッダ付きCORSリクエスト リクエスト内にX-hogeのようなカスタムヘッダが存在する場 合にはpreflightリクエストが発生する。OPTIONSメソッドで 利用可能なヘッダかどうかを確認する。
ヘッダ x-hogeが利用可 Access-Control-Request-Headers: x-hoge 能かどうかを聞 きに行く OPTIONSリクエスト(preflightリクエスト) レスポンス ヘッダ WEB Browser Access-Control-Allow-Headers: x-hoge サー バー GETリクエスト x-hogeは利用 OK!と返答 レスポンス
6.
S3のCORS S3はOPTIONSによるpreflightリクエストを正しく解釈する。 許可対象を*で設定した場合、リクエストがあるごとにリク エストに沿ったAllowed Headerを返す。
ヘッダ Access-Control-Request-Headers: origin, accept, x-hoge OPTIONSリクエスト ヘッダ レスポンス Access-Control-Allow-Headers: x-hoge Browser ヘッダ S3 Access-Control-Request-Headers: origin, accept, x-test OPTIONSリクエスト ヘッダ レスポンス Access-Control-Allow-Headers: x-test
7.
CloudFront + S3
通常のCORS 通常のリクエストなのでpreflightリクエストは飛ばないが、 CloudFrontからS3へのリクエストのところでいくつかのカス タムヘッダがつくので、そこで動作がおかしくなるケースが ある。 ヘッダ ヘッダ Origin: http://test-domain Origin: http://test-domain X-Amz-Cf-Id: xxxx X-Forwarded-For: xxx GETリクエスト GETリクエスト Browser CF S3 たとえば今回のケースでは ここで、preflightによる確 X-Amz-Cf-Idなどをハード 認なしで飛んできたカスタ コーディング的にS3の ムヘッダがあるのでCORS Allowed Headerに設定する とは認識されず、Access- と動くこともあるが、動い Control-*ヘッダを返せない たり動かなかったり。 ことがある。
8.
CloudFront + S3
カスタムヘッダ付きCORS Cloud FrontがOPTIONSメソッドを禁止しているので、 preflightに失敗する。 ヘッダ Access-Control-Request-Headers: origin, accept, x-hoge OPTIONSリクエスト Browser 403 Forbidden CF S3
9.
CloudFront + EC2でCORS EC2上にApache等を起動するケース。強制的にAccess- Control-*ヘッダ群を返してやればうまく動く。
ヘッダ ヘッダ Origin: http://test-domain Origin: http://test-domain X-Amz-Cf-Id: xxxx X-Forwarded-For: xxx GETリクエスト GETリクエスト Browser CF EC2 レスポンス レスポンス ヘッダ Access-Control-Allow-Origin: http://test-domain Access-Control-Allow-Methods: GET Access-Control-Max-Age: 3000 Access-Control-Allow-Credentials: true
10.
まとめ • 現状、CloudFront経由でS3のCORSはうまく
動かないケースがある。これはCORSの preflightリクエストの仕様上しようがないお 話。 • ワークアラウンドとしては、EC2にWEBサー バーを立てて、強制的にAccess-Control- Allow-Originヘッダ等を返してあげるのがい いと思う。