JavaScriptドメイン間の4つの実装方法

1363 ワード

postMessage.gif
JSONP
  • 原理htmlのscriptタグは、オンラインのjQueryライブラリなど、他のドメインのjsを導入することができる.この特性を利用すると,ドメイン間アクセスインタフェースを実現できるが,バックエンドのサポートが必要である.
  • 欠陥
  • 実装は少し複雑
  • はXSSに攻撃されやすく、CORS法なしで安全です.

  • メソッド
  • データ処理関数を定義する:func
  • scriptラベルを作成し、srcのアドレスはバックエンドのインタフェースを実行し、最後にパラメータcallback=func
  • を追加する.
  • の後端は、要求を受けるとパラメータを解析し、返却データを計算し、func(data)文字列
  • を出力する.
  • func(data)はscriptラベルをjsとして実行するとfunc関数が呼び出され、dataはパラメータ
  • である.
  • コードのデモ-httpサーバ
  • を開く必要があります.

    CORS
  • ドメイン間リソース共有はajaxドメイン間リソースを要求する方式であり、現代ブラウザとIE 10以上の
  • をサポートする.
  • ブラウザは、私たちが送信したXMLHttpRequestが同源ポリシーに合致しないことを発見し、このリクエストにリクエストヘッダを追加しました:Origin;バックエンドは戻り結果に応答ヘッダを追加します:Access-Control-Allow-Origin;ブラウザは、その応答ヘッダにOriginの値が含まれているかどうかを判断し、含まれている場合、処理応答はデータを取得することができ、逆に直接却下することができ、データは取得できません.
  • CORSの実現方式は簡単で、バックエンドにコードを追加すれば(処理は比較的簡単で、demoを貼らない):
  • res.header('Access-Control-Allow-Origin','[     ,*            ]')
    

    ダウンドメイン実装
  • ドメインダウンの使用シーンは比較的小さいので、メインドメイン名と同じように、2級ドメイン名が違います.
  • 例えば(処理は比較的簡単で、demoを貼らない):
  • //     
    a.xxx.com
    b.xxx.com
    //               ducument.domain      
    document.domain = 'xxx.com'
    

    postMessage
  • 異なるドメインの下で、互いにアクセスすることなく、相手にのみデータを送信し、相手が認可データを受け取る場合、(相互にデータを送信する方式でドメイン間目的を達成する)
  • を用いることができる.
  • コードデモ