Web内容安全策略浅析
前言
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 | 获取资源 | 只关心权限 |
| 名称 | 存放 | 侵入方式 | 场景 |
|---|---|---|---|
| 存储型（持久型） | 后端数据库 | HTML | 带有用户保存数据的网站，如：论坛发帖、商品评论、用户私信 |
| 反射型（非持久型） | URL | HTML | 网站搜索、跳转 |
| DOM 型 | 后端数据库/前端存储/URL | js | 前端js执行，如写了eval等 |
XSS预防主要分为两大部分：
- 防止攻击者提交恶意代码
- 浏览器执行恶意代码
| 方法 | 步骤 | 类型 |
|---|---|---|
| 利用模板引擎 | 1 | 存储型、反射型 |
| 限制及转义输入 | 1 | 存储型、反射型 |
| 限制js执行方法 | 2 | DOM型 |
| Content Security Policy | 1、2 | 存储型、反射型、DOM型 |
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中的优先级较高。
指令
| 指令 | 版本 | 注释 |
|---|---|---|
| default-src | 1 | 大部分资源未定义时会读取这个配置，少数不会，比如：frame-ancestors，优先级低 |
| script-src | 1 | 定义有效的js资源 |
| style-src | 1 | 定义有效的css资源 |
| img-src | 1 | 定义有效的图片资源 |
| connect-src | 1 | 加载XMLHttpRequest、WebSocket、fetch、 |
| font-src | 1 | 定义有效的字体资源，通过@font-face加载 |
| object-src | 1 | 定义有效的插件资源，比如： |
| media-src | 1 | 定义有效的音频及视频资源，比如： |
| frame-src | 1 | 定义有效的frame加载资源，在csp2中，frame-src被废弃，使用child-src；在csp3中，又被启用，与child-src同时存在，如果child-src不存在，frame-src也会起作用 |
| sandbox | 1 | 允许iframe的sandbox属性，sandbox会采用同源策略，阻止弹窗、插件及脚本执行，可以通过不设置sandbox属性，而是通过allow-scripts、allow-popups、allow-modals、allow-orientation-lock、allow-pointer-lock、allow-presentation、allow-popups-to-escape-sandbox、allow-top-navigation来透给sandbox字段限制 |
| report-uri | 1 | 向这个uri发送失败报告，也可以使用Content-Security-Policy-Report-Only来作为http header进行发送但不阻塞网络资源的解析，在csp3中report-uri被废弃，改用report-to指令 |
| child-src | 2 | 定义web workers以及包含嵌套上下文的资源加载，比如 |