นโยบายต้นทางเดียวกันคือฟีเจอร์ความปลอดภัยของเบราว์เซอร์ที่จำกัดวิธี เอกสารและสคริปต์ในต้นทางหนึ่งๆ สามารถโต้ตอบกับทรัพยากรได้ จากต้นทางอื่น
เบราว์เซอร์สามารถโหลดและแสดงทรัพยากรจากเว็บไซต์หลายแห่งพร้อมกันได้ คุณอาจมี แท็บหลายแท็บเปิดพร้อมกัน หรือเว็บไซต์หนึ่งสามารถฝัง iframe หลายรายการจาก เว็บไซต์ต่างๆ หากไม่มีข้อจำกัดในการโต้ตอบระหว่าง และสคริปต์ถูกบุกรุกจากผู้โจมตี สคริปต์นั้นอาจ เปิดเผยทุกอย่างในเบราว์เซอร์ของผู้ใช้
นโยบายต้นทางเดียวกันป้องกันปัญหานี้โดยการบล็อกการเข้าถึงการอ่าน ทรัพยากรที่โหลดมาจากต้นทางที่อื่น "แต่เดี๋ยวก่อน" คุณบอกว่า "ฉันโหลดรูปภาพ และสคริปต์จากต้นทางอื่นๆ ได้ตลอดเวลา" เบราว์เซอร์ช่วยให้แท็ก 2-3 รายการ ฝังทรัพยากรจากต้นทางอื่น นโยบายนี้ส่วนใหญ่เกี่ยวข้องกับ และอาจทำให้เว็บไซต์ของคุณมีความเสี่ยง เช่น การหลอกให้คลิกโดยใช้ iframe คุณจำกัดการอ่านแบบข้ามต้นทางได้ แท็กเหล่านี้โดยใช้การรักษาความปลอดภัยเนื้อหา นโยบาย
สิ่งใดถือว่ามาจากแหล่งที่มาเดียวกัน
ต้นทางจะกำหนดโดยรูปแบบ (หรือเรียกอีกอย่างว่าโปรโตคอล เป็นต้น)
HTTP หรือ HTTPS), พอร์ต (หากระบุไว้) และโฮสต์ เมื่อทั้ง 3 อย่างเหมือนกัน
สำหรับ URL 2 รายการ จะถือว่าเป็นที่มาเดียวกัน ตัวอย่างเช่น
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) และวิธีบอกเบราว์เซอร์ว่าการโหลดทรัพยากรแบบข้ามต้นทาง อนุญาตจากแหล่งที่มาที่เชื่อถือได้