前端安全之XSS和CSRF

这两个内容实际上比较少见，属于安全问题，而不是前端技术问题。但前端在开发的时候还是要知道这个东西的。特别是在一些对安全敏感的领域。例如银行，互联网大厂。其实一般的小企业也是要注意的。毕竟，一般网站的安全性都是非常的脆弱的。

XSS(跨站脚本攻击)

简单来说，黑客利用漏洞将代码写入服务器，能够影响网站在所有用户面前的展示效果。也就是能篡改你的页面。
这个和sql注入是非常类似的。
防范设施：
1.vue框架本身的{{}}语法能够防止内容被转移。
2.尽量避免使用v-html标签,内联事件（onClick=“…”,onLoad=“…”）,eval。
3.如果一定要使用v-html标签，那么使用能防止XSS攻击的第三方库DomPurify。
4.开启CSP。

题外话：input里面的文本是不会被注入的，只有里面的文本变成html代码才会被注入。通过修改本地浏览器代码是不算XSS攻击的，那只是影响他本地的页面显示。XSS攻击是利用漏洞将代码写入服务器，能够影响网站在所有用户面前的展示效果。

CSRF（跨站请求伪造）

这个非常的厉害。比如你登录一个银行账号，你的账号密码被存储在银行网站的Cookie上。这时候，正巧你打开了一个危险网站，这个网站是可以直接读取你银行的Cookie信息直接登录你的账号。当然，这种情况只会发生在这个银行网站完全没有做安全防护的情况下。

防范设置：
1.使用CSRF token,后端生成一个动态的token,验证这个token的唯一性。这个和普通的token是独立的。
2.设置 SameSite Cookie 属性，限制第三方网站携带 Cookie。
3.添加二次确认或者恶意代码自动执行，添加验证码。
4.后端设置origin和Referer。

题外话：
既然Cookie这么危险，为什么要使用Cookie?不是的，Cookie是安全的，但需要你设置SameSite Cookie，使用CSRF等这些安全设置。Cookie在跨域方面是比较麻烦的。
localstorage存在xss攻击的风险。

各有利弊。可以配合使用。