Bảo MậtClickjacking embed site trong invisible iframe để đánh lừa user click — fix bằng Content-Security-Policy: frame-ancestors 'none' (CSP, recommended) và X-Frame-Options: DENY (legacy, set cả hai để backward compatibility).
Clickjacking là attack embed target site trong invisible iframe, user nghĩ đang click button trên trang của attacker nhưng thực ra đang click element trong iframe — thực hiện actions trên target site mà user không biết. Ví dụ: evil.com embed bank.com trong iframe với opacity: 0, vị trí button 'Transfer Money' trùng với button 'Click to win!' của evil.com. X-Frame-Options header (legacy): X-Frame-Options: DENY — không cho phép embed trong bất kỳ iframe nào; X-Frame-Options: SAMEORIGIN — chỉ cho phép same origin iframe. CSP frame-ancestors directive (modern, recommended): Content-Security-Policy: frame-ancestors 'none' (tương đương DENY); frame-ancestors 'self' (tương đương SAMEORIGIN); frame-ancestors https://trusted.com — flexible hơn X-Frame-Options (cho phép specific origins). Nên set cả hai để backward compatibility. Helmet.js: helmet.frameguard({ action: 'deny' }) set X-Frame-Options; config CSP riêng với frame-ancestors. Khi nào cho phép iframe: legitimate embedding (payment widgets, video player, maps) — whitelist specific origins với frame-ancestors. Lưu ý: nếu cần embed legitimate content từ site của bạn vào third-party (widget, badge), phải loại trừ endpoint đó khỏi frame-ancestors restrictions hoặc dùng SAMEORIGIN.
Clickjacking embeds a site in an invisible iframe to trick users into clicking — fix with Content-Security-Policy: frame-ancestors 'none' (CSP, recommended) and X-Frame-Options: DENY (legacy, set both for backward compatibility).
Clickjacking embeds a target site in an invisible iframe; the user thinks they are clicking a button on the attacker's page but is actually clicking an element inside the iframe — performing actions on the target site unknowingly. Example: evil.com embeds bank.com in an iframe with opacity: 0, positioning the 'Transfer Money' button to align with evil.com's 'Click to win!' button. X-Frame-Options header (legacy): X-Frame-Options: DENY — disallows embedding in any iframe; X-Frame-Options: SAMEORIGIN — only allows same-origin iframes. CSP frame-ancestors directive (modern, recommended): Content-Security-Policy: frame-ancestors 'none' (equivalent to DENY); frame-ancestors 'self' (equivalent to SAMEORIGIN); frame-ancestors https://trusted.com — more flexible than X-Frame-Options (allows specific origins). Set both for backward compatibility. Helmet.js: helmet.frameguard({ action: 'deny' }) sets X-Frame-Options; configure CSP separately with frame-ancestors. When to allow iframes: legitimate embedding (payment widgets, video players, maps) — whitelist specific origins with frame-ancestors. Pitfall: if you need to embed legitimate content from your site into a third-party page (widget, badge), that endpoint must be excluded from frame-ancestors restrictions or use SAMEORIGIN.