นโยบายที่มีต้นทางเดียวกัน

Mariko Kosaka

นโยบายต้นทางเดียวกันคือฟีเจอร์ความปลอดภัยของเบราว์เซอร์ที่จำกัดวิธี เอกสารและสคริปต์ในต้นทางหนึ่งๆ สามารถโต้ตอบกับทรัพยากรได้ จากต้นทางอื่น

เบราว์เซอร์สามารถโหลดและแสดงทรัพยากรจากเว็บไซต์หลายแห่งพร้อมกันได้ คุณอาจมี แท็บหลายแท็บเปิดพร้อมกัน หรือเว็บไซต์หนึ่งสามารถฝัง 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

วิธีการป้องกันการเกิดคลิกแจ็ก

วันที่ การแย่งชิงการคลิก
ภาพ: แสดงกลไกการหลอกล่อลวงใน 3 เลเยอร์แยกกัน (ไซต์พื้นฐาน เว็บไซต์ iframe, ปุ่มโปร่งใส)

การโจมตีที่เรียกว่า "การหลอกให้คลิก" ฝังเว็บไซต์ใน iframe และการวางซ้อน ปุ่มโปร่งใสที่ลิงก์ไปยังปลายทางอื่น ผู้ใช้ถูกหลอก พวกเขากำลังเข้าถึงแอปพลิเคชันของคุณขณะที่ส่งข้อมูลไปยัง ผู้โจมตีได้

หากต้องการบล็อกเว็บไซต์อื่นๆ ไม่ให้ฝังเว็บไซต์ของคุณใน iframe ให้เพิ่มเนื้อหา นโยบายความปลอดภัยกับ frame-ancestors คำสั่ง เข้ากับส่วนหัว HTTP

อีกทางเลือกหนึ่งคือการเพิ่ม X-Frame-Options ในส่วนหัว HTTP ดูที่ MDN เพื่อดูรายการตัวเลือก

สรุป

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