คุณจะฝังเนื้อหาอย่างปลอดภัยด้วย iframe และ sandbox ได้อย่างไร

Question

Accepted Answer

` ``` ## วิธี sandbox ทำงาน `sandbox` **โดยไม่มีค่า** ใช้ข้อจำกัด *สูงสุด*: ไม่มีสคริปต์ ไม่มีแบบฟอร์ม ไม่มีป๊อปอัป ปฏิบัติต่อเนื้อหาเป็นที่มาเฉพาะตัว จากนั้นคุณจึง **เปิดใช้งานความสามารถใหม่อีกครั้งแบบเลือกได้** โดยการแสดงรายการโทเค็น: ```html ``` โทเค็นทั่วไป: - `allow-scripts` — ให้มันเรียกใช้ JavaScript - `allow-forms` — ให้มันส่งแบบฟอร์ม - `allow-same-origin` — เก็บรักษาที่มาของมัน (หากไม่มี มันจะเป็นที่มา null ซึ่งบล็อกการเก็บข้อมูล/คุกกี้) - `allow-popups`, `allow-modals`, `allow-top-navigation` **หมายเหตุด้านความปลอดภัย:** การรวม `allow-scripts` **และ** `allow-same-origin` ช่วยให้เฟรมสามารถลบ sandbox ของตัวเองได้ (หากเป็นที่มาเดียวกัน) — หลีกเลี่ยงการรวมนี้สำหรับเนื้อหาที่ไม่น่าเชื่อถือ ## แอตทริบิวต์ความปลอดภัยอื่น ๆ ```html ``` ## ทำไมสิ่งนี้จึงสำคัญ Iframe ฝังเนื้อหาของบุคคลที่สามหรือสร้างโดยผู้ใช้ที่คุณไม่ได้ควบคุมและไม่ควรวางใจอย่างเต็มที่ `sandbox` (ปฏิเสธตามค่าเริ่มต้น อนุญาตเฉพาะสิ่งที่จำเป็น) บวก `referrerpolicy`/`allow` ช่วยให้คุณสามารถจำกัดเนื้อหานั้นได้ — ป้องกันไม่ให้มันเรียกใช้สคริปต์ที่ไม่ต้องการ นำทางในหน้าของคุณ หรือเข้าถึงคุณสมบัติของอุปกรณ์ เพิ่ม `title` เพื่อการเข้าถึง และ `loading="lazy"` เพื่อประสิทธิภาพ