点击劫持是一种恶意攻击,攻击者会诱骗用户点击看似可信且熟悉的网站上的链接或界面元素。通常,这通过使用 <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;