前端面试题（五）安全篇

XSS

跨网站指令码（英语：Cross-site scripting，一般简称为：XSS）是一种网站应用程式的安全漏洞攻击，是代码注入的一种。它容许恶意使用者将程式码注入到网页上，其余使用者在观看网页时就会受到影响。这类攻击一般包含了 HTML 以及使用者端脚本语言。

XSS 分为三种：反射型，存储型和 DOM-based

如何攻击

XSS 经过修改 HTML 节点或者执行 JS 代码来攻击网站。

例如经过 URL 获取某些参数

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

上述 URL 输入可能会将 HTML 改成 <div><script>alert(1)</script></div> ，这样页面中就凭空多了一段可执行脚本。这种攻击类型是反射型攻击，也能够说是 DOM-based 攻击。

也有另外一种场景，好比写了一篇包含攻击代码 <script>alert(1)</script> 的文章，那么可能浏览文章的用户都会被攻击到。这种攻击类型是存储型攻击，也能够说是 DOM-based 攻击，而且这种攻击打击面更广。

如何防护

最广泛的作法是转义输入输出的内容，对于引号，尖括号，斜杠进行转义

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
}
复制代码

经过转义能够将攻击代码 <script>alert(1)</script> 变成

// -> <script>alert(1)</script>
escape('<script>alert(1)</script>')
复制代码

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

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

以上示例使用了 js-xss 来实现。能够看到在输出中保留了 h1 标签且过滤了 script 标签

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://*
  复制代码

• 容许加载任何来源框架

  Content-Security-Policy: child-src 'none'
  复制代码

更多属性能够查看 这里

CSRF

跨站请求伪造（英语：Cross-site request forgery），也被称为 one-click attack 或者 session riding，一般缩写为 CSRF 或者 XSRF， 是一种挟制用户在当前已登陆的Web应用程序上执行非本意的操做的攻击方法。[1] 跟跨網站指令碼（XSS）相比，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>
复制代码

如何防护

防范 CSRF 能够遵循如下几种规则：

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)))
复制代码

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