Analisis mendalam tentang isu silang domain Javascript_kemahiran javascript

Apakah itu merentas domain?

Andaikan a.com/get.html perlu mendapatkan data dalam b.com/data.html, dan a.com dan b.com bukan pelayan yang sama Ini adalah merentas domain merentas domain yang melibatkan Javascript. Dasar asal yang sama, secara ringkasnya, adalah untuk melindungi keselamatan tapak web dan menghalang kandungan tapak web daripada diubah suai oleh js daripada pelayan domain luaran (bukan asal yang sama).
Petik jadual untuk melihat apakah keadaan yang menyebabkan punca silang:

Tetapi kadang-kadang kita benar-benar perlu melakukan ini, jadi apakah kaedah yang kita ada?

1. JsonP

Dalam hal merentas domain, kita tidak boleh gagal untuk menyebut jsonp terlebih dahulu. jsonp sebenarnya adalah singkatan dari JavacScript Object Notation with Padding, yang boleh difahami sebagai data format json yang diisi dengan kandungan.
Kerana panggilan balik diisytiharkan di atas dan data.js domain luaran b.com dipanggil dan data.js dipanggil:
panggil balik({msg:"tqtan"});
Dengan cara ini, apabila memanggil js yang merujuk kepada domain luaran, panggilan balik tempatan() akan dipanggil untuk mencapai penghantaran data.
Di atas hanyalah domain silang yang mudah, mari kita lihat aplikasi sebenar jQuery.

Ajax dalam jQuery boleh menarik data dari domain luaran melalui dua kaedah:

1. $.getJSON()

Kaedah ini mudah dan kasar, meminta Json daripada domain luaran.

Andaikan permintaan di atas mengakses halaman servlet di bawah b.com, dan parameter yang diluluskan ialah callback=?, jQuery akan menjana rentetan secara automatik untuk mengisi ruang letak?, contohnya, callback=jQuery17207481773362960666_1332575486681. Ini mengisytiharkan pengecam unik dengan pelayan Pelayan hanya perlu mengembalikan data format json dengan nilai panggil balik ini, contohnya:

Dengan cara ini, anda boleh berjaya memperoleh data daripada pelayan asal yang tidak sama.

2. $.ajax()

Prinsip pelaksanaan adalah sama seperti di atas, kecuali lebih banyak pautan boleh disesuaikan.

$.ajax({
url:'http://b.com/dataServlet?words=hi',
dataType:'jsonp',
jsonp : 'jsoncallback',
jsoncallback : 'tqtan',
success:function(data){
console.log(data.msg);
},
error: function (e) {
console.log(e);
}
});

Nama panggilan balik boleh disesuaikan, di sini ia ditukar kepada 'tqtan', dan nilai perkataan=hi boleh dihantar di sini.
Ambil perhatian bahawa format JsonP hanya boleh diminta kepada pelayan dalam format GET.

2. domain.dokumen

Kaedah ini hanya digunakan untuk merentas domain di mana domain utama adalah sama tetapi subdomain berbeza.
Itulah masalah silang domain antara get.a.com dan data.a.com Penyelesaiannya sangat mudah:
Jika get.a.com/get.html perlu mendapatkan data data.a.com/data.html, masukkan iframe dahulu dalam get.html, src menunjuk ke data.a.com/data.html, dan kemudian dalam data.html Tulis document.domain='a.com'; untuk mengawal kandungan dalam data.html.

//get.html
var iframe = document.creatElement("iframe");
iframe.src="http://data.a.com/data.html";
iframe.style.display="none";
document.body.appendChild(iframe);
document.domain = 'a.com';
iframe.onload = function(){
var otherDocument = iframe.contentDocument || iframe.contentWindow.document;
//otherDocument就是另一个页面的document
//do whatever you want..
};
//data.html
document.domain = 'a.com';

3. url cincang

Anda juga boleh mencapai rentas domain melalui cincangan URL. Hash ialah kandungan selepas url#, seperti http://targetkiller.net/index.html#data, dengan #data ialah cincangan. Bagaimana untuk menggunakan ini untuk mencapai merentas domain?

Masih contoh yang sama, a.com/get.html perlu mendapatkan b.com/data.html, mula-mula buat iframe dalam get.html, src masih menunjuk ke data.html, dan kemudian tambahkan nilai cincang pada lulus parameter. Data.html di hujung yang lain bertindak balas berdasarkan cincangan yang diperolehi, mencipta iframe itu sendiri, src menghala ke a.com/proxy.html dan menambahkan data respons pada cincang. Selepas itu, a.com/proxy.html hanya perlu mengubah suai cincang get.html dalam domain induk a.com yang sama. Akhirnya, bagaimana untuk mendapatkan data? Anda hanya perlu menulis setInterval pemasa dalam get.html dan memantau sama ada terdapat cincangan baharu dengan kerap.

