นโยบายต้นทางเดียวกันเป็นฟีเจอร์ความปลอดภัยของเบราว์เซอร์ที่จำกัดวิธีที่เอกสารและสคริปต์ในต้นทางหนึ่งสามารถโต้ตอบกับทรัพยากรในอีกต้นทางหนึ่ง
เบราว์เซอร์สามารถโหลดและแสดงทรัพยากรจากหลายเว็บไซต์พร้อมกันได้ คุณอาจเปิดหลายแท็บพร้อมกัน หรือเว็บไซต์อาจฝัง iframe หลายรายการจากเว็บไซต์ต่างๆ หากไม่มีข้อจำกัดในการโต้ตอบระหว่างทรัพยากรเหล่านี้ และสคริปต์ถูกผู้โจมตีบุกรุก สคริปต์อาจเปิดเผยทุกอย่างในเบราว์เซอร์ของผู้ใช้
นโยบายต้นทางเดียวกันจะป้องกันไม่ให้เกิดเหตุการณ์นี้ขึ้นโดยการบล็อกสิทธิ์การอ่านทรัพยากรที่โหลดจากต้นทางอื่น "แต่เดี๋ยวก่อน" คุณอาจพูดว่า "ฉันโหลดรูปภาพและสคริปต์จากต้นทางอื่นๆ ตลอดเวลา" เบราว์เซอร์อนุญาตให้แท็กบางแท็กฝังทรัพยากรจากต้นทางอื่นได้ นโยบายนี้เป็นส่วนหนึ่งของประวัติศาสตร์และอาจทำให้เว็บไซต์ของคุณเสี่ยงต่อช่องโหว่ต่างๆ เช่น การลักลอบคลิกโดยใช้ iframe คุณสามารถจำกัดการอ่านแบบข้ามต้นทางของแท็กเหล่านี้ได้โดยใช้นโยบายรักษาความปลอดภัยเนื้อหา
สิ่งใดที่ถือว่าเป็นต้นทางเดียวกัน
ต้นทางจะกำหนดโดยรูปแบบ (หรือที่เรียกว่าโปรโตคอล เช่น HTTP หรือ HTTPS) พอร์ต (หากระบุไว้) และโฮสต์ เมื่อทั้ง 3 อย่างเหมือนกันสำหรับ URL 2 รายการ ระบบจะถือว่า URL เหล่านั้นมีต้นทางเดียวกัน เช่น
http://www.example.com/foo มีต้นทางเดียวกันกับ
http://www.example.com/bar
แต่ไม่ใช่ https://www.example.com/bar
เนื่องจากรูปแบบแตกต่างกัน
สิ่งที่อนุญาตและสิ่งที่บล็อก
โดยทั่วไปแล้ว ระบบจะอนุญาตให้ฝังทรัพยากรแบบข้ามต้นทาง แต่จะบล็อกการอ่านทรัพยากรแบบข้ามต้นทาง
| iframes |
โดยปกติแล้วจะอนุญาตให้ฝังแบบข้ามต้นทาง (ขึ้นอยู่กับคำสั่ง X-Frame-Options) แต่ไม่อนุญาตให้อ่านแบบข้ามต้นทาง (เช่น การใช้ JavaScript เพื่อเข้าถึงเอกสารใน iframe)
|
| CSS |
คุณสามารถฝัง CSS แบบข้ามต้นทางได้โดยใช้องค์ประกอบ <link> หรือ @import ในไฟล์ CSS อาจต้องใช้ส่วนหัว Content-Type ที่ถูกต้อง
|
| แบบฟอร์ม |
URL แบบข้ามต้นทางสามารถใช้เป็นค่าแอตทริบิวต์ action ขององค์ประกอบแบบฟอร์มได้ เว็บแอปพลิเคชันสามารถเขียนข้อมูลแบบฟอร์มไปยังปลายทางแบบข้ามต้นทางได้
|
| รูปภาพ | อนุญาตให้ฝังรูปภาพแบบข้ามต้นทาง อย่างไรก็ตาม ระบบจะบล็อกการอ่านข้อมูลรูปภาพแบบข้ามต้นทาง (เช่น การดึงข้อมูลไบนารีจากรูปภาพแบบข้ามต้นทางโดยใช้ JavaScript) |
| สื่อประสม |
คุณฝังวิดีโอและเสียงแบบข้ามต้นทางได้โดยใช้องค์ประกอบ <video> และ <audio>
|
| แบบตัวเขียน | คุณสามารถฝังสคริปต์แบบข้ามต้นทางได้ แต่ระบบอาจบล็อกการเข้าถึง API บางรายการ (เช่น คำขอดึงข้อมูลแบบข้ามต้นทาง) |
สิ่งที่ต้องทำ: DevSite - การประเมินการคิดและตรวจสอบ
วิธีป้องกันการลักลอบคลิก
การโจมตีที่เรียกว่า "การหลอกให้คลิก" จะฝังเว็บไซต์ไว้ใน iframe และวางซ้อนปุ่มโปร่งใสซึ่งลิงก์ไปยังปลายทางอื่น ผู้ใช้ถูกหลอกให้คิดว่ากำลังเข้าถึงแอปพลิเคชันของคุณขณะส่งข้อมูลไปยังผู้โจมตี
หากต้องการบล็อกเว็บไซต์อื่นๆ ไม่ให้ฝังเว็บไซต์ของคุณใน iframe ให้เพิ่มนโยบายความปลอดภัยของเนื้อหาที่มีคำสั่ง frame-ancestors ลงในส่วนหัว HTTP
หรือจะเพิ่ม X-Frame-Options ลงในส่วนหัว HTTP ก็ได้ โปรดดูรายการตัวเลือกที่ MDN
สรุป
หวังว่าคุณจะรู้สึกโล่งใจขึ้นเล็กน้อยที่เบราว์เซอร์ทำงานอย่างหนักเพื่อเป็นผู้ดูแลความปลอดภัยบนเว็บ แม้ว่าเบราว์เซอร์จะพยายามรักษาความปลอดภัยด้วยการบล็อกการเข้าถึงทรัพยากร แต่บางครั้งคุณอาจต้องการเข้าถึงทรัพยากรแบบข้ามต้นทางในแอปพลิเคชัน ในคู่มือถัดไป ให้ดูข้อมูลเกี่ยวกับกลไกการแชร์ทรัพยากรข้ามโดเมน (CORS) และวิธีบอกเบราว์เซอร์ว่าอนุญาตให้โหลดทรัพยากรข้ามโดเมนจากแหล่งที่มาที่เชื่อถือได้