前端安全措施防范

本文主要讨论以下两种攻击方式: XSS攻击、CSRF攻击.

• 1. xss攻击

  解释：指的是攻击者想尽一切办法将一些可执行的代码注入到网页中.利用这些恶意脚本攻击者可获取用户的敏感信息如Cookekie, sessionId等,进而威胁数据安全。

防范：

1.输入输出过滤 一切用户输入皆不可信，在输出时进行验证，一般做法是将 ‘ ” < > & 这些个危险字符进行转义。

2. Cookie 的 HttpOnly当用户的登录凭证存储于服务器的 session 中，而在浏览器中是以 cookie 的形式存储的。很多XSS攻击目标都是窃取用户cookie伪造身份认证。可以通过在 cookie 中设置 HttpOnly 属性，js脚本将无法读取到 cookie 信息。     
    ctx.cookies.set(name, value, {
        httpOnly: true // 默认为 true
    })

3. CSP(内容安全策略)
    CSP (Content Security Policy，内容安全策略)是 W3C 提出的 ，本质上就是白名单制度，开发者明确告诉浏览器哪些外部资源可以加载和执行。它的实现和执行全部由浏览器完成，我们只需提供配置两种方法可以启用 CSP：
    
    一种是通过 HTTP 头信息的Content-Security-Policy的字段
    Content-Security-Policy: default-src ‘self’
    
    另一种是通过网页的<meta>标签
        <meta
          http-equiv="Content-Security-Policy"
          content="default-src https://cdn.example.net; child-src 'none';                         object-src 'none'"
        />`

• 2. CSRF攻击
  解释：跨站点请求伪造（Cross-Site Request Forgeries），也被称为 one-click attack 或者 session riding。冒充用户发起请求（在用户不知情情况下），完成一些违背用户意愿的事情（如修改用户信息，删除评论等）。 防范：

     验证码：强制用户必须与应用进行交互，才能完成最终请求。此种方式能很好的遏制 CSRF，但是用户体验相对差。尽量使用 post ，限制 get 使用；上一个例子可见，get 太容易被拿来做 CSRF 攻击，但是 post 也并不是万无一失，攻击者只需要构造一个form就可以。
     
     Referer check：请求来源限制，此种方法成本最低，但是并不能保证 100% 有效，因为服务器并不是什么时候都能取到 Referer，而且低版本的浏览器存在伪造 Referer 的风险。
     
     token：token 验证的 CSRF 防御机制是公认最合适的方案。
     
     通常来说 CSRF 是由 XSS 实现的，CSRF 时常也被称为 XSRF（CSRF 实现的方式还可以是直接通过命令行发起请求等）。

总结：

本质上讲，XSS 是代码注入问题，CSRF 是 HTTP 问题。XSS 是内容没有过滤导致浏览器将攻击者的输入当代码执行。 CSRF 则是因为浏览器在发送 HTTP 请求时候自动带上 cookie，而一般网站的 session 都存在 cookie里面。XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。