前言
Web安全问题一直是前端领域一个绕不开的话题，但很多前端人员对Web的相关安全策略都只停留在面试过程中，本文主要是对上线过程中遇到的安全问题踩坑进行了一个总结，旨在对Web安全相关问题能有一个更为立体切身的体会，也希望能给大家提供一些踩坑时候的参考。
背景
XSS vs CSRF
XSS
XSS是Cross-site scripting的缩写，为了和Cascading Style Sheets进行区分，因而将其简写为XSS：
Cross-site scripting (XSS) is a security exploit which allows an attacker to inject into a website malicious client-side code. This code is executed by the victims and lets the attackers bypass access controls and impersonate users.
从MDN给出的定义可以看出，XSS是通过inject(注入)有害代码来实现攻击方案的，也就是说XSS的攻击方案是注入，这里一般是通过注入脚本，由于浏览器中dom、bom的为js提供了接口，因而js可以操作html和css，其也可以插入html片段等。
CSRF
很多人分不清CSRF，其实他们还是有很大区别的，只不过通常会使用XSS拿到一些权限后才进行CSRF。CSRF是Cross-Site Request Forgery的简写：
CSRF (Cross-Site Request Forgery) is an attack that impersonates a trusted user and sends a website unwanted commands.
从MDN定义可以看出来，CSRF是通过伪造来进行攻击，也就是其本质目的需要用一切手段来伪装自己获取本不属于它的权限资源
区别
| 名称 | 目的 | 备注 |
|---|---|---|
| XSS | 篡改内容 | 不关心权限 |
| CSRF | 获取资源 | 只关心权限 |
XSS分类
| 名称 | 存放 | 侵入方式 | 场景 |
|---|---|---|---|
| 存储型（持久型） | 后端数据库 | HTML | 带有用户保存数据的网站，如：论坛发帖、商品评论、用户私信 |
| 反射型（非持久型） | URL | HTML | 网站搜索、跳转 |
| DOM 型 | 后端数据库/前端存储/URL | js | 前端js执行，如写了eval等 |
XSS防御方案
XSS预防主要分为两大部分：
- 防止攻击者提交恶意代码
- 浏览器执行恶意代码
从这两大部分可以整理出不同的防范思路：
| 方法 | 步骤 | 类型 |
|---|---|---|
| 利用模板引擎 | 1 | 存储型、反射型 |
| 限制及转义输入 | 1 | 存储型、反射型 |
| 限制js执行方法 | 2 | DOM型 |
| Content Security Policy | 1、2 | 存储型、反射型、DOM型 |
从上述列表可以看出，Content Security Policy对XSS的防范是比较好的，那么接下来就到了本文的重点内容，在下一part会重点介绍CSP相关的内容
CSP
内容安全策略(Content Security Policy)是现代浏览器安全机制中的一项重要内容，从图上可以看出除了老IE仅支持了csp的sandbox外，其他主流浏览器都已支持了csp，并且w3c也对整体做了统一的要求，具体可以参看w3c的官方文档Content Security Policy Level 2
简介
Content-Security-Policy 是现代浏览器用来增强document安全性的一个响应头字段，其用来限制诸如js、css以及其他浏览器所需资源的加载。也就是说，csp的本质是一个限制资源加载的策略，其通过解析csp的指令及值进行具体资源的限制，具体的实现可以看最后一part源码中chromium的相关实现。另外除了在header添加csp外，在html的dom中也可以通过meta标签来进行限制，只是当二者所限制的资源指令及值都一样的时候，header中的优先级较高。