前端安全防范措施，xss攻击和csrf攻击

xss 跨站脚本攻击

简单来说，就是攻击者想办法将可执行的代码注入页面。

分为持久性和非持久性。持久性就是攻击的代码被存入了数据库，会导致大量用户网页被攻击。
eg: input框中写入<script>alert(1)</script>，如果前后端没有防御，被存入数据库，每个打开该页面的用户都会被攻击。
如何防御？

1. 转义字符

function escape(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, '/');
   str = str.replace(/<\/script>/,'')
   return str;
}

2. 引入js-xss

const xss = require('xss');
let html = xss('<h1 id="title">XSS Demo</h1><script>alert("XSS");</script>');
// -><h1>XSS Demo</h1>$lt;script&gt;alert("XSS");&lt;/script&gt;
console.log(html);

3. CSP (Content Security Policy,即内容安全策略)

CSP本质上就是建立白名单，开发者明确告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截是由浏览器自己实现的。我们可以通过这种方式来尽量减少XSS 攻击。

通常可以通过两种方式来开启 CSP：

• 设置 HTTP Header 中的 Content-Security-Policy
• 设置 meta 标签的方式 < meta http-equiv=“Content-Security-Policy”>

CSRF 跨站请求伪造

攻击者构造出一个后端请求地址，诱导用户点击或者通过某些途径自动发起请求。如果用户是在登录状态下的话，后端就以为是用户在操作，从而进行相应的逻辑。

如何防御？
防范 CSRF 攻击可以遵循以下几种规则：
Get 请求不对数据进行修改
不让第三方网站访问到用户 Cookie
阻止第三方网站请求接口
请求时附带验证信息，比如验证码或者 Token