JavaScript เป็นเทคโนโลยีการเขียนสคริปต์แบบไดนามิกส่วนหน้าซึ่งมักใช้ในการพัฒนาเว็บ ใน JavaScript มีข้อ จำกัด ด้านความปลอดภัยที่สำคัญมากที่เรียกว่า "นโยบายต้นกำเนิดเดียวกัน" กลยุทธ์นี้มีข้อ จำกัด ที่สำคัญในเนื้อหาหน้าเว็บที่รหัส JavaScript สามารถเข้าถึงได้นั่นคือ JavaScript สามารถเข้าถึงเนื้อหาภายใต้โดเมนเดียวกันกับเอกสารที่มีอยู่เท่านั้น
JavaScript เป็นกลยุทธ์การรักษาความปลอดภัยที่มีความสำคัญอย่างยิ่งเมื่อการเขียนโปรแกรมหลายอิเล็กทรอนิกส์หรือหลายหน้าต่างและ AJAX ตามกลยุทธ์นี้รหัส JavaScript ที่มีอยู่ในหน้าภายใต้ Baidu.com ไม่สามารถเข้าถึงเนื้อหาหน้าเว็บภายใต้ชื่อโดเมน Google.com; แม้แต่หน้าเว็บระหว่างโดเมนย่อยที่แตกต่างกันก็ไม่สามารถเข้าถึงได้ผ่านรหัส JavaScript ผลกระทบต่อ AJAX คือการร้องขอ AJAX ที่ดำเนินการผ่าน XMLHTTPRequest ไม่สามารถส่งคำขอไปยังโดเมนที่แตกต่างกันได้ ตัวอย่างเช่นหน้าภายใต้ abc.example.com ไม่สามารถส่งคำขอ AJAX ไปยัง def.example.com ฯลฯ
อย่างไรก็ตามเมื่อทำการเขียนโปรแกรมส่วนหน้าในเชิงลึกการดำเนินการข้ามโดเมนจะต้องใช้อย่างหลีกเลี่ยงไม่ได้และ "กลยุทธ์ต้นฉบับเดียวกัน" ดูเหมือนจะเรียกร้องมากเกินไป บทความนี้สรุปเทคโนโลยีบางอย่างที่จำเป็นในโดเมนในประเด็นนี้
ด้านล่างเราจะหารือเกี่ยวกับเทคโนโลยีข้ามโดเมนในสองสถานการณ์: ก่อนที่จะพูดคุยเทคโนโลยีข้ามโดเมนในโดเมนย่อยที่แตกต่างกันแล้วหารือเกี่ยวกับเทคโนโลยีข้ามโดเมนในโดเมนที่แตกต่างกันอย่างสิ้นเชิง
(i) เทคโนโลยีข้ามโดเมนของโดเมนย่อยที่แตกต่างกัน
เราพูดคุยกันในสองคำถาม: คำถามแรกคือวิธีการโทร JavaScript ข้ามโดเมนย่อยที่แตกต่างกัน คำถามที่สองคือวิธีการส่งคำขอ AJAX ไปยังโดเมนย่อยที่แตกต่างกัน
มาแก้ปัญหาแรกก่อนโดยสมมติว่ามีโดเมนย่อยสองโดเมนที่แตกต่างกันภายใต้โดเมนตัวอย่าง: abc.example.com และ def.example.com ตอนนี้สมมติว่ามีหน้าภายใต้ def.example.com ที่กำหนดฟังก์ชัน JavaScript:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น funcindef () {
-
-
เราต้องการโทรหาฟังก์ชั่นด้านบนในหน้าภายใต้ abc.example.com สมมติว่าหน้าด้านล่าง abc.example.com เรากำลังคุยกันอยู่ในหน้าด้านล่าง def.example.com ในรูปแบบของ iframe ดังนั้นเราอาจลองโทรต่อไปนี้ใน iframe:
การคัดลอกรหัสมีดังนี้:
window.top.funcindef ();
ตกลงเราสังเกตเห็นว่าการโทรนี้เป็นสิ่งต้องห้ามโดย "นโยบายต้นกำเนิดเดียวกัน" ที่กล่าวถึงก่อนหน้านี้และเครื่องยนต์ JavaScript จะทำการยกเว้นโดยตรง
เพื่อที่จะใช้การโทรข้างต้นเราสามารถทำได้โดยการแก้ไขแอตทริบิวต์โดเมนของสองหน้า ตัวอย่างเช่นเราสามารถเพิ่มตัวอย่างรหัส JavaScript ต่อไปนี้ที่ด้านบนของทั้งสองหน้าภายใต้ abc.example.com และ def.example.com:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
document.domain = "example.com";
</script>
ด้วยวิธีนี้ทั้งสองหน้ากลายเป็นโดเมนเดียวกันและการโทรก่อนหน้านี้สามารถดำเนินการได้ตามปกติ
สิ่งหนึ่งที่ควรทราบที่นี่คือเอกสารคุณสมบัติโดเมนของหน้าสามารถตั้งค่าเป็นชื่อโดเมนระดับบนสุดเท่านั้น (ยกเว้นชื่อโดเมนระดับแรก) แต่ไม่สามารถตั้งค่าเป็นชื่อโดเมนย่อยที่ลึกกว่าชื่อโดเมนปัจจุบัน ตัวอย่างเช่นหน้าของ abc.example.com สามารถตั้งค่าโดเมนเป็น example.com ไม่สามารถตั้งค่าเป็น sub.abc.example.com และแน่นอนว่าไม่สามารถตั้งค่าเป็นชื่อโดเมนระดับแรก com
ตัวอย่างข้างต้นกล่าวถึงสถานการณ์ที่สองหน้าเป็นของความสัมพันธ์ที่ซ้อนกันของ iframe เมื่อทั้งสองหน้าเปิดและเปิดความสัมพันธ์หลักการก็เหมือนกันทุกประการ
มาแก้ปัญหาที่สองกันเถอะ: วิธีส่งคำขอ AJAX ไปยังโดเมนย่อยที่แตกต่างกัน
โดยปกติเราจะใช้รหัสคล้ายกับต่อไปนี้เพื่อสร้างวัตถุ XMLHTTPREQUEST:
การคัดลอกรหัสมีดังนี้:
โรงงาน = [
function () {ส่งคืน XMLHTTTPREQUEST ใหม่ (); -
function () {ส่งคืนใหม่ activexobject ("msxml2.xmlhttp"); -
function () {ส่งคืน ActiveXObject ใหม่ ("microsoft.xmlhttp"); -
-
ฟังก์ชั่น newRequest () {
สำหรับ (var i = 0; i <</span> factories.length; i ++) {
พยายาม{
Var Factory = โรงงาน [i];
Return Factory ();
} catch (e) {}
-
คืนค่า null;
-
รหัสข้างต้นหมายถึง ActiveXObject สำหรับความเข้ากันได้กับเบราว์เซอร์ซีรีย์ IE6 ทุกครั้งที่เราเรียกฟังก์ชัน Newrequest เราจะได้รับวัตถุ AJAX ที่เราเพิ่งสร้างขึ้นมาจากนั้นใช้วัตถุ AJAX นี้เพื่อส่งคำขอ HTTP ตัวอย่างเช่นรหัสต่อไปนี้จะส่งคำขอ GET ไปยัง ABC.Example.com:
การคัดลอกรหัสมีดังนี้:
คำขอ var = newRequest ();
request.open ("รับ", "http://abc.example.com");
request.send (null);
สมมติว่ารหัสข้างต้นรวมอยู่ในหน้าภายใต้ชื่อโดเมน abc.example.com การร้องขอ GET สามารถส่งได้สำเร็จตามปกติโดยไม่มีปัญหาใด ๆ อย่างไรก็ตามหากคุณกำลังส่งคำขอไปที่ def.example.com มีปัญหาข้ามโดเมนและเครื่องยนต์ JavaScript ส่งข้อยกเว้น
วิธีแก้ปัญหาคือการวางไฟล์ข้ามโดเมนไว้ใต้โดเมน def.example.com โดยสมมติว่ามันเรียกว่า crossdomain.html; จากนั้นย้ายคำจำกัดความของฟังก์ชัน newRequest ก่อนหน้าไปยังไฟล์ข้ามโดเมนนี้ ในที่สุดเช่นเดียวกับการฝึกฝนก่อนหน้านี้ในการแก้ไขเอกสารค่าโดเมนเพิ่มส่วนบนของหน้าเว็บเรียก Ajax ภายใต้ไฟล์ crossdomain.html และ abc.example.com โดเมน:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
document.domain = "example.com";
</script>
ในการใช้ไฟล์ข้ามโดเมนเราได้ฝัง iframe ที่ซ่อนอยู่ที่ชี้ไปที่ไฟล์ข้ามโดเมนในหน้าเรียก AJAX ภายใต้โดเมน abc.example.com ตัวอย่างเช่น:
[รหัส]
<iframe name = "xd_iframe" style = "แสดง: ไม่มี" src = "http://def.example.com/crossdomain.html"> </iframe>
ในเวลานี้หน้าภายใต้โดเมน abc.example.com และ crossdomain.html ทั้งคู่อยู่ในโดเมนเดียวกัน (example.com) เราสามารถเรียกฟังก์ชัน newRequest ใน crossdomain.html ในหน้าภายใต้โดเมน abc.example.com:
การคัดลอกรหัสมีดังนี้:
var request = window.frames ["xd_iframe"]. newRequest ();
วัตถุคำขอที่ได้รับด้วยวิธีนี้สามารถส่งคำขอ HTTP ไปที่ http://def.example.com
(ii) เทคโนโลยีข้ามโดเมนที่มีโดเมนที่แตกต่างกันอย่างสิ้นเชิง
หากชื่อโดเมนระดับบนสุดแตกต่างกันตัวอย่างเช่นหากคุณต้องการสื่อสารในส่วนหน้าผ่าน JavaScript ระหว่าง Example1.com และ Example2.com เทคโนโลยีที่ต้องการนั้นซับซ้อนกว่า
ก่อนที่จะอธิบายเทคโนโลยีข้ามโดเมนของโดเมนที่แตกต่างกันขอให้เราทำให้ชัดเจนว่าเทคโนโลยีที่เราต้องการพูดคุยเกี่ยวกับด้านล่างนั้นสามารถใช้ได้กับสถานการณ์ก่อนหน้าของโดเมนข้ามเพราะ Cross-Domain เป็นเพียงกรณีพิเศษของปัญหาข้ามโดเมน แน่นอนว่าการใช้เทคโนโลยีที่เหมาะสมภายใต้สถานการณ์ที่เหมาะสมสามารถมั่นใจได้ว่ามีประสิทธิภาพที่ดีขึ้นและมีเสถียรภาพที่สูงขึ้น
ในระยะสั้นตามความต้องการข้ามโดเมนที่แตกต่างกันเทคโนโลยีข้ามโดเมนสามารถแบ่งออกเป็นหมวดหมู่ต่อไปนี้:
1. คำขอข้ามโดเมนข้ามโดเมน
2. การใช้งานข้ามโดเมนผ่าน iframe
3. คำขอ HTTP แฟลชแฟลชแฟลช
4. window.postmessage
บทความนี้จะจบลงที่นี่ก่อน เราจะแนะนำเทคโนโลยีข้ามโดเมนทั้งสี่ที่กล่าวถึงข้างต้นโดยละเอียด เราจะนำเสนอในภายหลัง!