简单谈谈前端对安全的认知

XSS

• 全称是跨站脚本攻击
• 分为三种
  • 反射型
  • 存储型
  • DOM-based
• 攻击手段
  • 修改HTML节点----反射型
  • 执行JS代码----存储型（破坏范围广）
• 阻止攻击手段
  • 转义输入输出
  • 黑白名单过滤，更推荐使用白名单过滤
  • escape函数也可以转义输入输出，但是会破坏所需要的格式，使用js-xss来实现

CSP

• 内容安全策略
• 是一个额外的安全层
• 用于检测并削弱某些特定类型的攻击，比如跨站脚本攻击和数据注入攻击
• 我们可以通过设置CSP来减少XSS的攻击，其本质上也是建立一个白名单，规定浏览器只能够执行来自特定来源的代码
  • 只允许加载本站资源

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

  • 只允许加载HTTPS协议类型的图片

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

  • 允许加载任何来源的框架

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

  • 更多属性查看这里

CSRF

• 跨站请求伪造
• 通过被称为csrf或者xsrf
• 是一种挟制用户在当前已经登录的web应用程序上执行非本意的恶意的操作方法
• xss利用的是用户对网站的信任，csrf利用的是网站对用户网页浏览器的信任
• 简单的说，csrf就是利用用户的登录状态执行恶意的操作
• 攻击手段
  • 假设网站中有一个通过 Get 请求提交用户评论的接口，那么攻击者就可以在钓鱼网站中加入一个图片，图片的地址就是评论接口

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

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

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

• 如何防御
  1. Get请求不对数据进行修改
  2. 不让第三方网站拿到用户的cookie
  3. 阻止第三方网站请求接口
  4. 请求时附带验证信息，比如验证码或者token

SameSite
可以对 Cookie 设置 SameSite 属性。该属性设置 Cookie 不随着跨域请求发送，该属性可以很大程度减少 CSRF 的攻击，但是该属性目前并不是所有浏览器都兼容.
验证 Referer
对于需要防范 CSRF 的请求，我们可以通过验证 Referer 来判断该请求是否为第三方网站发起的。
Token
服务器下发一个随机 Token（算法不能复杂），每次发起请求时将 Token 携带上，服务器验证 Token 是否有效

密码安全

加盐

• 对于密码存储来说，是肯定不能明文存储在数据库的，否则一旦数据库泄漏，用户的信息会受到很大程度上的破坏。
• 不建议只对密码进行单纯的加密算法，因为存在彩虹表的关系。
• 通常需要对密码进行加盐，在经过几次不同加密算法的加密

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

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