こちらは ピクシブ株式会社 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/https%3A%2F%2Ffanyv88.com%3A443%2Fhttp%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fd%2Fdevpixiv%2F20141216%2F20141216151227.jpg)
前回「秋はまだですか」と書きましたが、その日のうちに気温下がったｗ これでちょっと過ごしやすくなったかも。…薄着で寝ててちょっと風邪引きそうになったのは内緒(・ω・) 本題。 クロスドメインでの非同期通信(XMLHttpRequest Level2)をGoogle App Engineで実装したのでメモ。はまったポイントもいくつか書いておきます。 特にハマったのは出力ヘッダ周り。 Access-Control-Allow-Origin これはあちこちのサイトに書かれてますね。このヘッダを「*」で出力してあげると他ドメインからの通信を受け付けるようになります。・・・が、これだけじゃダメなんです。 Access-Control-Allow-Methods こいつを指定してあげないとサーバーが受け付けてくれません。GETならGET、POSTならPOST・・・と指定してあげないといけません。これは
S3ってなんじゃ？(CORS対応)
ごぶさたしております。 S3がCORS対応になったので、少し触れてみたいと思います。 CORSはCrossDomainResourceSharingの略です。 JSONPなどの特殊なケースを除いて通常ajaxなどではクロスドメイン通信は認められていません。 CORSは、通信先のサーバーで条件付きで許可をすることでクロスドメインアクセスを可能にするための仕組みで、W3Cで策定されいてる仕様です。モダンブラウザであればほぼサポートされているかと思います。 CORSではブラウザがクロスドメインのサーバーにリクエストする際に、事前にそのサーバーがこれから行おうとしているリクエストを許可しているかどうかをHTTPメソッドのひとつであるOPTIONSメソッドといくつかのHTTPリクエストヘッダを用いて問い合わせます。これをPreflightリクエストと言います。 そしてそのレスポンスをもってブラウザは
2010/12/10 コース：元祖こってり 「元祖こってり」記事はネットエージェント旧ブログ[netagent-blog.jp]に掲載されていた記事であり、現在ネットエージェントに在籍していないライターの記事も含みます。 IE8+jQueryによるクロスドメイン通信とXDomainRequestラッパーの作成 こんにちは、ネットエージェント株式会社、研究開発部の長谷川です。 さっそくですが、みなさんは「Advent Calendar」をご存じでしょうか？ Advent Calendar と言えば、一般的には、クリスマス（12月25日）までの残り日数をカウントダウンするカレンダーを思い浮かべるかもしれませんが、ここで紹介する Advent Calendar とは、様々な業界、技術方面で活躍されているプログラマ有志が、毎日交代で1つずつ技術的なトピックスを紹介する技術系Webイベントのことです
クロスドメイン制限の回避について 今まではXHR(XmlHttpRequest)の仕様によりJSを読み込んでいるHTMLファイルがあるサーバから異なるドメインサーバへのAjaxリクエストが制限されていました。Same Origin Policyと呼ばれているものです。Same Origin Policyの役割としては悪意のあるscriptが個人情報等を他のサイトに転送する事を防ぐためです。このセキリティ制限を回避するために多くの人が代表的なJSONP(JSON with Padding)を利用してサーバサイドでクライアントのコールバック関数をechoしてクライアント側で実行されることにより、クロスドメイン間のAjax通信をそれっぽく動くように対応していたと思います。 JSONPについては以前記事を書いたので宜しければ参照してください。20秒で理解するJSONP - Yuta.Kikuchi
Ajaxでクロスドメイン通信について調べたのでまとめ。 シンプルな例 client var xhr = new XMLHttpRequest(); var url = 'http://example.com/xhr-response.php'; xhr.open('GET', url, true); xhr.send(); server <?php header('Access-Control-Allow-Origin: *'); echo "ok"; Access-Control-Allow-Origin: *を付けてレスポンスすると、エラーにならず結果を受け取れる。 クッキー付きの送信 client var xhr = new XMLHttpRequest(); var url = 'http://example.com/xhr-response.php'; xhr.withCrede
なぜ通常のXMLHttpRequestにはクロスドメイン制約があるのに、JSONPではクロスドメインでリクエストを送信できるのか？不思議に感じたので、ちょっと調べてみた。 クロスドメイン制約は「ブラウザ上で実行されるJavaScriptは同じドメインにしかリクエストの送信やクッキーの編集を行えない」という制限である。 なぜこのような制限が必要になるのか。クロスドメイン制約がなかったらどうなるかを思考実験してみよう。ブラウザ上では、いくつものサイトからダウンロードしてきたJavaScriptが同時に実行されることは珍しくない。また、悪意のあるページにアクセスしてしまい、悪意あるJavaScriptを実行してしまうことも、十分に起こり得る話である。間違えて変なページにアクセスしたら致命的な問題が起きました、ではまずいので、ブラウザではJavaScriptができる事にかなりの制限を与えている。X
XSSにCSRFにSQLインジェクションにディレクトリトラバーサル……Webアプリケーションのプログラマが知っておくべき脆弱性はいっぱいあります。そこで本連載では、そのようなメジャーなもの“以外”も掘り下げていきます （編集部） JSONPだって、セキュリティを気にしてほしい 皆さんこんにちは、はせがわようすけです。今回は、JSONPを使用する場合のセキュリティについて解説しましょう。 JSONPとは、JSON with Paddingの名称が示しているとおり、JSON形式のデータにコールバック関数の呼び出しのためのコードを付加することで、クロスドメインでデータの受け渡しを実現するためのデータ形式です。JavaScriptからクロスドメインでのデータが簡単に扱えることなどを理由に、多数のWebアプリケーションでAPIの一部としてJSONP形式でデータの提供が行われています。 具体的な例を見
http://ss-o.net/json/ 以下に対して、.htaccessで Header append Access-Control-Allow-Origin: *という指定をして、ヘッダーにAccess-Control-Allow-Originをつけているので、(*はすべてのドメインからのリクエストを許可) http://ss-o.net/json/wedataAutoPagerize.json http://ss-o.net/json/wedataLDRize.json などのファイルについてはFirefox3.5、Safari4、Google Chrome 2、IE8*1などのブラウザではクロスドメインでXMLHttpRequestを投げることができます。 サンプルコード javascript:(function(){ var xhr=window.XDomainRequest?
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
