L@EとCF2が不要に？！CloudFront単体でレスポンスヘッダーが設定できるようになりました | DevelopersIO
CX事業本部@大阪の岩田です。CloudFrontに待望のアップデートがあり、CloudFront単体でもレスポンスヘッダーが設定できるようになりました！ これまではCloudFront単体でレスポンスヘッダーを設定することができませんでした。S3 & CloudFrontの構成でSPAを配信するのは非常に一般的な構成ですが、この構成でそのまま脆弱性診断を受けると、セキュリティ関連のヘッダが設定されていないと指摘されるのも「あるある」でした。Lambda@Edge(L@E)やCloudFront Function(CF2)を介入させればオリジンレスポンスやビュワーレスポンスが加工できるので、これまではL@EやCF2でレスポンスヘッダを追加付与するという対応がよく採用されていました。 が、静的なレスポンスヘッダ付与のためにいちいちコードの実行が必要になるというのは、どうも無駄が多いように感じ
[AWS CDK] API Gateway(REST API)のCORSの動作を確認してみた | DevelopersIO
こんにちは、CX事業本部 IoT事業部の若槻です。 今回は、AWS CDKで実装したAPI Gateway(REST API)のCORS（Cross-origin resource sharing）の動作を確認してみました。 REST APIにおけるCORS 基本的に下記ドキュメントに記載の内容です。 REST API リソースの CORS を有効にする - Amazon API Gateway Cross-origin resource sharing(CORS)とは、ブラウザで実行されているスクリプトから開始されるクロスオリジンHTTPリクエストを制限するブラウザのセキュリティ機能です。 クロスオリジンリクエストは、シンプルなリクエストとシンプルでないリクエストの2種類に分けられます。 以下の条件がすべて該当する場合はシンプルなリクエストとなります。 GET、HEAD、およびPOSTの
![[AWS CDK] API Gateway(REST API)のCORSの動作を確認してみた | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/99c41667622f490e8ae3439387d88dc411a3b9b7/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F05%2Famazon-api-gateway.png)
CORS とか Preflight とかよくわかんないよな
@aki_yok さんの DRF本 レビューをしていて Preflight について記述があったんですが、 自分が しっかり理解できていないような気がしたので CORS を絡めて簡単にまとめてみました。 昔話 👹はるか昔 🐉 XMLHttpRequest (以降 XHR という) により私達は非同期通信を手に入れました。 XMLHttpRequest - Web API | MDNXMLHttpRequest (XHR) オブジェクトは、サーバーと対話するために使用されます。ページ全体を更新する必要なしに、データを受け取ることができます。これでユーザーの作業を中断させることなく、ウェブページの一部を更新することができます。https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest しかし、この便利機能は その強力さ故に 同一
CORS: OPTIONSリクエスト（preflight request）を避ける - Qiita
ajaxなど、ブラウザ経由でGET, POST, DELETEリクエストを投げると、実際のリクエストが走る前にOPTIONSリクエストが送信されることがあります。 一度しかリクエストを送信していなくても、実際はOPTIONSとGETなど、２回リクエストが走っています。 APIによっては、OPTIONSリクエストを受け付けないため、Response to preflight request doesn't pass access control checkのようなエラーが返ってくる場合があります。このOPTIONSリクエストはCORSプリフライト（preflight requests）と呼ばれていて、これが通らないと、実際のGET, POST, DELETEなどのリクエストは送信されません。 このプリフライト・リクエストとは何なのか、OPTIONSリクエストを回避する方法はあるのか調べてみま
クロスドメイン制約を回避するChromeショートカットを作る - Qiita
No 'Access-Control-Allow-Origin' header is present on the requested resource. のエラーのせいでドメインを跨いだファイル読み込みの検証ができなかったので、 Chrome起動オプションによる無効化をショートカットで作成してみました。 まずはChromeのショートカットを普通に作成し、 [プロパティ]から、「リンク先」に--disable-web-security と --user-data-dirを追加する。 "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\Users\ユーザ名\Local\Google\Chrome\User Data" ショートカット作成
CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信の傾向と対策 | DevelopersIO
CORS(Cross-Origin Resource Sharing)って何？ CORS(Cross-Origin Resource Sharing)は、その名の通り、ブラウザがオリジン(HTMLを読み込んだサーバのこと)以外のサーバからデータを取得する仕組みです。各社のブラウザには、クロスドメイン通信を拒否する仕組みが実装されています。これは、クロスサイトスクリプティングを防止するためです。Aというサイトに訪問したのに、Bというサイトに向けて個人情報を送っていたというのは困りますよね。例えば、オリジンから読み込んだHTML内のJavaScriptでJSONデータを読み込むとしましょう。JSONデータが同じサーバにあれば普通に読み込めますが、別のサーバにある場合は読み込めません。まぁ実際のところはJSONPという仕組みを使ってできちゃったりしますが、抜け道的なやり方で使われていました。CO
CORSでハマったことまとめ - pixiv inside [archive]
こちらは ピクシブ株式会社 Advent Calendar 2014 の12/16の記事です。 こんにちは、エンジニアの@dnskimoです。 先日、はじめてCORSを実装する機会があったので、覚書がてらまとめておきたいと思います。 CORSとは Cross-origin resource sharingの略です。 読み方は「コルス」でいいんでしょうか？ Same-Origin Policyに弾かれずに、異なるドメイン間でリソースを共有する仕組みです。 2014年1月にW3C勧告になり、JSONPに替わる方法として徐々に普及してきているようです（要出典）。 アクセスコントロールの仕様も定義されているので、特定のサイトからのみ利用可能なAPIを作る際などに便利です。 JSONPのような「裏ワザ」的な方法ではないところも個人的に好みです。 詳しいことはネット上に素晴らしい記事がたくさんあるので
![CORSでハマったことまとめ - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/5f6a93da881857fccf6161c1a2f6935458bfbb97/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fd%2Fdevpixiv%2F20141216%2F20141216151227.jpg)
CORSまとめ - Qiita
今更ですが、CORS (Cross-Origin Resource Sharing)を色々試していたら、思っていた以上に色々パターンがあることに気づいたので、改めてその扱い方についてまとめてみました。 そもそも 現在のWebブラウザでは、あるWebサイトが持つ情報が別の悪意あるWebサイトに悪用されるのを防ぐために、Same-Origin Policy(日本語では同一生成元ポリシー)が適用されます。 例えば、あるWebサイト https://guiltysite.com をブラウザで表示している時に、このWebページからXMLHttpRequest(以下、XHR)やFetch APIで別のWebサイト https://innocentsite.net からHTTP(S)でデータを読み込もうとすると、エラーになる、というわけです。 しかし、アクセス元が悪意あるWebサイトならともかく、データ
Cognito IDプールを使用したお問い合わせフォームの作成(認証されないアクセス) | DevelopersIO
Cognito IDプールをお問い合わせフォームを作りながら使いながら理解する｡パブリックプロバイダーは使用せず認証されない場合の動作のみを対象としています｡ はじめに おはようございます､加藤です｡気づけば入社して8ヶ月目でした､最近時間の流れが早いです｡ 今回は､CognitoのIDプールを使用した一時的な認証情報の取得とサンプルコードを紹介します｡ パブリックログインプロバイダー（Facebook、Google+、Login with Amazon など）は使用しません､認証されていないアクセスが対象です｡ それと今回はCognito IDプールのみの内容ですユーザープールは一切使用しません(自分は勉強する時にかなり混乱しました...)｡ 認証されていないアクセスのフロー 最初にCognitoで認証されていないアクセスのフローを説明します｡ Deviceが最終的に欲しいものはSTSに
CloudFront と API Gateway で SPA の CORS 問題をイイ感じに解決する | DevelopersIO
渡辺です。 弊社ではお客様の悩みや問題を解決するアンサーブログという文化がありますが、新しく「ドキュメントはブログ」というのを試しています。 現在、 Developers.IO Cafe はSPA（Single Page Application）で構成されています。 SPAとは、単一のウェブページ上でJavaScriptによるルーティングの処理を行うWebアプリケーションです。 一般的に、SPAで内のコンテンツは、APIを通して取得します。 この時、悩ましいのが CORS(Cross-Origin Resource Sharing) です。 本エントリーでは、カフェのSPAでとったCORS対策について解説します。 CORSとは？ CORSとは、簡単に言うと、 ウェブサイトが異なるドメインに対するAPIリクエストをブロック する仕組みです。 あるウェブサイトを開いている時、まったく関係ない別
CORS関連、これだけ知っとけばまぁ大丈夫 - Qiita
はじめに APIを作っているとほぼほぼCORSに関する実装を行うことになるが、登場してくるリクエストヘッダやレスポンスヘッダの名前が少々紛らわしくて覚えづらい。 そこでCORSとは何か？から始まって一連のやりとり、及び必要なリクエストヘッダ・レスポンスヘッダの名前や設定値についてメモを取ることとする。 XHRでは、異なるドメインに対してアクセスを行い、レスポンスデータを読み込むことができない（同一生成元ポリシー）。生成元はURI中のスキーム・ホスト・ポート番号の組み合わせで判断される。 http://example.com と http://example.com:8080 は異なる生成元となる。 JSONPという手法もあるが、これはある種ハックでありセキュリティ上の問題も多い。 そこで異なる生成元にアクセスするための手法としてクロスオリジンリソース共有（CORS）という仕様が策定された（
【小ネタ】Visual Studio CodeのDebugger for ChromeでCORSを無効にする【備忘録】 | DevelopersIO
せーのでございます。 CORSを無効にしながらデバッグするのに意外と手間がかかったので、忘れないように書いておきます。 何をしたいのか Visual Studio Code(VSCode)でJavaScriptやTypeScriptの開発をする際にブラウザを使ったデバッグをしたい時があります。 そんな際に「Debugger for Chrome」という拡張機能を使うと、Chromeブラウザを使ってデバッグができます。 一方、Angularやreactなどのフロントエンドスクリプトをデバッグする際にはローカルホストでサイトを立ち上げますが、サーバーサイドAPIからデータを取得する際にCORSに引っかかってしまうため、CORSを無効にする必要があります。 ChromeにはCORS Unblockなどのextensionがあり、それをインストールして有効にしておけばCORSを回避できる、、、と思
CORS (Cross-Origin Resource Sharing) ってなに？
先日CORS(Cross-Origin Resource Sharing)でハマったので、今更だけど復習。Same Origin Policy(同一オリジンポリシー)について基本的なところから調べ直しました。 オリジンとは オリジン ＝ スキーム、ホスト、ポートの組み合わせ (※スキームによって微妙に違うこともある) http://www.exsample.com:80/index.htmlのURLを例にすると スキーム ＝ http:// ホスト ＝ www.exsample.com ポート ＝ 80 (ポート番号「80」は省略可なので普段見かけることは少ない) 同一オリジンポリシーとは TL;DR セキュリティを守るための重要な仕組み あるページを開いたときに、関連するリソース(JavaScript等)を同じオリジンからしか取得しない そうしないと個人情報の保護も外部からの攻撃にもガバ
CORS(Cross-Origin Resource Sharing)について整理してみた | DevelopersIO
ブラウザからAmazon S3に直接ファイルをアップロードしたい 先日、Amazon S3にファイルをアップロードするWebアプリを作ろうとして色々調べていたところ、S3にCORSという仕様のクロスドメインアクセスの設定をすることによって、ブラウザから直接S3にアップロードをする方法にたどり着きました。ただ、この方法を使うにあたってはCORSというクロスドメインアクセスの仕様をきちんと理解しておいた方が良さそうでしたので、まずはCORSについて自分なりに整理してみました。 なお、弊社の横田がCORSとS3についての記事を以前書いていますので、S3のCORSサポートに関する概要を知りたい方はそちらをご覧下さい。 CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信の傾向と対策 CORS ブラウザでAjax通信を行う際には、同一生成元ポリシー(Same
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
