前端安全防范
XSS输入过滤
function espace(str){
str = str.replace(/&/g, '&');
str = str.replace(/</g, '<');
str = str.replace(/>/g, '>');
str = str.replace(/"/g, '&quto;');
str = str.replace(/'/g, ''');
str = str.replace(/`/g, '`');
str = str.replace(/\//g, '/');
return str;
}
// -> <script>alert(1)</script>
escape('<script>alert(1)</script>')
//对于富文本，不能转义所有字符，会把需要的格式也过滤掉了，可以通过白名单方式过滤
const xss =require('xss');
let html = xss('<h1 id="title"> XSS Demo </h1><script>alert("xss");</script>');
//<h1>XSS Demo</h1><script>alert("xss");</script>
console.log(html);
//以上实例使用了js-xss来实现，可以看到在输出中保留了h1标签且过滤了script标签
防范 CSRF 攻击可以遵循以下几种规则：
1.Get 请求不对数据进行修改
2. 不让第三方网站访问到用户 Cookie
3. 阻止第三方网站请求接口
4. 请求时附带验证信息，比如验证码或者 Token
SameSite
可以对 Cookie 设置 SameSite 属性。该属性表示 Cookie 不随着跨域请求发送，可以很大程度减少 CSRF 的攻击，但是该属性目前并不是所有浏览器都兼容
验证 Referer
// 对于需要防范 CSRF 的请求，我们可以通过验证 Referer 来判断该请求是否为第三方网站发起的
Token
服务器下发一个随机 Token，每次发起请求时将 Token 携带上，服务器验证 Token 是否有效
token组成： uid(用户唯一标识)，time(当前时间戳)，sign(签名，token的前几位以哈希算法压缩成16进制的字符串。为防止token泄露)
JS防御
{/* <head>
<style id="click-jack">
html {
display: none !important;
}
</style>
</head>
<body>
<script>
if (self == top) {
var style = document.getElementById('click-jack');
document.body.removeChild(style);
} else {
top.location = self.location;
}
</script>
</body> */}
//以上代码的作用就是当通过 iframe 的方式加载页面时，攻击者的网页直接不显示所有内容了
CSP(Content-Security-Policy)内容安全策略，浏览器禁止外部注入恶意脚本
两种方法可以启用 CSP：
设置 HTTP 的 Content-Security-Policy 头部字段
'Content-Security-Policy':'default-src \'self\ http: https:' //只允许加载同一个域的资源
'Content-Security-Policy':'script-src \'self\'; report-rui /report'
设置网页的<meta http-equiv='Content-Security-Policy' content='form-action 'self' '>标签
