เมื่อ top.window.document มีปัญหา

เมื่อคุณต้องการอ้างถึง object document ของ window เจ้าของ iframe ด้วยคำสั่ง top.window.document แต่พบว่าไม่สามารถเข้าถึงได้ ทั้งๆที่คำสั่งนี้ สามารถทำงานเป็นปกติดีตอนทดสอบบน localhost

index.html

<!DOCTYPE html

	 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

	 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

	<html xml:lang="th" lang="th" xmlns="http://www.w3.org/1999/xhtml">

	<head>

	</head>

	<body>

	<iframe src="subpage.html" width="190" height="160" frameborder="no"></iframe>

	</body>

	 </html>

subpage.html

<script type="text/javascript">

	top.window.onload = function () {

	    document.write(top.window.document.location.href);

	}

	</script>

ดูเผินๆ คำสั้งทั้งหมดด้านบนก็ไม่มีอะไรผิดพลาดครับ... และเมื่อลองทดสอบบน localhost ทุกอย่างก็ราบรื่นดี แต่เมื่อเอาขึ้น Server เพื่อใช้งานจริง กลับพบว่ามันเดี้ยง และตรวจพบ Error นี้
Permission denied to access property 'onload' ที่บรรทัด top.window.onload = function () {
ง่ายๆเลยคือมันบอกว่าไม่สามารถเข้าถึง property onload ของ window ของหน้าบนสุดได้ และถ้าเอาบรรทัดนี้ออก จะถึงปัญหาต่อไป

Permission denied to access property 'document' ที่บรรทัด document.write(top.window.document.location.href);

เช่นเดียวกัน มันบอกว่าไม่สามารถเข้าถึง property document ของหน้าบนสุดได้

ตัวอย่างด้านบนนี้ Error ที่เห็นผมได้มาจาก Firefox (ติดตั้ง Firebug) ซึ่งถ้าเป็น IE คุณอ าจไม่เห็น Error อะไรเลยก็ได้ ซึ่งเงื่อนไขการทดสอบคือ ครั้งแรก ทดสอบบน localhost ในขั้นตอนออกแบบตามปกติ ซึ่งก็ผ่านฉลุย... และในขั้นที่ 2 อัปโหลดขึ้น Server (ประมาณว่าจะใช้จริงละนะ) โดยที่อัปโหลดเฉพาะไฟล์ subpage.html ไปไว้บน Server โดยที่ไฟล์ index.html ยังอยู่ที่ localhost ซึ่งผมจะเรียกเพื่อทดสอบที่นี่

จากการตรวจสอบและค้นหาคำตอบอยู่เป็นนานสองนาน (สามนานสี่นาน....) พบว่าปัญหาเกิดจากความปลอดภัยของ Browser เองครับ อันเนื่องมาจากข้อจำกัดด้านความปลอดภัยของตัวบราวเซอร์ที่จำกัดการเข้าถึง element ต่างๆของหน้าต่างแม่จาก iframe ซึ่งเหตุผลที่ต้องป้องกันก็เพราะว่า สมมุติผมทำ script เพื่อแจกจ่ายโดยกำหนดให้ ผู้ใช้ต้องสร้าง iframe เพื่อเรียก script ที่เว็บผมไปใช้งาน ซึ่งถ้า Browser สามารถเข้าถึง element ของหน้าต่างแม่ได้จะเกิดอะไรขึ้น ถ้าผมทำการตรวจจับการกดคีย์บอร์ดของหน้าต่างแม่ แล้วคอยดักเอา username หรือ password แล้วใช้ Ajax ส่งกลับไปบันทึกไว้ยังเว็บผม คงไม่ต้องอธิบายนะครับ...

สรุปคือปัญหานี้ไม่มีทางแก้นะครับ ให้เลี่ยงไปใช้วิธ๊อื่นแทน เพื่อความปลอดภัยของตัวคุณเองหากต้องการเขียน script เพื่อจ่ายแจก เนื่องจากมันจะไม่สามารถเข้าถึงได้หาก script ทั้ง 2 ส่วน อยู่บนโดเมนที่ต่างกัน แต่ถ้าคุณใช้ script ทั้งสองส่วนที่โดเมนเดียวกัน ปัญหาข้างต้นจะไม่เกิด

ข้อควรระวังในการใช้งาน script ลักษณะนี้ มีอยู่ว่า หากจำเป็นต้องใช้งาน script ตามตัวอย่างด้านบนให้ระบุ src ของ iframe แบบไม่ต้องระบุโดเมนครับ เช่น <iframe src="subpage.html" ></iframe> เหมือนตามตัวอย่างนะครับ เพราะว่าหากระบุโดเมนลงไป เช่น http:/www.xxx.com/subpage.html แล้วละก็ หากโดเมนที่เรียกไม่มี www ปัญหาข้างต้นอาจเกิดขึ้นได้ เนื่องจากการที่โดเมน มีหรือไม่มี www Browser มองว่าเป็นคนละโดเมนกัน