同一オリジンポリシーを理解する。API同一オリジンポリシーを理解する。CORSエラーの原因と回避方法!同一オリジンポリシーを理解する。経験者向けこの記事では、同一オリジンポリシーとCORSについて初心者向けに分かりやすく説明する。CORSエラーはウェブアプリケーションの制作に携わっている人ならば一度は経験する厄介な存在。Webアプリの開発を円滑におこなたいのならば、同一オリジンポリシーとCORSを正しく理解して、その回避策を知っていることが重要なポイントだ。いままで同一オリジンポリシーやCORSについて「なんとなく分かる」で済ませてきた人は、この記事を読んでもう一度正しく理解できるように挑戦してほしい。SSLサーバ証明書を追加する同一オリジンポリシーとは?同一オリジンポリシーの概念をあらわした図まずは同一オリジンポリシー(同一生成元ポリシー・同一源泉ポリシーとも呼ばれる。)とは何かについて確認しよう。同一オリジンポリシーとは、ブラウザ上に表示されているリンクやボタンから、外部のAPIサーバーへのHTTPリクエストを制限するための指針。インターネットブラウザは同一オリジンポリシーに基づき、HTTPリクエストが許可されているかどうかをAPIサーバーへ確認する仕組みを備えている。セキュリティのリスク同一オリジンポリシーは以下のようなネットワーク上の攻撃からユーザーを守る役割を果たしている。クロスサイト・スクリプティング(XSS)ユーザーの個人情報などを盗み取るための手法。悪意のあるサイトへと誘導するスクリプトをウェブサイトに仕掛けることにより行われる。入力フォームの脆弱性を突く形でおこなわれる攻撃。クロスサイト・リクエストフォージェリ(CSRF)メール内やウェブサイト上のURLをクリックさせてユーザーを悪意のあるサイトへと誘導し、ターゲットとなるサイトを攻撃させる手法。攻撃者はセッションの脆弱性を利用する。「オリジン」の定義について確認しよう。オリジンはドメインなどの用語と似たウェブサイトの識別に使われる概念だが、以下の3つの要素を含めて同一とみなされる。いわゆるドメインの事を指す。サブドメインは識別されるが、サブディレクトリは識別しない。httpもしくはhttpsを指す。ポートはURLの後に付加する番号で通信先となるソフトウェアの識別に使う。異なるオリジンの例http://website.com/app1https://website.com/app2http://www.website.comhttp://app.website.comhttp://website.com:8080CORSとは?CORS(クロスオリジンリソース共有)とは、オリジンを跨いだリソースの共有という意味で、同一オリジンポリシーにより制限されている。制限を破るかたちでのHTTPリクエストはエラーとなる。以下はCORSエラーの典型的なエラーメッセージだ。ブラウザに実装されているセキュリティのためのメカニズムであることを理解しよう。CORSの制限の対象CORSの制限の対象となるのは以下のような行動だ。HTTPリクエスト異なるオリジン間でのHTTPリクエストは原則的に禁止されている。許可する場合はサーバ-側のAccess-Control-Allow-Originヘッダにリクエスト元となるURLを記述する。iFrameの操作スクリプトを使った異なるオリジンのiFrameに対するwindowなどの操作は禁止されている。関数の使用が制限される。プリフライトリクエストブラウザはHTTPリクエストをおこなう際にAPIに対して、このURLがそのリクエストをおこなう権限を備えているかの事前におこなっている。この確認のためのリクエストはプリフライトリクエストと呼ばれ、その他のリクエストは単純リクエストなどと呼ばれる。OPTIONSと表示されている。CORSエラーの原因と回避方法CORSエラーの原因とその回避方法を確認していこう。前章でも説明したようにCORSエラーは許可されていない異なるオリジン間でのリクエストをおこなった際に発生する。SSLサーバ証明書が登録されていないためにCORSエラーが発生することもある。バックエンドサーバーをローカル環境で起動している場合はクライアントの証明書が登録されているかを確認しよう。CORSエラーの回避方法CORSエラーを回避していく方法について確認しよう。Chromeのプラグインの中には、CORSエラーを回避するためのプラグインもある。著者が使ってみたところ、問題が解決したことは無く、もしプラグインの効果があったとしてもデプロイした後にエラーが発生する危険もあるので、使用することはお勧めしない。Access-Control-Allow-OriginヘッダにURLを追加するもしアクセスするAPIサーバーが自社で開発したものであるなら、サーバ-のAccess-Control-Allow-OriginヘッダにURLを追加するのがもっとも良い方法だろう。バックエンドシステムをローカルで起動しているなら自分でURLを追加しサーバーを再起動させればいいだろう。ブラウザとAPIの間にミドルウェアを挟むもしアクセスしたいAPIサーバーが自社のもので無い場合は、ウェブサイトとAPIサーバーの間にミドルウェアを挟むという方法も存在する。npmjs.com/package/http-proxy-middlewareブラウザでURLを開きリスクを許容するアクセスしたいAPIサーバーが危険性のあるサイトだとブラウザに認識されているためにCORSエラーが発生することもある。この場合、目的のAPIサーバーをそのブラウザの別のタブで開き「危険を承知のうえでアクセスする」という旨のボタンをクリックするとリクエストが正常にいくパターンもある。SSLサーバ証明書を追加するウェブアプリケーションをローカル環境で起動している場合は、そのクライアントの証明書が登録されていないためにCORSエラーが発生することもある。certificate)を発行してPCのレジストリに登録する。執筆者:久野嘉樹ドイツ・ベルリン在住のフロントエンド・エンジニア。ドイツにてプログラマのための職業訓練プログラム(インターン2社を含む)を終了したのち、医療関係のソフトウェア会社にてフルスタック・エンジニアとして、様々な開発現場に参加する。現在はドイツの大手SIerにてシニアデベロッパーとして有名企業を顧客とする大規模開発に従事する。Java・TypeScriptをメインに業務管理ソフト・ウェブアプリケーションやAndroidアプリなどの開発経験を持つ。現在はSPA(シングルページアプリケーション)のスペシャリストとしてAngularをメインにフロントエンドの開発に携わる。2009年よりドイツに在住。ドイツ語能力はC1レベル。高機能モニタリングツールSentryを徹底解説!Recat・Angularアプリへの導入方法。2021.12.04この記事では、高機能なモニタリングツールSentryについてその概要とアプリへの導入方法を説明する。App)についてその特徴や導入の利点などについて分かりやすくまとめてみた。Workerとは何か?仕組みと出来る事をわかりやすく解説。Workerについてその仕組みや出来ることを中心に解説したいと思う。【2023年】TypeScriptのおすすめ書籍5冊!レベル別に入門書からプロ向けまで紹介。2023.05.14【2023年】JavaScriptのおすすめ本7選!入門者・初心者向けにセレクト。2023.03.04HTMLテーブルで表をデザインする!セルの結合・枠線を付ける・レスポンシブ対応など。2023.01.21CSSグリッドレイアウトを極める!基本的な使い方とプロパティの一覧。2023.01.07【2023年】人気のヘッドレスCMSを徹底比較!Contentful・Strapi・Hygraphなど。JSフレームワーク徹底比較!JavaScript実践VSCodeでReactの開発を行う!React開発者のためのオススメ拡張機能。同一オリジンポリシーを理解する。APIコラム海外エンジニアエンジニア論PC。