JavaScriptの同源戦略と「CORS」クロスドメイン方式

6324 ワード

javascript vue.js コール国境をまたぐ

記事の概要

同ソースポリシー

同源は何ですか?

どうやってソースにまたがり、シーンの応用ができますか?

ソースの変更

ソースネットワークをまたいで

にアクセスする.

ソース・スクリプトAPIをまたいで

にアクセスする.

トランスソースデータストアアクセス

CORSを理解する

CORSとは何ですか?

CORS機能概要

CORS Cookie

について

CORSの簡単な要求

CORS予備検査要求は何ですか?

他の

は

を参照してください.
ソースポリシー
同源は何ですか
ウェブブラウザでは、ソースポリシーは、同じソースからローディングされたドキュメントまたはスクリプトが、他のソースからのリソースとどのように相互作用するかを制限する.これは潜在的な悪意のある文書を隔離するための重要な安全機構である.
二つのページの場合

.プロトコル

.ポート(指定があれば)

.ドメイン名

3つのページは同じです.2つのページは同じソースを持っています.http://store.example.com/dir/page.htmlの同ソース検出の例を示す.
URL
結果
原因http://store.example.com/index.html成功http://store.example.com/dir/another.html成功https://store.example.com/index.html失敗
異なるプロトコル(httpsとhttp)http://store.example.com:81/index.html失敗
異なるポート(81と80)http://news.example.com/index.html失敗
異なるドメイン名(newsとstore)http://example.com/index.html失敗
異なるドメイン名(storeは単独のドメインです.)
どのようにソースにまたがりますか?
以下は4種類の出会いができるクロスソースです.
ソースの変更
ページはいくつかの制限のために彼のソースを変更することがあります.document.domainの値は、現在のドメインまたはその現在のドメインの親ドメインである.
シーンhttp://store.example.com/dir/page.htmlドキュメント内のスクリプトの一つは、以下の文を実行します.document.domain = "company.com"は、同ソースによる検出が可能である.
アクセス
同ソース戦略は異なるソース間の相互作用を制御した.CORSを使用して、ソースをまたぐアクセスを許可する.
シーンはブラウザから発信されたクロスドメインHTTP要求(これはみんなが一番多く接触している)
ソース別スクリプトAPIアクセス
JavascriptのAPIでは、ドキュメント間の直接的な相互参照が可能です.しかし、二つのドキュメントのソースが異なる場合、いくつかの参照方法はAPIオブジェクトへのアクセスに制限を追加します.window.postMessageが使用できます.
シーン使用

