業務改善の中でChromeExtensionを作成中に、API GatewayのCORS対応をしたのでその内容をご紹介します。 CORSとは? CORSとはCross Origin Resource Sharingのことで、とあるWebアプリケーションから、そのアプリケーションとは異なるドメインにリクエストを行うときの取り決めです。 今回は、ユーザーが表示しているWebページ(google.com)から自分が作成したAPI(xxx.execute-api.ap-northeast-1.amazonaws.com)を叩く、というようなChromeExtensionを開発していました。 このケースの場合、WebページのドメインとAPIのドメインは異なるのでCORS対応を行わない場合には、ブラウザによってレスポンスが捨てられます。 こんなときは、アクセスされる側(今回のケースではAPI Gate
api.tf @ M8�U ��L8�U resource "aws_api_gateway_rest_api" "myApi" { name = "myApi-${var.env}" description = "My awesome API (${var.env} environment)" } resource "aws_api_gateway_deployment" "myApi" { depends_on = [ "aws_api_gateway_integration.myApi_myEndpoint_post", "aws_api_gateway_integration_response.myApi_myEndpoint_post", "aws_api_gateway_integration_response.myApi_myEndpoint_post_400", "aws_
今更ですが、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サイトならともかく、データ
ブラウザからAmazon S3に直接ファイルをアップロードしたい 先日、Amazon S3にファイルをアップロードするWebアプリを作ろうとして色々調べていたところ、S3にCORSという仕様のクロスドメインアクセスの設定をすることによって、ブラウザから直接S3にアップロードをする方法にたどり着きました。ただ、この方法を使うにあたってはCORSというクロスドメインアクセスの仕様をきちんと理解しておいた方が良さそうでしたので、まずはCORSについて自分なりに整理してみました。 なお、弊社の横田がCORSとS3についての記事を以前書いていますので、S3のCORSサポートに関する概要を知りたい方はそちらをご覧下さい。 CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信の傾向と対策 CORS ブラウザでAjax通信を行う際には、同一生成元ポリシー(Same
const express = require('express'); const app = express(); const port = 4000; // CORSを許可する app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); }); app.get('/', (req, res) => { res.send('hello'); }); app.listen(port); 何をしているか ご存知の通り、セキュリティの観点から、オリジン(htmlが置かれたサーバー)以外のサ
タイトルは釣り、かつ、自分のための備忘録です。 マイクロサービスアーキテクチャでサービスを構築すると、APIサーバをサービスごとに立てるわけですが、 ブラウザ上のJSエンジンからAPIサーバを叩く時に避けて通れないのが、Same-Origin Policy(同一生成元ポリシー)によるCORS (Cross-Origin Resource Sharing)制限です。 これを回避するには、APIサーバ側でAccess-Control-*ヘッダを適切に返す必要がありますが、どう設定するべきかの情報が意外と少ないので(自分的)これが決定版! という設定を考えてみました。 結論 nginxの場合の設定例です。 server { listen 80; server_name site.localhost; charset utf-8; root /var/www/app/public; locatio
Cross−Origin Resource Sharing (CORS) は、特定のドメインにロードされたクライアントウェブアプリケーションが異なるドメイン内のリソースと通信する方法を定義します。Amazon S3 の CORS のサポートによって、Amazon S3 でリッチなクライアント側ウェブアプリケーションを構築し、Amazon S3 リソースへのクロスオリジンアクセスを選択的に許可できます。 このセクションでは、CORS の概要を示します。サブトピックでは、Amazon S3 コンソールを使用するか、Amazon S3 REST API や AWS SDK を使用して、プログラムによって CORS を有効にする方法について説明します。 Cross−Origin Resource Sharing: ユースケースのシナリオ CORS のユースケースの例を以下に示します。 シナリオ 1
基本 普通にcookie使えばいいと思います。 loginリクエストもajaxで投げればcookie返ってくるので、何も考えることないかなと。 Cookie 動作イメージは以下の形です。 == サーバ → UA == Set-Cookie: SID=31d4d96e407aad42; Path=/; Domain=example.com == UA → サーバ == Cookie: SID=31d4d96e407aad42 (from https://triple-underscore.github.io/RFC6265-ja.html) ブラウザの状態管理のためのもの。 もちろん主要ブラウザはどこも付いてます。 railsでもplayでもとりあえずこれでセッション管理されています。 secure属性があると、httpsのときだけやりとりされます。 HttpOnly属性があると、jsから読
Single Page Apps are ruling the world and AngularJS is leading the charge. But many of the lessons we learned in the Web 2.0 era no longer apply, and few are as drastically different as authentication. Depending on where you build and release your AngularJS app, there are different ways to handle authentication and I hope this post clears some of that up. CORS CORS is an oft-misunderstood feature
24 décembre 2013 Successful CORS configuration with AngularJS 1.2 and WordPress Some thoughts on a successful CORS (Cross Origin Request Sharing) setup while interrogating a remote REST API on Wordpress with AngularJS 1.2. Context I'm developing an hybrid mobile app with AppGyver Steroids - based on PhoneGap - and a WordPress backend. The architecture is the usual Web stuff: make XHR from the mobi
Cross-origin resource sharing (CORS) defines a way for client web applications that are loaded in one domain to interact with resources in a different domain. With CORS support, you can build rich client-side web applications with Amazon S3 and selectively allow cross-origin access to your Amazon S3 resources. This section provides an overview of CORS. The subtopics describe how you can enable COR
今年に入ってから書類のやり取りで封筒の宛名書きが大幅に増え、手書きに限界を感じ、テプラGrand WR1000を導入したのは良かったものの、ドライバーがYosemite対応されておらず、ラベルを作成するためだけに、都度VirtualBoxでWindowsを立ち上げている代表の国本です。 Internet Explorer(通称IE)。Web業界に携わる人間であれば、このIEに悩まされることは度々あるかと思いますが。今回はAngularJSでIE9のCORS(Cross-Origin Resource Sharing)対応を行う方法を簡単に紹介しようと思います。 IE9でのCORSについて 周知の通り、IE9ではXMLHttpRequestによるCORSをサポートしておらず、IE9でAjax通信を行い、かつ異なるドメインのリソースにアクセスしたい場合(いわゆるクロスドメイン通信)、IE独自の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く