同一ソースポリシー、ドメイン間要求処理

3703 ワード

ドメイン間のアクセス-ドメイン間の要求
ソースポリシー
ブラウザに適用されるリソースアクセスポリシー.
ソースストラテジスト(Same orgin policy)は、ブラウザの最も基本的なセキュリティ機能であるという約束であり、ソースストラテジーが欠けていると、ブラウザの正常な機能が影響を受ける可能性があります.ウェブは同源戦略の基礎の上に構築されたものであり、ブラウザは同源戦略の一つの実現にすぎないと言える.
ブラウザはなぜ同じソースポリシーを使うのですか?
ソース戦略は、Netscapeによって提案された有名なセキュリティポリシーです.今はJavaScriptをサポートするすべてのブラウザがこのポリシーを使います.ソースとは、ドメイン名/IP/ホスト、プロトコル、ポートが同じです.ブラウザのjsでは、コード(スクリプト)を使ってネットワークリソースにアクセスする際にこのポリシーを適用します.
aページのアドレスが(http://www.baidu.com/a.htmlを選択します
では、aページのソース情報は、プロトコル:http、ドメイン名:baidu.com、ポート:80;
このページでは、jsを通じて他のリソースにアクセスします.http://www.baidu.com/b.htmlを選択します
この時はソースポリシーを使ってテストします.上の二つのページの協議、ドメイン名、ポートは同じです.この時は同じソース要求があります.http://www.qq.com/b.html)ということは、明らかにこの場合は非同源請求であり、この場合、請求は一定の制限を受けることになります.
を選択しますhttp://www.baidu.com/a.html 例として、以下は同じではない.

http://www.qq.com/b.html

http://www.baidu.com:8080/b.html

http://baike.baidu.com/b.html

https://www.baidu.com/b.html

http://baidu.com/b.html 注意:wwwは実は二級のドメイン名で、wwwとトップドメインを結びつけて使うだけです.
AJAX依頼
私たちはajaxを使ってリソースを要求する時、ソースポリシーを使って検出されます.ソースポリシーはブラウザに適用されます.つまり、ドメインをまたぐ要求を送ったら、サーバーは受信して処理して戻ることができます.しかし、ブラウザはリターンデータを受信した後、彼らのドメインが同じかどうかを比較します.受信と処理を拒否します.
解決策
Access-Coontrol-Allow-Origin
ブラウザが非同源データを受信すると、まず最初にAccess-Coontrol-Originフィールドの中の値を確認します.現在のドメインがAccess-Coontrol-Ollow-Originの中に含まれている場合、ソースポリシーを無視します.
例えば、サーバーにはそれぞれlocal host:7777とlocal host:8888があります.
ポート8888の場合に7777のデータにアクセスすると、同源ポリシー検出のため、ajax要求は直接エラーとなります.この場合、要求された、つまり8888のバックエンドにヘッダ情報res.setHeader('Access-Control-Allow-Origin',"localhost:7777")をセットする必要があります.
ホワイトリストのような感じがします.すべての異なるポートにアクセスしたいなら、中の値をワイルドカードに変更できます.
バックエンドプロキシ
バックエンド間の相互アクセス要求が異なるのは、同じソースポリシーがブラウザに基づいて生成されるので、自分のサーバーバックエンドをアクセスしてドメインをまたぐアドレスを要求し、結果を再度私たちに伝えます.

//nodejs axios                 
app.get('/data', (req, res) => {

    /*
    *           
    * */
    axios.get('http://localhost:8888/data').then( response => {
        //console.log(response.data);
        res.send(response.data);
    } );
});

//  ajax    responseText
var xhr = new XMLHttpRequest();

xhr.open('get', 'http://localhost:8888/data', true);

xhr.onload = function() {
  console.log(this.responseText);
};

xhr.send();

json p
同じインターフェースの呼び出しの異なる関数を解決するために、異なる論理を実現すると、バックエンド出力の関数名は固定されず、フロントエンドがget方式で指定されたパラメータに入る.たとえばcalbackはバックエンドがcalbackから入ってきた値に基づいて、異なる函数呼び出し名を出力する.
弊害:get方式しか通じません.
注意:一つのアプリインターフェースはjsopの方式で使用できるかどうか、またこのインターフェースが出力するデータフォーマットを見て、scriptタグにロードされた後、jsによって実行されますか?
具体的な方法:Scriptタグを作成することによって、アドレスは第三者のAPIアドレスを指します.例えば、要求された側のデータは以下の通りです.

app.get('/list', (req, res) => {

    let callback = req.query.callback || 'fn';
    let type = req.query.type || 'teachers';

    let data = {
        teachers: ['Leo','Motao', 'zMouse'],
        students: ['  ','  ', '  ', '  ', '  ']
    };

    res.send(callback + '('+ JSON.stringify(data[type]) +')');
});

私たちはscriptタグを作成することによって、同じソースポリシーの影響を受けません.その中で一つのcalback関数を通じてデータを受け取ることができます.約束の関数名でもいいです.あるいは住所を通じて伝達します.このようにフロントでデータを持って関数名来を通じて手に入れられます.

document.onclick = function() {
  var scriptElement = document.createElement('script');
  scriptElement.src = 'http://localhost:7777/list?callback=fn2&type=students';
  //                 
  document.body.appendChild(scriptElement);
};
function fn(data) { //      callback 
  var html = '';
  data.forEach( item => {
    html += ''+ item +'';
  } );
  uls[0].innerHTML = html;
}

ステップ-タスク2