前端网络安全-XSS和CSRF

前端安全问题

1.cookie失窃

黑客网站通过script获取本地用户访问其他网站的cookie，cookie是用户访问网站的登陆凭证，通过cookie可以发起请求

恶意网站获得cookie后伪装用户发起请求，例如转账等

2.密码失窃

黑客网站通过iframe嵌入安全网站，黑客网站通过js修改用户点击登陆操作的form-action,使请求转向黑客网站后台，黑客获取到用户登陆信息

3.同源策略

为了杜绝以上黑客攻击，浏览器标准定制了同源策略

1）什么是同源？

协议、域名host、端口号一致视为同源

2）同源的操作权限

• 读取localstorage、cookie、indexDB
• 操作dom
• XMLHttpRequest请求

注意：

1. 带src属性的标签不受同源策略的影响。比如script、img、iframe、link，这样方便用户跨源引用资源。相当于浏览器发送get请求
2. 提交表单不受同源策略的影响(关于原因以及如何利用表单做跨域请求，将另起一篇文章说明)
3. 对于二级域名不同的情况，可以通过设置domain为顶级域名使得cookie\localstorage等信息可以在二级域名之间共享

前两个不受同源策略影响的特性，恰恰是CSXF攻击的原理！后文会讲到

4.XMLHttpRequest的跨域请求

通过服务器中转的方式

js先请求同源服务器，同源服务器转发请求目标服务器，目标服务器添加了白名单，同源服务器作为代理人，称为代理模式

这种XMLHttpRequest请求的方式成为CORS(crossing origin resource sharing)，跨源资源共享

5.XSS

浏览器添加了同源策略，杜绝了非同源js请求

黑客：在目标网站的表单里填写script代码提交到后台服务器，当表单内容展示到页面上时，会触发攻击，如：

image.png

image.png

以这种隐蔽的方式实现将本地数据提交(get请求)到黑客网站后台

这种攻击方式叫做crossing site scripting,跨站脚本，简称XSS

例如邮箱的内容中默认不显示图片，就是为了屏蔽这种攻击

6.XSS防护

1）cookie加上HttpOnly,只允许请求，不允许js读取

2）服务端安全过滤，过滤script信息

3）前端展示安全过滤

7.CSRF

CSRF示意图：

image.png

触发条件（需要同时满足）：

• 浏览器支持（没有禁用）cookie
• 目标网站没有做 CSRF 相关的预防措施（有漏洞）
• 目标网站基于 cookie/session 来做身份认证
• 用户已在目标网站A登陆，并且没有登出，并且没有清空 cookie，并且 cookie 没有过期的情况下访问黑客网站
• 黑客网站B请求了目标网站A

触发方式：

1. 点击请求：用户点击黑客网站链接，a标签
2. 自动请求：黑客网站创建表单发起请求(支持POST请求)，或者通过js创建img元素设置src(GET请求)，自动请求具有隐蔽性
   示例：

点击领红包



// form表单请求



    
    
    
    


    

        

            
            
        
    
    
    
    

攻击升级：
提交内容里带上超链接，诱导其他用户看到内容后点击，跳转到目标网站后再次触发CSRF
示例：

触发原因：

1. 同源策略阻止了js读取其他网站的cookie等内容，但没有防止js向其他网站发出请求
2. 同源策略限制了ajax请求，但没有限制form表单提交，前文提过img标签不受同源策略限制
3. 黑客网站利用用户向目标网站发起请求的时候，请求会带上目标网站下发的cookie

这种攻击方式叫做cross site request forgery,跨站请求伪造

8.CSRF攻击防护

1. referer(在http请求头中)验证解决方案,浏览器会告诉服务器，哪个页面发送了请求
   不过由于 http 头在某些版本的浏览器上存在可被篡改的可能性，所以这个解决方案并不完善
2. 目标网站通过cookie生成hash值，提交请求时带上hash值，服务端对hash进行过滤
3. 表单提交加验证码，如图片上的随机字符串
4. 用户登录时服务端生成token，之后用户请求必须带上token