</code> れ の  、  ページの  <br>クロスソースデータストアアクセス<br>ブラウザに  されているデータは、 えば、local StrageとIndexedDBのようにソースで  されます. ソースは、 のソースに するデータを<code>  </code>によって  する  の    を している.<br>シーンnull<br>CORSを  する<br>CORSは ですか<br>MDNのウェブサイトは、この2つの  を  する.<br>CORS(Cross-Origin Resource Sharing、ドメイン リソース  )は、  のトランスポートHTTPヘッダからなるシステムであり、これらのHTTPヘッダは、ブラウザがフロントエンドJavaScriptコードを  するかどうかを  する.CORSは、ウェブサーバにこのような  を え、すなわちサーバは、ドメイン    がそれらのリソースにアクセスできるように  することができる.<br>ドメインをまたぐリソース  (CORS)は、 のソースサーバから  されたリソースへのアクセスを  されるウェブアプリケーションを  させるために  のHTTPヘッダを  するメカニズムである.リソースが、そのリソース  が  するサーバとは なるドメイン、プロトコルまたはポートからリソースを  すると、リソースは、ドメインをまたぐHTTP  を  する.<br> は つの  は じです.CORSはサービス  (   に うバックエンド)に  を え、  でどのブラウザをコントロールするかの  はそのリソースにアクセスでき、ドメインをまたぐ  を  する.<br> : <code>    </code> <br>HTTPヘッダ<br>  <code>CORS</code>  されたリソースがどの  に  されるかを す.<code>Access-Control-Allow-Origin</code>  された   がtrueであると  された  、  は りますか?<code>Access-Control-Allow-Credentials</code>   に する  では、  の  にどのHTTPヘッダが  されてもよいかを す.<code>Access-Control-Allow-Headers</code>    に する  のうち、どのHTTP  が  のリソースにアクセスできるかを  します.<code>Access-Control-Allow-Methods</code>どのHTTPヘッダの  が  に    されますか?<code>Access-Control-Expose-Headers</code> め  された  がどれぐらいキャッシュされますか?<code>Access-Control-Max-Age</code> の  を  するために、サーバの  な  がこれらのHTTPヘッダを  することを らせる.<code>Access-Control-Request-Headers</code>    を  するために、どのHTTP    を  するかをサーバに  する.<code>Access-Control-Request-Method</code>リソースの    がどの  から  されるかを す.<br>CORS    <br>    TLDR<br>サーバーデータに   があるかもしれないHTTP    ( にGET  のHTTP  、またはいくつかのMIMEタイプのPOST  を み わせる)に して、ブラウザはまずOPTTIONS  を  して      を  しなければなりません. って、サービス がクロスドメイン  を  するかどうかが かります.サーバーが  を  した 、  のHTTP  を  します.      の  において、サーバ は、アイデンティティ   (CookiesとHTTP    データを む)を  する  があるかどうかをクライアントに  しても い.<br>  な  ではない  は、 に      を ります.   に  の  を ります.<br> :node-expressフレームの で、サーバー のクロスドメイン  <pre><code>app.all('*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Methods', '*');
  next();
});</code></pre>CORS Cookieについて<br>CORS  はデフォルトではCookieとHTTP    を  しません.cookieを うことを りたいなら3 に  してください.<li> Client  <code>Origin</code>に<code>new XMLHttpRequest()</code>が<code>withCredentials</code> </li>に  されています.<li> Serive  <code>true</code> <code>HTTP </code>は<code>Access-Control-Allow-Credentials</code> </li>に  されています.<li> Serive  <code>true</code> <code>HTTP </code>は   に  することができません.  されたページと  するドメイン を  しなければなりません.<br>  の はクッキーを りたいです.<pre><code>// service 
`res.header('Access-Control-Allow-Credentials', true);`
`res.header('Access-Control-Allow-Origin', '     ');`
// client 
Jquery `ajax()` `xhrFields: {withCredentials: true}`
Axios `axios.defaults.withCredentials = true`</code></pre>CORSの  な  <br> で  なお いをしましたが、それこそ  なお いですか?CORSの      をトリガしない  、このような  を「  な  」と びます.<br>  は  な  です.<li> HTTP Methodからなると、  のような  の</li>しかないです.<li> GET </li><li> POST </li><li> HEAD </li><li> HTTP Headers  </li><li> Acctept </li><li> Acceept Language </li><li> Connect-Language </li><li> Last-Event-ID </li><li> Conteen-Typeは、  のタイプ(フォーム  )のみを んでいます.<li> appication/x-wn-form-urlencoded </li><li> multiipad/form-data </li><li> text/playn </li></li> :   つの  を  に たす  にのみ、  な  です.そうでなければ、   な  です.<br>CORS      は ですか?<br> にこのように くの      を いましたが、 を ったら      ですか?もし  がclient で  を ったら、 えば:<pre><code>//   
var invocation = new XMLHttpRequest();

invocation.setRequestHeader('X-EXAMPLE', 'xixihaha');
invocation.setRequestHeader('Content-Type', 'application/xml');

// axios
axios.defaults.headers['X-EXAMPLE'] = 'xixihaha';
axios.defaults.headers['Content-Type'] = 'application/xml';
</code></pre>POST  は、カスタム  ヘッダフィールド(X−EXAMPLE:xixiha)を むXMLドキュメントを  する.また、この  のContect-Typeは、appliation/xmlである.したがって、この  は、まず「      」を  する  がある.<br>server のHTTPヘッダ  <pre><code>Access-Control-Allow-Origin: '     '
Access-Control-Allow-Methods: POST, GET, OPTIONS //       
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type //        
Access-Control-Max-Age: 86400</code></pre>  な  と  な  ではなく、ブラウザの      がサーバによって  された  、  の  を  し、 け れられない  は  を  する.<br>その <br>  を えてこれにとどまらない<code>Access-Control-Allow-Origin</code>scriptタグを  に  し、scriptのsrcを  して、 じソースポリシーに  されずにドメインを えてデータを  する.<pre><code>function addScriptTag() {
    var script = document.createElement("script");
    script.src = "http://foo.example?callback=handleResponse";
    document.body.appendChild(script);
}

function handleResponse() {
  console.log('    ');
};</code></pre>  のクロスドメイン は すぎる  をしない.<br>  に べた<code>JSONP</code><code>postMessage()</code>  、すなわちサーバエージェントを  する.<code>nginx</code>  <br>   のネット  <br>MDN web docs CORS

［IoC容器Unity］第4回:パラダイム(デカップ依存注入機構)を使用する.