前端安全防范总结

1. XSS 跨站脚本 (Cross-Site Scripting, XSS)

XSS 简单点来说，就是攻击者想尽一切办法将可以执行的代码注入到网页中。

分为持久性和非持久性

持久型也就是攻击的代码被服务端写入进数据库中，这种攻击危害性很大，因为如果网站访问量很大的话，就会导致大量正常访问页面的用户都受到攻击。

比如在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);

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

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

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

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

这里以设置 HTTP Header 来举例

• 只允许加载本站资源

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

• 只允许加载 HTTPS 协议图片

Content-Security-Policy: img-src https://*

• 允许加载任何来源框架

Content-Security-Policy: child-src ‘none’

2. CSRF(跨站请求伪造)

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

举个栗子，假设网站中有一个通过 GET 请求提交用户评论的接口，那么攻击者就可以在钓鱼网站中加入一个图片，图片的地址就是评论接口。

<img src="http://www.domain.com/xxx?comment='attack'"/>

如何防御？

防范 CSRF 攻击可以遵循以下几种规则：

• Get 请求不对数据进行修改
• 不让第三方网站访问到用户 Cookie
• 阻止第三方网站请求接口
• 请求时附带验证信息，比如验证码或者 Token

SameSite

可以对 Cookie 设置 SameSite 属性。该属性表示 Cookie 不随着跨域请求发送，可以很大程度减少 CSRF 的攻击，但是该属性目前并不是所有浏览器都兼容。

验证 Referer

对于需要防范 CSRF 的请求，我们可以通过验证 Referer 来判断该请求是否为第三方网站发起的。

Token

服务器下发一个随机 Token，每次发起请求时将 Token 携带上，服务器验证 Token 是否有效。