前端安全编码

这里只是讲解前端须要考虑的安全问题，后端和网络上的安全问题这里不作讲解

web网页中前端开发中须要注意的几个地方

• url连接的安全问题
• 输入表单内容的安全问题
• 接口提交的安全问题
• 登陆密码的安全问题

下面经过具体的漏洞类型，进行分析

XSS漏洞

跨站脚本攻击（英语：Cross-site scripting，因简称与css冲突，无奈简称为：XSS）是一种网站应用程式的安全漏洞攻击，是代码注入的一种。
它容许恶意使用者将代码注入到网页上执行，其余使用者在观看网页时就会受到攻击，从而能够达到攻击者盗取用户信息或其余侵犯用户安全隐私的目的。

XSS攻击方式的几种常见类型

非持久型 XSS

非持久型 XSS 漏洞，也叫反射型 XSS 漏洞，通常是经过给别人发送带有恶意脚本代码参数的 URL，当 URL 地址被打开时，特有的恶意代码参数被 HTML 解析、执行。

• 例如经过 URL 获取某些参数
  下述 URL 输入会将 HTML结构 改成 <div><script>alert(1)</script></div> ，这样页面中就凭空多了一段可执行脚本

<!-- http://www.domain.com?name=<script>alert(1)</script> -->
<div>{{name}}</div>
复制代码

如何防护

• Web 页面渲染的全部内容或者渲染的数据都必须来自于服务端
• 尽可能不要从 URL，document.referrer，document.forms 等这种 DOM API 中获取数据直接渲染。
• 尽可能不要使用 eval, new Function()，document.write()，document.writeln()，window.setInterval()，window.setTimeout()，innerHTML，document.creteElement() 等可执行字符串的方法
• 作不到以上几点的话，前端渲染的时候对任何的字段都须要作 escape 转义编码
  • 最广泛的作法是转义输出的内容，对于引号，尖括号，斜杠进行转义

    function escape(str) {
      str = str.replace(/&/g, '&')
      str = str.replace(/</g, '&lt;')
      str = str.replace(/>/g, '&gt;')
      str = str.replace(/"/g, '&quto;')
      str = str.replace(/'/g, '&#39;')
      str = str.replace(/`/g, '&#96;')
      str = str.replace(/\//g, '&#x2F;')
      return str
    }
    复制代码

    经过转义能够将攻击代码 变成

    escape('<script>alert(1)</script>')
    // -> &lt;script&gt;alert(1)&lt;&#x2F;script&gt;
    复制代码

  • 对于显示富文原本说，不能经过上面的办法来转义全部字符，由于这样会把须要的格式也过滤掉。这种状况一般采用白名单过滤的办法，固然也能够经过黑名单过滤，可是考虑到须要过滤的标签和标签属性实在太多，更加推荐使用白名单的方式。
    如下示例使用了 js-xss 来实现。输出中保留了 h1 标签且过滤了 script 标签

    var xss = require('xss')
    var html = xss('<h1 id="title">XSS Demo</h1><script>alert("xss");</script>')
    console.log(html)
    // -> <h1>XSS Demo</h1>&lt;script&gt;alert("xss");&lt;/script&gt;
    复制代码

持久型 XSS

持久型 XSS 漏洞，也被称为存储型 XSS 漏洞，通常存在于 Form 表单提交等交互功能，如发帖留言，提交文本信息等，黑客利用的 XSS 漏洞，将内容经正常功能提交进入数据库持久保存，当前端页面得到后端从数据库中读出的注入代码时，刚好将其渲染执行。

持久型 XSS 攻击成功须要同时知足如下几个条件：

• POST 请求提交表单后端没作转义直接入库。
• 后端从数据库中取出数据没作转义直接输出给前端。
• 前端拿到后端数据没作转义直接渲染成 DOM。

如何防护

• 后端在入库前应该选择不相信任何前端数据，将全部的字段统一进行转义处理。
• 后端在输出给前端数据统一进行转义处理。
• 前端在渲染页面 DOM 的时候应该选择不相信任何后端数据，任何字段都须要作转义处理。

CSP

内容安全策略 (CSP) 是一个额外的安全层，用于检测并削弱某些特定类型的攻击，包括跨站脚本 (XSS) 和数据注入攻击等。不管是数据盗取、网站内容污染仍是散发恶意软件，这些攻击都是主要的手段。咱们能够经过 CSP 来尽可能减小 XSS 攻击。CSP 本质上也是创建白名单，规定了浏览器只可以执行特定来源的代码。

一般能够经过 HTTP Header 中的 Content-Security-Policy 来开启 CSP

• 只容许加载本站资源

Content-Security-Policy: default-src ‘self’
复制代码

• 只容许加载 HTTPS 协议图片

Content-Security-Policy: img-src https://*
复制代码

前端CSRF安全编码

跨站请求伪造（英语：Cross-site request forgery），也被称为 one-click attack 或者 session riding，一般缩写为 CSRF 或者 XSRF， 是一种挟制用户在当前已登陆的 Web 应用程序上执行非本意的操做的攻击方法。[1] 跟跨網站指令碼（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任

CSRF 就是利用用户的登陆态发起恶意请求, 攻击成功须要同时知足如下几个条件：

1. 用户已经登陆了站点 A，并在本地记录了 cookie
2. 在用户没有登出站点 A 的状况下（也就是 cookie 生效的状况下），访问了恶意攻击者提供的引诱危险站点 B (B 站点要求访问站点A)。
3. 站点 A 没有作任何 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>
复制代码

防护办法

• Get 请求不对数据进行修改
• 不让第三方网站访问到用户 Cookie
• 阻止第三方网站请求接口
• 在非 GET 请求中增长 token

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

密码安全

密码安全更多的是后端数据库的安全，其实前端也能够作些事情，

• 好比，防止暴力破解的方式破解密码

一般使用验证码增长延时或者限制尝试次数的方式。而且一旦用户输入了错误的密码，也不能直接提示用户输错密码，而应该提示帐号或密码错误。

前端敏感信息泄漏

• 禁止使用localStorage/sessionstorage/globalStorage进行敏感信息存储
• 使用postMessage等须要在进行白名单校验
• 前端禁止写入cookie

参考：
yuchengkai.cn/docs/fronte…
zoumiaojiang.com/article/com…

不足之处还望海涵，请大神多多指教