• 防伪装攻击：请求来源是否合法？
  • 防篡改攻击：请求头/查询字符串/内容 在传输过程中被修改
  • 防重放攻击：请求被截获，稍后被重放或多次重放
  • 防数据信息泄漏：截获用户登录请求，截获到账号、密码等

    一、XSS(cross-site scripting)

    跨网站指令码，是 代码注入 的一种

    1、如何攻击

    通过修改 HTML 节点 或者 执行 JS 代码，利用的是用户对指定网站的信任
    1. <!-- http://www.domain.com?name=<script>alert(1)</script> -->
    2. <div>{{name}}</div>

上述 URL 输入可能会将 HTML 改为

，这样页面中就凭空多了一段可执行脚本。

也有另一种场景，比如写了一篇包含攻击代码 的文章保存到了数据库，那么可能浏览文章的用户都会被攻击到。

2、如何防御

转义

转义输入输出的内容，对于引号，尖括号，斜杠进行转义：

  1. function escape(str) {
  2.     str = str.replace(/&/g, "&amp;");
  3.     str = str.replace(/</g, "&lt;");
  4.     str = str.replace(/>/g, "&gt;");
  5.     str = str.replace(/"/g, "&quto;");
  6.     str = str.replace(/'/g, "&##39;");
  7.     str = str.replace(/`/g, "&##96;");
  8.     str = str.replace(/\//g, "&##x2F;");
  9.     return str
  10. }
  11. escape('<script>alert(1)</script>') // -> &lt;script&gt;alert(1)&lt;&##x2F;script&gt;

白名单(黑名单)

  1. var xss = require("xss");
  2.  var html = xss('<h1 id="title">XSS Demo</h1><script>alert("xss");</script>');
  3.  console.log(html); // -> <h1>XSS Demo</h1>&lt;script&gt;alert("xss");&lt;/script&gt;

使用了 js-xss 来实现；
可以看到在输出中保留了 h1 标签且过滤了script 标签

3、CSP(内容安全策略)

内容安全策略 (CSP) 是一个额外的安全层，用于检测并削弱某些特定类型的攻击，包括跨站脚本 (XSS) 和数据注入攻击等。无论是数据盗取、网站内容污染还是散发恶意软件，这些攻击都是主要的手段。

我们可以通过 CSP 来尽量减少 XSS 攻击。CSP 本质上也是建立白名单，规定了浏览器只能够执行特定来源的代码。

通常可以通过 HTTP Header 中的 Content-Security-Policy 来开启 CSP只允许加载本站资源

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

只允许加载 HTTPS 协议图片

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

允许加载任何来源框架

  1. Content-Security-Policy: child-src 'none'

更多属性可以查看 这里

二、CSRF(cross-site request forgery)

“跨站请求伪造”是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。利用的是网站对用户网页浏览器的信任，即利用用户的登录态发起恶意请求。

1、如何攻击

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

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

如果接口是 Post 提交的，就相对麻烦点，需要用表单来提交接口

  1. <form action="http://www.domain.com/xxx" id="CSRF" method="post">
  2.      <input name="comment" value="attack" type="hidden">
  3. </form>

2、如何防御

规则：

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

SameSite

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

验证 Referer

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

Token

服务器下发一个随机 Token(算法不能复杂)，每次发起请求时将 Token 携带上，服务器验证 Token 是否有效。

三、密码安全

虽然前端加密对于安全防护来说意义不大，但是在遇到中间人攻击的情况下，可以避免明文密码被第三方获取。

加盐

  1. // 加盐也就是给原密码添加字符串，增加原密码长度
  2. sha256(sha1(md5(salt + password + slat)))

使用 utility 库

  1. const utility = require('utility');
  2. module.exports = {
  3.     md5pwd: function (pwd) {
  4.         const salt = 'qwertyuiopasdfghjklzxcvbnm'
  5.         return utility.md5(utility.md5(pwd + salt))
  6.     }
  7. }

但是加盐并不能阻止别人盗取账号，只能确保即使数据库泄露，也不会暴露用户的真实密码。一旦攻击者得到了用户的账号，可以通过暴力破解的方式破解密码。对于这种情况，通常使用验证码增加延时或者限制尝试次数的方式。并且一旦用户输入了错误的密码，也不能直接提示用户输错密码，而应该提示账号或密码错误。

CryptoJS

  1. export  { CryptoJS, SM2CipherMode, SM2Cipher }