关于CSP及其相关实现

CSP

• Content Security Policy 内容安全策略
• 产生XSS攻击的原因是用户数据被当做程序执行
• 转义替换虽然不是很正规，但是最适合XSS的解决方案
• 除了转义替换，我们要来说下CSP, 它是浏览器和web标准制定的
• CSP用于指定哪些内容是可以执行的，哪些是不可执行的
• 我们只需要将用户输入的部分标记为不可执行，就不会产生危害
• CSP是HTTP头，里面规定了哪些来源可以限制，比如：
  • child-src connect-src default-src
  • font-src frame-src img-src
  • manifest-src media-src object-src
  • script-src style-src worker-src
• 针对这些内容中的某一项，比如script脚本，我们可以指定哪些可信，哪些不可信，它定义了很多来源
  • <host-source> <scheme-source> ‘self’
  • ‘unsafe-inline’ ‘unsafe-eval’ ‘none’
  • ‘nonce-<base64-value>’ <hash-source>
  • ‘strict-dynamic’
• 具体可以参考：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP
• 具体用法可以设置HTTP头, 如：

  ctx.set(`Content-Security-Policy`, `script-src 'self'`)
  

• 如果我们的页面中想要执行某一段代码怎么办呢？
• 我们可以使用nonce参数，在我们的页面上和HTTP头上统一一个随机的nonce，这样攻击者就无计可施了
• 比如在前端页面模板中的脚本

  <!-- pug 模板引擎 -->
  script(none='123456')
      var a = 1;
      console.log(a);
  

• 在后端响应头上

  ctx.set(`Content-Security-Policy`, `script-src 'self' 'nonce-123456'`)
  

• 这里的123456可以动态设置一个随机的字符串参数, 这样的话前后端保持nonce统一
• 每次刷新页面都要重新获取一个新的随机字符串
• 还可以用下面一种方法来处理

  // 后端进行加密
  var content = `要加密的脚本代码写在这里`;
  var crypto = require('crypto');
  var hash = crypto.createHash('sha256');
  hash.update(content);
  var str = hash.digest('base64');
  console.log(str); // 这段str代码是加密后的脚本代码，是一段hash值
  

• 上面使用了sha256的加密算法计算出执行代码的hash值
• 我们可以在响应头上设置

  ctx.set(`Content-Security-Policy`, `script-src 'self' 'sha256-这里填写上面计算出的str变量值'`)
  

• 在页面模板上，代码格式和内容需要保持和加密时保持一致

  <!-- pug 模板引擎 -->
  script
      要加密的脚本代码写在这里