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