浏览器原理--同源策略：为什么XMLHttpRequest不能跨域请求资源

一、同源策略

（1） 如果两个 URL 的协议、域名和端口都相同，我们就称这两个 URL 同源。

（2）浏览器默认两个相同的源之间是可以相互访问资源和操作 DOM 的。

（3）源策略主要表现在 DOM、Web 数据和网络这三个层面。

DOM 层面：同源策略限制了来自不同源的 JavaScript 脚本对当前 DOM 对象读和写的操作。

数据层面：同源策略限制了不同源的站点读取当前站点的 Cookie、IndexDB、LocalStorage 等数据。

网络层面：同源策略限制了通过 XMLHttpRequest 等方式将站点的数据发送给不同源的站点。

二、安全和便利性的权衡

（1） 页面中可以嵌入第三方资源

1、暴露了很多诸如 XSS 的安全问题，为了解决 XSS 攻击，浏览器中引入了内容安全策略，称为 CSP。

2、CSP 的核心思想是让服务器决定浏览器能够加载哪些资源，让服务器决定浏览器是否能够执行内联 JavaScript 代码。通过这些手段就可以大大减少 XSS 攻击

（2）跨域资源共享和跨文档消息机制

1、跨域资源共享（CORS）：使用该机制可以进行跨域访问控制，从而使跨域数据传输得以安全进行

2、跨文档消息机制：可以通过 window.postMessage 的 JavaScript 接口来和不同源的 DOM 进行通信

三、CSP

（1）CSP的意义

防XSS等攻击的利器。CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。CSP 大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一台列入了白名单的可信主机。

（2）CSP的分类

（1）Content-Security-Policy 配置好并启用后，不符合 CSP 的外部资源就会被阻止加载。 （2）Content-Security-Policy-Report-Only 表示不执行限制选项，只是记录违反限制的行为。它必须与report-uri选项配合使用。

（3）在HTTP Header上使用（首选）

"Content-Security-Policy:" 策略

"Content-Security-Policy-Report-Only:" 策略

（4）在HTML上使用 

<meta http-equiv="content-security-policy" content="策略">

<meta http-equiv="content-security-policy-report-only" content="策略"> 

Meta 标签与 HTTP 头只是行式不同而作用是一致的，如果 HTTP 头与 Meta 定义同时存在，则优先采用 HTTP 中的定义。 如果用户浏览器已经为当前文档执行了一个 CSP 的策略，则会跳过 Meta 的定义。如果 META 标签缺少 content 属性也同样会跳过。

（5）例子

// 限制所有的外部资源，都只能从当前域名加载

Content-Security-Policy: default-src 'self'

// default-src 是 CSP 指令，多个指令之间用英文分号分割；多个指令值用英文空格分割 Content-Security-Policy: default-src https://host1.com https://host2.com; frame-src 'none'; object-src 'none'

// 错误写法，第二个指令将会被忽略

Content-Security-Policy: script-src https://host1.com; script-src https://host2.com

// 正确写法如下

Content-Security-Policy: script-src https://host1.com https://host2.com

// 通过report-uri指令指示浏览器发送JSON格式的拦截报告到某个地址

Content-Security-Policy: default-src 'self'; ...; report-uri /my_amazing_csp_report_parser;

 （6）常用的CSP指令

（7） 其他CSP指令

（8）CSP指令值