Defaults.Exposed › การแก้ไข › การป้องกัน Clickjacking (X-Frame-Options)

วิธีแก้ไข การป้องกัน Clickjacking (X-Frame-Options)

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

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

สิ่งนี้อาจทำให้คุณเสียค่าใช้จ่าย

• นักต้มตุ๋นซ่อนหน้าเข้าสู่ระบบหรือการชำระเงินจริงของคุณไว้หลังหน้าที่ดูบริสุทธิ์และหลอกลูกค้า 'ยืนยัน' การโอนหรือการเปลี่ยนแปลงการตั้งค่าโดยไม่รู้ตัว — ลูกค้าโทษคุณ ไม่ใช่ผู้โจมตี
• พื้นที่บัญชีที่เข้าสู่ระบบของคุณโหลดอย่างมองไม่เห็นบน 'คุณชนะ — คลิกเพื่อรับ' หน้า การคลิกอนุมัติการเปลี่ยนแปลงจริงบนบัญชีของลูกค้า และคุณรับสายสนับสนุนโกรธ
• ทีม IT ของผู้มีโอกาสเป็นลูกค้ารันการสแกนความปลอดภัยเร็วก่อนลงนาม เห็นว่าเว็บไซต์ของคุณสามารถฝังได้โดยทุกคน และตั้งค่าสถานะเป็นความเสี่ยงที่หยุดหรือฆ่าดีล
• แบรนด์ของคุณกลายเป็นเหยื่อล่อในแคมเปญฉ้อโกง ลูกค้าที่ถูกจับจำว่ามันเป็น 'บริษัทที่เว็บไซต์อนุญาตให้เกิดขึ้น'
• การสแกนผู้ตรวจสอบหรือประกันภัยไซเบอร์แสดงรายการการป้องกัน clickjacking ที่หายไปเป็นความล้มเหลวด้านสุขอนามัยพื้นฐาน — ถูกแก้ไขได้ น่าอับอายที่ถูกตั้งค่าสถานะ

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

มันคืออะไรในคำพูดธรรมดา

เมื่อมีคนเข้าเว็บไซต์ของคุณ เบราว์เซอร์ของพวกเขายังสามารถถูกบอกให้โหลดเว็บไซต์ของคุณภายในเว็บไซต์อื่น — เหมือนหน้าต่างเล็กฝังในหน้าใหญ่กว่า นั่นฟังดูไม่เป็นอันตราย และบางครั้งก็เป็นเช่นนั้น แต่มันเป็นกลไกเบื้องหลังการโจมตีที่เรียกว่า clickjacking

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

การป้องกัน Clickjacking คือคำสั่งสั้น มองไม่เห็นที่เว็บไซต์ของคุณส่งไปยังเบราว์เซอร์ของทุกผู้เข้าชมที่กล่าวว่า:

“อย่าให้เว็บไซต์อื่นโหลดฉันภายในพวกมัน ถ้ามีคนพยายาม ปฏิเสธ”

เบราว์เซอร์สมัยใหม่เชื่อฟังสิ่งนี้โดยอัตโนมัติ เมื่อเปิดใช้งาน เล่ห์กลก็แค่ไม่ทำงาน

สิ่งนี้อาจทำให้คุณสูญเสียอะไร

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

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

3. ดีลที่หยุด ลูกค้ารายใหญ่ส่งแบบสอบถามความปลอดภัยมาตรฐานก่อนลงนาม บรรทัดหนึ่งถามว่าเว็บไซต์ของคุณตั้งการป้องกันการแสดงผลในเฟรม (X-Frame-Options / CSP frame-ancestors) คนติดต่อ IT ของคุณต้องตอบว่า “ไม่” และการจัดซื้อหยุดในขณะที่คุณรีบแก้ไขการตั้งค่าฟรี 15 นาทีที่ตอนนี้ดูเหมือนธงแดงในหน้าผู้ซื้อ

4. แคมเปญ brand-as-bait เพราะหน้าจริงที่เชื่อถือได้ของคุณสามารถฝังได้ ผู้โจมตีใช้การเข้าสู่ระบบหรือการชำระเงินของคุณเป็นชั้นที่น่าเชื่อถือในแคมเปญ phishing ที่กว้างขวาง ลูกค้าที่ถูกจับไม่โทษผู้โจมตีที่ลี้ลับ — พวกมันจำมันว่าเป็นครั้งที่ “เว็บไซต์” ของคุณปล่อยให้พวกมันถูกหลอก

5. ธงการตรวจสอบ การสแกนของผู้ประกันภัย หรือผู้ตรวจสอบที่ตรวจสอบสถานะความปลอดภัยของคุณ แสดงรายการการป้องกัน clickjacking ที่หายไปในผลลัพธ์

มันคืออะไรจริงๆ

มีสอง header และการตรวจสอบของเราผ่านถ้าอย่างใดอย่างหนึ่งมีอยู่:

1. Header เก่า — X-Frame-Options:

X-Frame-Options: SAMEORIGIN

ใช้ค่าใดค่าหนึ่งในสองค่าในทางปฏิบัติ:

