JavaScriptを使用してクロスドメインを実現するにはどうすればよいですか?クロスドメイン JavaScript のいくつかの方法を要約する

ドメインから始めましょう

ドメイン: ドメインは、WIN2K ネットワーク システムのセキュリティ境界です。コンピュータ ネットワークの最も基本的な単位は「ドメイン」であることはわかっていますが、これは WIN2K に特有のものではありませんが、Active Directory は 1 つ以上のドメインを通じて実行できます。独立したコンピュータでは、ドメインはコンピュータ自体を指しますが、同時に、物理的な場所を異なるネットワーク セグメントに分割して、各ドメインに独自のセキュリティ ポリシーを持たせることもできます。他のドメインとの信頼関係との関係。複数のドメインが信頼関係を通じて接続されている場合、Active Directory を複数の信頼ドメインで共有できます
ドメイン ツリー: ドメイン ツリーは、同じテーブル構造と構成を共有して連続した名前空間を形成する複数のドメインで構成されます。ツリー内のドメインは信頼関係を通じて接続されており、Active Directory には 1 つ以上のドメイン ツリーが含まれています。ドメイン ツリー内のドメインは、双方向の推移的な信頼関係を通じて接続されます。これらの信頼関係は双方向かつ推移的であるため、ドメイン ツリーまたはフォレスト内に新しく作成されたドメインは、ドメイン ツリーまたはフォレスト内の他のすべてのドメインとすぐに信頼関係を確立できます。これらの信頼関係により、ドメイン ツリーまたはフォレスト内のすべてのドメインにわたってユーザーを認証するシングル サインオン プロセスが可能になりますが、これは、認証されたユーザーがドメイン ツリー内のすべてのドメインにわたって同じ権限とアクセス許可を持っていることを必ずしも意味するわけではありません。ドメインはセキュリティ境界であるため、ユーザーにはドメインごとに適切な権限とアクセス許可を割り当てる必要があります。
ドメイン ツリー内のドメイン レベルが深いほど、「.」はレベルを表します。
たとえば、zhidao.baidu.com (Baidu に知られている) ドメインは baidu.com (Baidu) ドメインよりも低いレベルにあります。これは、baidu.com には 2 つのレベルの関係があるのに対し、baidu.com には 1 つのレベルしかないためです。

クロスドメインとは

デフォルトでは、XHR オブジェクトは、それを含むページと同じドメイン内のリソースにのみアクセスできます。このセキュリティ戦略により、特定の悪意のある動作を防ぐことができます。ただし、特定のブラウザ アプリケーションを開発する場合は、合理的なクロスオリジン リクエストを実装することも重要です。
プロトコル、ドメイン名、ポートが異なる限り、それらは異なるドメインとみなされます。ポートとプロトコルの違いはバックグラウンドでのみ解決できます。私たちが解決しなければならないのは、異なるドメイン名の問題です

ドメインを越える方法

(1) CORS(Cross-Origin Resource Sharing、クロスオリジンリソース共有)

1． CORS (Cross-Origin Resource Sharing (クロスオリジン リソース共有)) は、クロスオリジン リソースにアクセスする必要がある場合にブラウザとサーバーが通信する方法を定義する W3C 作業草案です。 CORS の背後にある基本的な考え方は、カスタム HTTP ヘッダーを使用して、ブラウザーがサーバーと通信して、要求または応答が成功するか失敗するかを判断できるようにすることです。
2. この機能の実装は非常に簡単で、サーバーによって応答ヘッダーを送信するだけです。

ブラウザのサポート:

• IE 8+

• Firefox 3.5+

• Opera 12+

• Safari 4+

• Chrome 3+

私たちのページまたはアプリケーションがすでに a.com 上にあり、b.com からのデータ抽出をリクエストする予定だとします。通常、AJAX を直接使用してリクエストすると、リクエストは失敗し、ブラウザはエラーを返します。
CORS を使用すると、b.com はヘッダーを追加するだけで .a.com からのリクエストを許可できます。
以下は php を使用した設定です。「*」記号は、どのドメインでもサーバーにリクエストを送信できることを示します:

header{"Access-Control-Allow-Origin: *"}

CORS 互換記述メソッド

 function createCORSRequest(method, url){
 var xhr = new XMLHttpRequest();
 //非IE浏览器
 if ("withCredentials" in xhr){
 xhr.open(method, url, true);
 //IE浏览器
 } else if (typeof XDomainRequest != "undefined"){
 vxhr = new XDomainRequest();
 xhr.open(method, url);
 } else {
 xhr = null;
 }
 return xhr;
 }
 var request = createCORSRequest("get", "http://example.com/page/");
 if (request){
 request.onload = function(){
 //对request.responseText 进行处理
 };
 request.send();
 }

(2) JSONP (Padding が埋め込まれた JSON またはパラメトリック JSON)

js では、XMLHttpRequest を直接使用してさまざまなドメインのデータをリクエストすることはできませんが、jsonp はこの機能を使用して、ページ上のさまざまなドメインに js スクリプト ファイルを導入することができます。実装された

JSONP は次のもので構成されます。 2 つの部分: コールバック関数とデータ。コールバック関数は、応答が来たときにページ内で呼び出される関数であり、データはコールバック関数に渡される JSON データです。