Melihat ini, anda mungkin berasa keliru. Berikut ialah beberapa soalan:

1.Apakah peranan proxy.html?
Memandangkan get.html dan data.html tidak berada dalam domain yang sama, nilai location.hash tidak boleh diubah suai, jadi menggunakan proxy.html, mula-mula lompat ke halaman untuk mencari proksi, kemudian gunakan parent.location.hash, itu ialah, ubah suai bapa untuk membiarkan anak lelaki (get.html) juga mendapat respons.
a.com/get.html

var iframe = document.createElement('iframe');
iframe.src = 'http://a.com/get.html#data';
iframe.style.display = 'none';
document.body.appendChild(iframe);
//周期检测hash更新
function getHash() {
var data = location.hash ? location.hash.substring(1) : '';
console.log(data);
}
var hashInt = setInterval(function(){getHash()}, 1000);
a.com/proxy.html
parent.location.hash = self.location.hash.substring(1);
b.com/data.html
//模拟一个简单的参数处理操作
if(location.hash){
var data = location.hash;
doSth(data);
}
function doSth(data){
console.log("from a.com:"+data);
var msg = "hello i am b.com";
var iframe = document.createElement('iframe');
iframe.src = "http://a.com/proxy.html#"+msg;
iframe.style.display = 'none';
document.body.appendChild(iframe);
}

4、window.name

这种方法比较巧妙，引用圆心的解释，name 值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。
具体例子依旧如上，同时也是需要一个代理页面。
a.com/get.html请求b.com/data.html，首先get.html创建一个iframe，src指向data.html，然后监听iframe的onload事件。与此同时，在data.html设置window.name = data;把window.name赋值。然后onload事件后马上把iframe的跳到本地a.com/proxy.html。因此window.name就共享到了src为proxy.html的找个iframe中，接下来，就是同源间获取值的事了。
a.com/get.html

var state = 0,
iframe = document.createElement('iframe'),
iframe.src = 'http://b.com/data.html";
iframe.style.display = 'none';
loadfn = function() {
if (state === 1) {
var data = iframe.contentWindow.name;
console.log(data);
} else if (state === 0) {
state = 1;
//跳到proxy.html
iframe.contentWindow.location = "http://a.com/proxy.html";
}
};
if (iframe.attachEvent) {
iframe.attachEvent('onload', loadfn);
} else {
iframe.onload = loadfn;
}
document.body.appendChild(iframe);
a.com/proxy.html
// proxy.html的操作主要是删除get.html的iframe，避免安全问题发生
iframe.contentWindow.document.write('');
iframe.contentWindow.close();
document.body.removeChild(iframe);
b.com/data.html
var data = "hello,tqtan";
window.name = data;

5、 postMessage()

html5的新方法postMessage()优雅地解决了跨域，也十分容易理解。
发送方调用postMessage()内容，接受方监听onmessage接受内容即可。
假设发送方为a.com/send.html，接受方为b.com/receive.html。
a.com/send.html

var iframe = document.createElement("iframe");
iframe.src = "http://b.com/receive.html";
document.body.appendChild(iframe);
iframe.contentWindow.postMessage("hello","http://b.com");
b.com/receive.html
window.addEventListener('message', function(event){
// 通过origin属性判断消息来源地址
if (event.origin == 'http://a.com') {
console.log(event.data);
console.log(event.source);//发送源的window值
}
}, false);

6、CORS（后台实现）

以上5点都是前端实现的跨域，但是后台参与会让跨域更容易解决，也就是用CORS。
CORS是Cross-Origin Resource Sharing的简称，也就是跨域资源共享。它有多牛逼？之前说JsonP只能get请求，但CORS则可以接受所有类型的http请求，然而CORS只有现代浏览器才支持。
怎样使用？前端只需要发普通ajax请求，注意检测CORS的支持度。引用自蒋宇捷。

function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// 此时即支持CORS的情况
// 检查XMLHttpRequest对象是否有“withCredentials”属性
// “withCredentials”仅存在于XMLHTTPRequest2对象里
xhr.open(method, url, true);
}
else if (typeof!= "undefined") {
// 否则检查是否支持XDomainRequest，IE8和IE9支持
// XDomainRequest仅存在于IE中，是IE用于支持CORS请求的方式
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// 否则，浏览器不支持CORS
xhr = null;
}
return xhr;
}
var xhr = createCORSRequest('GET', url);
if (!xhr) {
throw new Error('CORS not supported');
}

与此同时，服务器端只需要设置Access-Control-Allow-Origin头即可。

java中你只需要设置

为了安全，也可以将*改为特定域名，例如a.com。