HTML5手習い

Same Origin PolicyとCORS

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ブラウザのセキュリティモデルであるSame Origin Policyの概念について学びます。CORSを利用してSame Origin Policyを回避して、異なるドメイン間でリソースを共有する方法についても説明します。
講師:
08:55

字幕

このレッスンではブラウザの セキュリティモデルの基本である Same-origin policy と クロスドメインでリソースを共有する為の メカニズムである CORS について学びます レッスンを始める前にアセットから template.html と gomoku.html を ホームにコピーしておいて下さい また本レッスンでは XMLHttpRequest を使いますので HTTP サーバーを立ち上げておきましょう ターミナルを起動してホームディレクトリで http-server . 「. 」はカレントディレクトリを意味します そして実行できたら HTML に アクセスしてみましょう localhost:8080 の template.html アクセスできました Same-origin ポリシーとは あるサービスから取得したリソースは 同じサービスの提供するリソースのみ アクセスできるというポリシーのことです 具体的には URL のプロトコル ホスト ポート番号が同じリソースは Same-origin であるとみなされます こちらの URL で http という部分がプロトコル example.com という部分がホスト 80 がポートになります Same-origin でない例として 次のようなものが挙げられます 例えば1番上の例ですと example.com という メインのドメインの部分は同じなのですが サブドメインが sub1 と sub2 で 異なっている為 ホストが異なります この為 Same-origin ではありません 2番目の例はホスト名の部分は sub1.example.com で同じですが ポート番号がデフォルトの 80 と 8080 で異なる為 Same-origin ではありません 3番目の例は ホスト名と ポート番号は同じなのですが プロトコルが http と https で異なる為 これも Same-origin ではありません もしブラウザに Same-origin ポリシーが なかったらどうなるでしょうか 例えば あなたのサービスが http://my-service.com/ という URL に配置されているとします そして あなたのサービスは 認証システムを備えており あなたのユーザーは既にこの my-service.com に アクセスしてログイン済みで このサービスのクッキーをブラウザ内に 保存済みであるとします この為 あなたのユーザーは 次回以降こちらの my service.com にアクセスした時にも 再度認証などをすることなく ログイン済みの状態を保持することが 可能となっています 一方で http://danger-site.com/ という 悪意のあるサイトがあったとしましょう こちらのサイトの中にある HTML に XMLHttpRequest で あなたのサイトに対する アクセスがあるとします するとユーザーがこちらの danger-site.com を訪れた際に ユーザーはあなたのサイトのクッキーを 既に保持済みである為 こちらのサイトから不正なアクセスが あなたのサイトに対して できてしまいます XMLHttpRequest で リクエストを送信した際に Cookie が自動的に 喪失されてしまう為です しかしながら 現実の世界では ブラウザには Same-origin ポリシーがありますので このようなことは起きません 安心して下さい Same-origin ポリシーは安全の為に 非常に重要なのですが 逆に便利なサービスを作る上で 障害になってしまう場合もあります 例えば何らかの web API を 世界中に対して公開したいときに Same-origin ポリシーが 厳密に適用されてしまったら そのサイト上にある HTML からしか あなたの API を使用できない ことになってしまいます API を世界中に公開することが できないのです こういった場合にクロスドメインでの アクセスを許可する為に CORS というメカニズムが ブラウザには実装されています サーバーからの HTTP の レスポンスヘッダで Access-Control-Allow-Origin というものが付加されていれば このリソースはクロスドメインのアクセスが 許可されているとみなされるのです ではクロスドメインアクセスの実験を 実際に行ってみましょう まずは XMLHttpRequest で 画像を取得してみます XMLHttpRequest の インスタンスを作りましょう そしてインスタンスに対して EventListener を設定します リクエストできたことを確認する為に ログを出しましょう そしてアクセスするリソースを設定します get メソッドで gomoku.jpg 3番目は必ず true です そして send を送ります これでロードしてみましょう JavaScript コンソールを開きます Mac の方は Command + Option + I Windows の方は Ctrl + Shift + I です EventListener の呼び出し方が 間違っていました 1番目のパラメータに イベントの種別を入れる必要がありますね これで再度ロードしてみると HTTP でのアクセスができました ログが出力されています このケースでは Same-origin での アクセスとなるので 当然ながら画像に対するアクセスはできます ではクロスドメインでの アクセスをしてみましょう そのために もう1つ http サーバーを コンソールから立ち上げてみます ホームディレクトリで http-server. これで結構です 先程 http サーバーを 起動済みである為 8080 は使われています その為 自動的に別のポート番号で http サーバーが立ち上がりました 8081 のポート番号になっています ではこちらのサーバーから 画像のロードをトライしてみましょう リソースの URL を変更します localhost :8081 の gomoku さて これでロードをしてみましょう どうなるでしょうか このように XMLHttpRequest が Same-origin ポリシーに 違反するために アクセスできなかった というログが出ました ポート番号がこの HTML が読み込まれた ポート番号である 8080 と 8081 で異なっているために Same-origin ではないとみなされたのです それでは今度は サーバーのレスポンスに Access-Control-Allow-Origin ヘッダを 付与して 再度実行してみましょう サーバーに Access-Control-Allow-Origin ヘッダを 付与する為には 1度サーバーを停止してから サーバーを再度起動して その際にオプションとして --cors というオプションをつけます そして再度サーバーを起動してみます この状態でブラウザをリロードしてみましょう このように今度はアクセスが成功しました レスポンスも見てみましょう Network タブを開いて 画像の方のレスポンスを見てみます gomoku.jpg をクリックして下さい そして Headers のタブの Response Headers を見ると このように 確かに Access-Control-Allow-Origin が ついています このヘッダがついている為に 今度はアクセスができたのです このレッスンではブラウザの セキュリティの基本である Same-origin ポリシーと CORS について説明しました

HTML5手習い

このコースではHTML5 APIを中心に、HTML5でのプログラミングについて学びます。HTTPや文字コード、バイナリデータやアニメーションの原理など実際のアプリケーション開発で必要となる基本的な知識を学びます。HTML5 Canvasを中心として、Web APIとの通信やWebフォントなどWebプログラミングで必要な技術を習得します。

6時間01分 (44 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年04月22日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。