点击劫持是一种恶意攻击,攻击者会诱骗用户点击看似可信且熟悉的网站上的链接或界面元素。通常,这通过使用 <iframe>
将可信网站的部分或全部嵌入到恶意网站中来实现。
Content-Security-Policy
(CSP) 标头中的 X-Frame-Options
(XFO) 标头和 frame-ancestors
指令可以通过控制网站在 <iframe>
中的嵌入方式来防范点击欺骗攻击。
Lighthouse 评估失败的原因
如果 XFO 标头使用 SAMEORIGIN
或 DENY
进行设置,或者在 CSP 标头上设置了 frame-ancestors
指令,则审核将通过。如果这两项框架控制政策均未配置,则审核将失败。
如何设置框架控制政策以防范点击欺骗
需要在初始文档请求的 HTTP 标头中设置框架控制政策。如果在 <meta>
元素上设置 X-Frame-Options
标头和 Content-Security-Policy
中的 frame-ancestors
指令,则它们将不起作用。
XFO 标头
为 XFO 标头设置 DENY
或 SAMEORIGIN
可防范点击劫持攻击:
X-Frame-Options: SAMEORIGIN
X-Frame-Options: DENY
只有当所有祖先帧与网页本身具有相同的源时,SAMEORIGIN
指令才允许显示该网页。相反,DENY
指令会阻止网页在框架中显示,无论父框架源是什么。
CSP 标头
CSP 标头中的 frame-ancestors
指令定义了哪些网站可以在 <frame>
、<iframe>
、<object>
或 <embed>
中嵌入给定网页。与 XFO 类似,CSP frame-ancestors
指令可通过将其设置为 self
或 none
来防范点击劫持攻击:
Content-Security-Policy: frame-ancestors 'self';
Content-Security-Policy: frame-ancestors 'none';
不过,frame-ancestors
指令比 XFO 更灵活,因为它可以设置可能嵌入该网页的特定父级来源:
Content-Security-Policy: frame-ancestors 'self' https://example.com;