例:

<script type="text/javascript">
 function dosomething(jsondata){
 //处理获得的json数据
 }
</script>
<script src="http://example.com/data.php?callback=dosomething"></script>

まず、最初の script タグはデータを処理する関数を定義します。
次に、2 番目の script タグが js ファイルをロードします。data.php はデータのアドレスですが、js として導入されます。したがって、data.php は実行可能な js ファイルを返す必要があります。最終的に、js ファイルが正常にロードされた後、url パラメーターで指定した関数が実行され、必要な json データがパラメーターとして渡されます。したがって、php は次のようになります

<?php
$callback = $_GET[&#39;callback&#39;];//得到回调函数名
$data = array(&#39;a&#39;,&#39;b&#39;,&#39;c&#39;);//要返回的数据
echo $callback.&#39;(&#39;.json_encode($data).&#39;)&#39;;//输出
?>

最終的に、出力結果は次のようになります: dosomething(['a','b','c']);
上記から、jsonp はサーバーからの対応する協力を必要とすることがわかります。 -サイドページ。

JSONPの長所と短所
長所:

它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；
能够直接访问响应文本，支持在浏览器与服务器之间双向通信
缺点：

JSONP 是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码，而此时除了完全放弃JSONP 调用之外，没有办法追究。因此在使用不是你自己运维的Web 服务时，一定得保证它安全可靠。
它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
(三) window.name

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。

这里有三个页面：

a.com/app.html：应用页面。
a.com/proxy.html：代理文件，一般是一个没有任何内容的html文件，需要和应用页面在同一域下。
b.com/data.html：应用页面需要获取数据的页面，可称为数据页面。

app.html

<iframe src="b.com/data.html" id="iframe"></iframe>
<script>
 var iframe = document.getElementById("iframe");
 iframe.src = "a.com/proxy.html";//这是一个与a.com/app.html同源的页面
 iframe.onload = function(){
 var data = iframe.contentWindow.name; //取到数据
 }
</script>

data.html

<script>
 // 这里是要传输的数据，大小一般为2M，IE和firefox下可以大至32M左右
 // 数据格式可以自定义，如json、字符串
 window.name = "数据"
</script>

iframe首先的地址是b.com/data.html，所以能取到window.name数据;
但是iframe现在跟app.html并不同源，app.html无法获取到数据，所以又将iframe的链接跳转至a.com/proxy.html这个代理页面，现在app.html跟iframe就同源了。

注意：iframe由b.com/data.html跳转到a.com/proxy.html页面，window.name的value是不变的

获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）

<script type="text/javascript">
 iframe.contentWindow.document.write(&#39;&#39;);
 iframe.contentWindow.close();
 document.body.removeChild(iframe);
</script>

(四) document.domain + iframe

对于主域相同而子域不同的例子，可以通过设置document.domain的办法来解决。
具体的做法是可以在a.com/a.html 和script.a.com/b.html 两个文件中分别设置document.domain = 'a.com'，然后通过a.html文件中创建一个iframe，去控制iframe的contentDocument，这样两个js文件之间就可以“交互”了。
a.com/a.html页面

<iframe src="http://script.a.com/b.html" frameborder="0"></iframe>
<script>
 document.domain = &#39;a.com&#39;;
</script>

script.a.com/b.html页面

<script>
 document.domain = &#39;a.com&#39;;
</script>

这样俩个页面就可以通过js相互访问各种属性和对象了。

document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。例如：a.b.example.com 中某个文档的document.domain 可以设成a.b.example.com、b.example.com 、example.com中的任意一个，但是不可以设成 c.a.b.example.com,因为这是当前域的子域，也不可以设成baidu.com,因为主域已经不相同了。

(五) HTML5的window.postMessage

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
window.postMessage允许两个窗口/帧之间跨域发送数据消息。从本质上讲，window.postMessage是一个跨域的无服务器垫片的Ajax。

用法：
otherWindow.postMessage(message, targetOrigin);

• otherWindow: 对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性；window.+open的返回值；通过name或下标从window.frames取到的值。

• message: 所要发送的数据，string类型。

• targetOrigin: 用于限制otherWindow，“*”表示不作限制
  

数据发送端a.com/index.html中的代码：

<iframe id="ifr" src="b.com/index.html"></iframe>
<script type="text/javascript">
window.onload = function() {
 var ifr = document.getElementById(&#39;ifr&#39;);
 var targetOrigin = &#39;http://b.com&#39;; // 设定接收端的域，*则为不限制   
 ifr.contentWindow.postMessage(&#39;I was there!&#39;, targetOrigin);
};
</script>

数据接收端b.com/index.html中的代码：

<script type="text/javascript">
 window.addEventListener(&#39;message&#39;, function(event){
 // 通过origin属性判断消息来源地址
 if (event.origin == &#39;http://a.com&#39;) {
 alert(event.data); // 弹出"I was there!"
 alert(event.source); // 对a.com、index.html中window对象的引用
   // 但由于同源策略，这里event.source不可以访问window对象
 }
 }, false);
</script>

以上がJavaScriptを使用してクロスドメインを実現するにはどうすればよいですか?クロスドメイン JavaScript のいくつかの方法を要約するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。