常见前端安全问题以及防御措施

XSS （ cross-site-scripting ），跨站脚本攻击；注入恶意代码到网页，并使用户加载执行，目的可能是获取当前用户的在这个网站的cookie，从而拿到用户的敏感信息；

分为非持久性攻击和持久性攻击；

非持久性攻击：即时性，恶意代码不需要存在数据库中去；每次设置都可能触发一次xss攻击；

场景：

恶意代码一
http://abcd.com?q=<script>alert(document.cookie)</script> // 不成功，因为浏览器已经对script等一些危险标签的插入做了拦截过滤

恶意代码二
http://abcd.com?q=<img src="" onerror="alert(document.cookie)" />  // 成功获取cookie

把src设置为空，这样就会触发onerror事件，弹出cookie；

持久性：将恶意代码存入数据库中；

XSS防御措施：

使用html转义；对所有外部插入的代码做一次转义，将script等危险标签做过滤和转义替换，同时尽量避免会用innerHtml、documnet.write、outerHtml等，而是使用安全性更高的textContent等；

开启CSP防护，在http响应头中设置content-security-policy属性：

当属性值设置为script-src ‘self’

Content-Security-Policy:script-src ‘self’

不允许内联脚本加载执行，禁止加载外域代码，禁止外域提交；

CSRF(cross-site request forgery),跨站请求伪造

流程：

用户登录目标网站a；

用户以某种方式接触到恶意网站b的链接；

用户点击链接访问网站b，网站b中的js代码执行，偷偷向目标网站b发送某个请求；

由于用户登录过网站a，因此请求携带了网站a的相关cookie’凭证，最后请求执行；

场景：

<img src="A.com/delete" style="visibility:hidden"/>

假如b网站有这么一段代码，就会删除用户在a网站的数据；

CSRF防御措施：

1.设置cookie的SameSite属性；

设置方法：

Set-cookie:widget_session=abc123;SameSite=None;Secure

除了设置值以外，还要设置SameSite属性；

有3个属性值：

strict：跨站点时，任何情况都不会发送cookie，只有当前网页的url与请求目标一致时，才会带上cookie；

lax：大多数情况下额不发送第三方cookie；

None：表示关闭samesite属性；

2.csrf token

服务端算法生成token，返回给前端，前端保存在localstrorage或者sessionstrorage中，会后每次发送请求都会带上这个token，而第三方网站没有办法获取token，因此服务器可以识别是否为第三方的请求；

3.手机验证码、邮箱验证，进行二次验证；