• SAMEORIGIN — เว็บไซต์ของคุณเองอาจฝังหน้าของตัวเอง แต่ไม่มีเว็บไซต์ภายนอก ค่าเริ่มต้นที่ปลอดภัยสำหรับเกือบทุกคน
• DENY — ไม่มีใครอาจฝังหน้าของคุณ รวมถึงคุณเอง ใช้เฉพาะถ้าเว็บไซต์ของคุณไม่เคยแสดงผลเนื้อหาของตัวเองในเฟรม

2. Header สมัยใหม่ — Content-Security-Policy frame-ancestors:

Content-Security-Policy: frame-ancestors 'self';

นี่คือการควบคุมที่ใหม่กว่าและยืดหยุ่นกว่า และเป็นสิ่งที่มาตรฐานปัจจุบันชี้ไปที่

สิ่งที่ “ดี” ดูเหมือน

การตั้งค่าที่แข็งแกร่งที่สุดใช้ทั้งสอง: frame-ancestors สำหรับเบราว์เซอร์สมัยใหม่และ X-Frame-Options: SAMEORIGIN เป็นทางสำรองสำหรับไคลเอ็นต์เก่า

รายละเอียดสำคัญ: header Content-Security-Policy-Report-Only ไม่บังคับใช้อะไร — มันเพียงรายงาน

วิธีแก้ไข (ฟรี ประมาณ 15 นาที)

ส่งส่วนนี้ให้ใครก็ตามที่รันเว็บไซต์ของคุณ — การแก้ไขฟรี มันเป็น response header หนึ่งหรือสอง หรือกฎใน CDN ของคุณ ไม่มีอะไรต้องซื้อ

การตรวจสอบผ่านเมื่อทั้ง header X-Frame-Options (ตั้งเป็น DENY หรือ SAMEORIGIN) หรือ directive CSP frame-ancestors มีอยู่

ขั้นตอนที่ 1 — ตัดสินใจว่าจะเข้มงวดแค่ไหน

• ธุรกิจส่วนใหญ่: SAMEORIGIN / frame-ancestors 'self'
• ถ้าเว็บไซต์ของคุณไม่เคยฝังหน้าของตัวเอง: DENY / frame-ancestors 'none' สำหรับการล็อคสูงสุด
• ถ้าพันธมิตรที่แท้จริงต้องฝังหน้าเฉพาะ: ตั้งชื่อพวกเขาอย่างชัดเจนด้วย frame-ancestors 'self' https://partner.example.com;

ขั้นตอนที่ 2 — เพิ่ม header (เลือกแพลตฟอร์มของคุณ)

Nginx — ภายใน server block:

add_header X-Frame-Options "SAMEORIGIN" always;
add_header Content-Security-Policy "frame-ancestors 'self';" always;

Apache:

Header always set X-Frame-Options "SAMEORIGIN"
Header always set Content-Security-Policy "frame-ancestors 'self';"

Microsoft IIS — ใน web.config:

<add name="X-Frame-Options" value="SAMEORIGIN" />
<add name="Content-Security-Policy" value="frame-ancestors 'self';" />

Cloudflare: Rules → Transform Rules → Modify Response Header

Already sending a Content-Security-Policy? อย่าสร้าง header CSP ที่สอง — เพิ่ม frame-ancestors เข้าไปในนโยบายที่มีอยู่ของคุณ

ขั้นตอนที่ 3 — โหลดใหม่และยืนยัน

โหลดเว็บเซิร์ฟเวอร์ใหม่หรือปรับใช้กฎ CDN จากนั้นโหลดเว็บไซต์จริงของคุณและตรวจสอบ response header — browser dev tools → Network tab → click the page request → Response Headers

ข้อผิดพลาดทั่วไป

• ใช้ CSP แบบ report-only และถือว่ามันปกป้องคุณ Content-Security-Policy-Report-Only รายงานเท่านั้น — บังคับใช้อะไรไม่ได้ คุณต้องการ header ที่บังคับใช้
• ตั้ง header CSP สองอันแยกกัน ถ้าคุณมี CSP อยู่แล้ว ให้เพิ่ม frame-ancestors เข้าไป แทนที่จะส่ง header ที่สอง
• ตั้ง DENY เมื่อเว็บไซต์ของคุณฝังหน้าของตัวเอง DENY บล็อกการแสดงผลในเฟรมทั้งหมด รวมถึงของคุณเอง
• ปกป้องเฉพาะหน้าแรก หน้าที่สำคัญที่สุดสำหรับ clickjacking คือหน้าที่เข้าสู่ระบบ — การตั้งค่าบัญชี การยืนยันการชำระเงิน admin ตรวจสอบให้แน่ใจว่า header ใช้ทั่วทั้งไซต์
• ถือว่า HTTPS หรือกุญแจครอบคลุมสิ่งนี้แล้ว การเข้ารหัสและการป้องกัน anti-framing ไม่เกี่ยวข้องกัน
• พึ่งพาวิธีแก้ไขเก่า JavaScript “frame-busting” ไม่น่าเชื่อถือและสามารถหลบเลี่ยงได้ Header เป็นการแก้ไขที่บังคับใช้โดยเบราว์เซอร์ที่ถูกต้อง

คำถามที่พบบ่อย