当前位置: 首页 > Web前端 > HTML

一些测试和防御前端页面点击劫持攻击的方法

时间:2023-04-02 14:33:09 HTML

点击劫持(clickjacking)是一种在用户实际点击另一个东西时,诱使他们认为他们正在点击另一个东西的攻击。它的另一个名称,用户界面(UI)修复,更好地描述了正在发生的事情。用户以为他们使用的是网页的普通UI,但实际上有一个隐藏的UI在控制它;换句话说,用户界面已经修复。当用户点击他们认为安全的东西时,隐藏的UI会执行不同的操作。由于HTML框架(iframe)能够通过构建其他网页来在其他网页中显示网页,因此这种攻击是可能的。如果网页允许自己在框架内显示,攻击者可以在原始网页上覆盖一个隐藏的透明层,并使用他们自己的JavaScript和UI元素。然后,攻击者诱使用户访问一个恶意页面,该页面看起来像是用户了解并信任的站点。原始站点上没有隐藏UI的迹象。用户单击链接或按钮,期望原始站点执行特定操作,然后攻击者的脚本运行。但是攻击者的脚本也可以执行预期的操作,从而看起来没有任何问题。我们可以使用以下工具网站来检测我们的网站是否容易受到点击劫持攻击。https://clickjacker.io/你只需要在输入框里填上自己网站的url就可以检测到:我本地开发的网站运行在localhost上,当然不能被这个工具网站扫描到,所以我发布他们到阿里云上,通过后者的公网IP地址访问。首先使用pm2list查看阿里云服务器上运行的服务器进程:使用pm2stopall停止所有进程:在meta元素中设置X-Frame-Options没有用!例如,metahttp-equiv="X-Frame-Options"content="deny"无效。https://developer.mozilla.org...X-Frame-Options只能通过设置HTTP标头来工作,如下例所示。constframeguard=require('frameguard');app.use(frameguard({action:'SAMEORIGIN'}));以上代码效果如下:使用本文开头提到的工具网站进行扫描:以上代码已经生效,现在输出为:免受点击劫持攻击。另一个指令:CSP:frame-ancestors,同样不支持meta元素中的定义:varexpress=require('express');varapp=express();app.use(function(req,res,next){res.setHeader("Content-Security-Policy","script-src'self'");returnnext();});https://stackoverflow.com/que。..上面代码的功能让工具网站的检查重新显示绿灯: