Apa itu domain silang?
Konsep: Selama ada perbedaan dalam protokol, nama domain, atau port, itu dianggap sebagai domain yang berbeda.
Salinan kode adalah sebagai berikut:
URL menunjukkan apakah komunikasi diizinkan
http://www.a.com/a.js
http://www.a.com/b.js diizinkan dengan nama domain yang sama
http://www.a.com/lab/a.js
http://www.a.com/script/b.js folder yang berbeda dengan nama domain yang sama diizinkan
http://www.a.com:8000/a.js
http://www.a.com/b.js Nama domain yang sama, port yang berbeda tidak diperbolehkan
http://www.a.com/a.js
https://www.a.com/b.js Nama domain yang sama, protokol yang berbeda tidak mengizinkan
http://www.a.com/a.js
http://70.32.92.74/b.js Nama domain dan nama domain sesuai dengan IP tidak diizinkan
http://www.a.com/a.js
http://script.a.com/b.js domain utama adalah sama, tetapi subdomain tidak diperbolehkan
http://www.a.com/a.js
http://a.com/b.js Nama domain yang sama, nama domain sekunder yang berbeda (sama seperti di atas) tidak diizinkan (tidak ada akses ke cookie dalam kasus ini)
http://www.cnblogs.com/a.js
http://www.a.com/b.js Nama domain yang berbeda tidak diizinkan
Perbedaan antara port dan protokol hanya dapat diselesaikan melalui latar belakang.
Berbagi Sumber Daya Cross-Domain (CORS)
CROS (Berbagi Sumber Daya Porin-Origin) Berbagi Sumber Daya Domain Silang mendefinisikan bagaimana browser dan server harus berkomunikasi saat mengakses sumber daya lintas domain. Ide dasar di balik CRO adalah menggunakan header HTTP khusus untuk membiarkan browser berkomunikasi dengan server, sehingga memutuskan apakah permintaan atau respons harus berhasil atau gagal.
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
var xhr = xmlhttpRequest baru ();
xhr.open ("get", "/trigkit4", true);
xhr.send ();
</script>
Trigkit4 di atas adalah jalur relatif. Jika kami ingin menggunakan CORS, kode AJAX yang relevan mungkin terlihat seperti ini:
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
var xhr = xmlhttpRequest baru ();
xhr.open ("get", "http://segmentfault.com/u/trigkit4/",true);
xhr.send ();
</script>
Perbedaan antara kode dan yang sebelumnya adalah bahwa jalur relatif diganti dengan jalur absolut dari domain lain, yaitu, alamat antarmuka yang ingin Anda akses di seluruh domain.
Dukungan sisi server untuk CORS terutama dicapai dengan mengatur akses-kontrol-awal-asal. Jika browser mendeteksi pengaturan yang sesuai, AJAX dapat diizinkan untuk mengakses di seluruh domain.
Untuk memecahkan masalah domain silang, kita dapat menggunakan metode berikut:
Domain silang melalui JSONP
Sekarang pertanyaannya adalah? Apa itu JSONP? Definisi Wikipedia adalah: JSONP (JSON dengan padding) adalah "mode penggunaan" dari format data JSON, yang memungkinkan halaman web untuk meminta informasi dari domain lain.
JSONP juga disebut pengisian JSON. Ini adalah metode baru untuk menerapkan JSON, tetapi hanya JSON yang termasuk dalam panggilan fungsi, misalnya:
Salinan kode adalah sebagai berikut:
callback ({"name", "trigkit4"});
JSONP terdiri dari dua bagian: fungsi callback dan data. Fungsi callback adalah fungsi yang harus dipanggil pada halaman ketika respons tiba, dan data adalah data JSON yang diteruskan ke fungsi callback.
Di JS, tidak mungkin untuk secara langsung meminta data pada domain yang berbeda menggunakan XMLHTTPREQUEST. Namun, tidak apa -apa untuk memperkenalkan file skrip JS di domain yang berbeda di halaman, dan JSONP menggunakan fitur ini untuk mencapainya. Misalnya:
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
function dosomething (jsondata) {
// Proses data JSON yang diperoleh
}
</script>
<skrip src = "http://example.com/data.php?callback=dosomething"> </script>
Setelah file JS berhasil dimuat, fungsi yang kami tentukan dalam parameter URL akan dieksekusi, dan data JSON yang kami butuhkan akan dilewati sebagai parameter. Oleh karena itu, JSONP mengharuskan halaman sisi server untuk bekerja sama sesuai.
Salinan kode adalah sebagai berikut:
<? php
$ callback = $ _get ['callback']; // Dapatkan nama fungsi panggilan balik
$ data = array ('a', 'b', 'c'); // data yang akan dikembalikan
echo $ callback. '('. json_encode ($ data). ')'; // output
?>
Akhirnya, outputnya adalah: dosomething (['a', 'b', 'c']);
Jika halaman Anda menggunakan jQuery, maka metode enkapsulasi dapat digunakan untuk melakukan operasi JSONP dengan sangat nyaman.
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
$ .getjson ('http://example.com/data.php?callback=?,function (jsondata)') {
// Proses data JSON yang diperoleh
});
</script>
JQuery akan secara otomatis menghasilkan fungsi global untuk mengganti tanda tanya di callback =?, dan kemudian secara otomatis akan menghancurkan data setelah mendapatkannya. Bahkan, itu memainkan peran fungsi agen sementara. Metode $ .getjson akan secara otomatis menentukan apakah itu domain silang. Jika bukan domain silang, itu akan memanggil metode AJAX biasa; Jika itu adalah domain silang, itu akan memanggil fungsi panggilan balik JSONP dalam bentuk pemuatan asinkron file JS.
Pro dan kontra dari JSONP
Keuntungan JSONP adalah: tidak dibatasi oleh kebijakan homolog seperti permintaan AJAX yang diimplementasikan oleh objek XMLHTTPREQUEST; Ini memiliki kompatibilitas yang lebih baik dan dapat berjalan di browser yang lebih tua, tanpa dukungan XmlHttpRequest atau ActiveX; Dan setelah permintaan selesai, hasilnya dapat dikembalikan dengan menelepon balik.
Kerugian JSONP adalah bahwa itu hanya mendukung mendapatkan permintaan dan bukan jenis permintaan HTTP lainnya seperti POST; Ini hanya mendukung permintaan HTTP lintas domain, dan tidak dapat menyelesaikan masalah bagaimana membuat panggilan JavaScript antara dua halaman di domain yang berbeda.
Perbandingan antara CRO dan JSONP
Dibandingkan dengan JSONP, CORS tidak diragukan lagi lebih canggih, nyaman dan dapat diandalkan.
1. JSONP hanya dapat menerapkan permintaan GET, sementara CORS mendukung semua jenis permintaan HTTP.
2. Menggunakan CORS, pengembang dapat menggunakan XMLHTTPREQUEST biasa untuk memulai permintaan dan mendapatkan data, yang memiliki penanganan kesalahan yang lebih baik daripada JSONP.
3. JSONP terutama didukung oleh browser lama. Mereka sering tidak mendukung CORS, dan sebagian besar browser modern sudah mendukung CORS).
Subdomain silang dengan memodifikasi dokumen.domain
Browser memiliki kebijakan homolog, dan salah satu keterbatasannya adalah bahwa dalam metode pertama kami mengatakan bahwa dokumen dari sumber yang berbeda tidak dapat diminta melalui metode AJAX. Keterbatasan keduanya adalah bahwa interaksi JS tidak dapat dilakukan antara kerangka kerja domain yang berbeda di browser.
Kerangka kerja yang berbeda dapat memperoleh objek jendela, tetapi mereka tidak dapat memperoleh sifat dan metode yang sesuai. Misalnya, ada halaman dengan alamat http://www.example.com/a.html. Ada iframe di halaman ini, dan SRC -nya http://example.com/b.html. Jelas, halaman ini memiliki domain yang berbeda dari kerangka kerja iframe di dalamnya, jadi kita tidak bisa mendapatkan sesuatu di iframe dengan menulis kode JS di halaman:
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
function test () {
var iframe = document.getElementById ('ifame');
var win = document.contentWindow; // Anda bisa mendapatkan objek jendela di iframe, tetapi properti dan metode objek jendela hampir tidak tersedia
var doc = win.document; // objek dokumen di iframe tidak dapat diperoleh di sini
var name = win.name; // atribut nama objek jendela tidak dapat diperoleh di sini
}
</script>
<iframe id = "iframe" src = "http://example.com/b.html" onload = "test ()"> </iframe>
Saat ini, Document.domain bisa berguna. Kita hanya perlu mengatur dokumen.domain dari kedua halaman: http://www.example.com/a.html dan http://example.com/b.html ke nama domain yang sama. Tetapi harus dicatat bahwa pengaturan dokumen. Domain terbatas. Kami hanya dapat mengatur dokumen. Domain ke domain induknya sendiri atau lebih tinggi, dan domain utama harus sama.
1. Set Document.domain di halaman http://www.example.com/a.html:
Salinan kode adalah sebagai berikut:
<iframe id = "iframe" src = "http://example.com/b.html" onload = "test ()"> </iframe>
<type skrip = "Teks/JavaScript">
document.domain = 'example.com'; // Set sebagai domain utama
function test () {
alert (document.geteLementById ('iframe'). ContentWindow); // ContentWindow dapat memperoleh objek jendela dari jendela anak
}
</script>
2. Juga atur document.domain di halaman http://example.com/b.html:
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
document.domain = 'example.com'; // Muat halaman ini di iframe dan atur document.domain untuk membuatnya sama dengan document.domain di halaman utama
</script>
Metode memodifikasi dokumen. Domain hanya cocok untuk interaksi antara kerangka kerja dengan subdomain yang berbeda.