JavaScript adalah teknologi skrip dinamis front-end yang sering digunakan dalam pengembangan web. Dalam JavaScript, ada batasan keamanan yang sangat penting yang disebut "kebijakan asal-kata". Strategi ini menempatkan pembatasan penting pada konten halaman yang dapat diakses oleh kode JavaScript, yaitu, JavaScript hanya dapat mengakses konten di bawah domain yang sama dengan dokumen yang mengandungnya.
JavaScript adalah strategi keamanan yang sangat penting ketika pemrograman multi-iFrame atau multi-windows dan Ajax. Menurut strategi ini, kode JavaScript yang terkandung di halaman di bawah baidu.com tidak dapat mengakses konten halaman dengan nama domain Google.com; Bahkan halaman antara subdomain yang berbeda tidak dapat diakses oleh satu sama lain melalui kode JavaScript. Dampaknya pada AJAX adalah bahwa permintaan AJAX diterapkan melalui XMLHTTPREQUEST tidak dapat mengirimkan permintaan ke domain yang berbeda. Misalnya, halaman di bawah ABC.example.com tidak dapat mengirimkan permintaan AJAX ke def.example.com, dll.
Namun, ketika melakukan beberapa pemrograman front-end yang mendalam, operasi lintas domain tidak dapat dihindari diperlukan, dan "strategi asal-kata" tampaknya terlalu menuntut. Artikel ini merangkum beberapa teknologi yang diperlukan di seluruh domain tentang masalah ini.
Di bawah ini kita membahas teknologi lintas domain dalam dua situasi: Pertama membahas teknologi lintas domain di subdomain yang berbeda, dan kemudian membahas teknologi lintas domain di domain yang sama sekali berbeda.
(I) Teknologi lintas domain dari subdomain yang berbeda.
Kami membahasnya secara terpisah dalam dua pertanyaan: pertanyaan pertama adalah bagaimana membuat panggilan JavaScript di berbagai subdomain; Pertanyaan kedua adalah bagaimana mengirimkan permintaan AJAX ke subdomain yang berbeda.
Mari kita selesaikan masalah pertama terlebih dahulu, dengan asumsi bahwa ada dua subdomain yang berbeda di bawah domain example.com: ABC.example.com dan def.example.com. Sekarang misalkan ada halaman di bawah def.example.com yang mendefinisikan fungsi JavaScript:
Salinan kode adalah sebagai berikut:
function funcindef () {
.....
}
Kami ingin memanggil fungsi di atas di halaman di bawah ABC.example.com. Misalkan halaman di bawah ABC.Example.com yang kita diskusikan tertanam di halaman di bawah ini def.example.com dalam bentuk iframe, jadi kami dapat mencoba membuat panggilan berikut di iframe:
Salinan kode adalah sebagai berikut:
window.top.funcindef ();
OK, kami perhatikan bahwa panggilan ini dilarang oleh "kebijakan asal-kata" yang disebutkan sebelumnya, dan mesin JavaScript akan langsung memberikan pengecualian.
Untuk mengimplementasikan panggilan di atas, kita dapat melakukannya dengan memodifikasi atribut domain dari dua halaman. Misalnya, kami dapat menambahkan cuplikan kode JavaScript berikut di bagian atas kedua halaman di bawah ABC.example.com dan def.example.com:
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
document.domain = "example.com";
</script>
Dengan cara ini, kedua halaman menjadi domain yang sama, dan panggilan sebelumnya dapat dieksekusi secara normal.
Satu hal yang perlu diperhatikan di sini adalah bahwa properti Document.domain dari suatu halaman hanya dapat diatur ke nama domain tingkat atas (kecuali nama domain tingkat pertama), tetapi tidak dapat diatur ke nama subdomain yang lebih dalam daripada nama domain saat ini. Misalnya, halaman ABC.Example.com hanya dapat mengatur domainnya ke example.com, tidak dapat diatur ke sub.abc.example.com, dan tentu saja tidak dapat diatur ke nama domain tingkat pertama com.
Contoh di atas membahas situasi di mana dua halaman termasuk dalam hubungan bersarang iframe. Ketika kedua halaman itu terbuka dan hubungan terbuka, prinsipnya persis sama.
Mari kita selesaikan masalah kedua: Cara mengirimkan permintaan AJAX ke subdomain yang berbeda.
Biasanya, kami akan menggunakan kode yang mirip dengan yang berikut untuk membuat objek XMLHTTPREQUEST:
Salinan kode adalah sebagai berikut:
Pabrik = [
function () {return new xmlhttpRequest (); },
function () {return new ActivexObject ("msxml2.xmlhttp"); },
function () {return new ActivexObject ("microsoft.xmlhttp"); }
];
function newRequest () {
untuk (var i = 0; i <</span> factory.length; i ++) {
mencoba{
var factory = pabrik [i];
mengembalikan pabrik ();
} catch (e) {}
}
kembali nol;
}
Kode di atas mengacu pada ActiveXObject untuk kompatibilitas dengan browser seri IE6. Setiap kali kami memanggil fungsi NewRequest, kami mendapatkan objek AJAX yang baru saja kami buat, dan kemudian menggunakan objek AJAX ini untuk mengirim permintaan HTTP. Misalnya, kode berikut mengirimkan permintaan GET ke ABC.Example.com:
Salinan kode adalah sebagai berikut:
var request = newRequest ();
request.open ("get", "http://abc.example.com");
request.send (null);
Dengan asumsi kode di atas termasuk dalam halaman di bawah nama domain ABC.example.com, permintaan GET dapat dikirimkan secara normal tanpa masalah. Namun, jika Anda sekarang mengirim permintaan ke def.example.com, ada masalah lintas domain dan mesin JavaScript melempar pengecualian.
Solusinya adalah menempatkan file lintas domain di bawah domain def.example.com, dengan asumsi itu disebut crossdomain.html; kemudian pindahkan definisi fungsi newRequest sebelumnya ke file lintas domain ini; Akhirnya, sama seperti praktik sebelumnya memodifikasi nilai dokumen.
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
document.domain = "example.com";
</script>
Untuk menggunakan file lintas domain, kami menanamkan iframe tersembunyi yang menunjuk ke file domain silang di halaman yang memanggil Ajax di bawah domain ABC.Example.com, misalnya:
[kode]
<iframe name = "xd_iframe" style = "display: none" src = "http://def.example.com/crossdomain.html"> </iframe>
Pada saat ini, halaman di bawah domain ABC.example.com dan CrossDomain.html keduanya dalam domain yang sama (example.com). Kita dapat memanggil fungsi newRequest di crossdomain.html di halaman di bawah domain ABC.example.com:
Salinan kode adalah sebagai berikut:
var request = window.frames ["xd_iframe"]. newRequest ();
Objek permintaan yang diperoleh dengan cara ini dapat mengirim permintaan http ke http://def.example.com.
(Ii) Teknologi lintas domain dengan domain yang sama sekali berbeda.
Jika nama domain tingkat atas berbeda, misalnya, jika Anda ingin berkomunikasi di front-end melalui javascript antara example1.com dan example2.com, teknologi yang diperlukan lebih rumit.
Sebelum menjelaskan teknologi lintas domain dari berbagai domain, mari kita jelaskan bahwa teknologi yang ingin kita bicarakan di bawah ini juga berlaku untuk situasi sebelumnya dari domain silang, karena domain silang hanyalah kasus khusus dari masalah lintas domain. Tentu saja, menggunakan teknologi yang tepat dalam keadaan yang tepat dapat memastikan efisiensi yang lebih baik dan stabilitas yang lebih tinggi.
Singkatnya, sesuai dengan kebutuhan lintas domain yang berbeda, teknologi lintas domain dapat diklasifikasikan ke dalam kategori berikut:
1. JSONP Cross-domain mendapatkan permintaan
2. Implementasi silang melalui iframe
3. Permintaan HTTP Cross-Domain Flash
4. Window.PostMessage
Artikel ini akan berakhir di sini terlebih dahulu. Kami akan memperkenalkan empat teknologi lintas domain yang disebutkan di atas secara rinci. Kami akan menyajikannya nanti!