浏览器同源策略

问题

浏览器的同源策略是什么？

解答

同源策略（Same Origin Policy）是浏览器的基本安全功能，用于限制不同源之间的资源访问。它基于一个原则：从任何站点加载的内容都是不可信的，脚本只能访问同源资源，不能访问其他站点的资源。

什么是同源

同源需要满足三个条件：

• 协议相同（如都是 https://）
• 域名相同（如都是 example.com）
• 端口相同（如都是 443）

例如：

https://example.com:443/page1
https://example.com:443/page2
// 同源

https://example.com:443/page1
http://example.com:443/page1
// 不同源（协议不同）

https://example.com:443/page1
https://api.example.com:443/page1
// 不同源（域名不同）

同源策略的限制范围

同源策略分为两类：

DOM 同源策略

禁止对不同源页面的 DOM 进行操作。主要体现在 iframe 场景中，不同域名的 iframe 无法互相访问对方的 DOM。

// 父页面：https://a.com
// iframe：https://b.com

// 无法访问
const iframeDoc = document.getElementById('myIframe').contentDocument;

XMLHttpRequest 同源策略

禁止使用 XHR 对象向不同源的服务器发起 HTTP 请求。

// 当前页面：https://a.com
// 以下请求会被浏览器阻止
fetch('https://b.com/api/data');

关键点

• 同源要求协议、域名、端口三者完全相同
• DOM 同源策略限制跨域 iframe 的 DOM 访问
• XMLHttpRequest 同源策略限制跨域 HTTP 请求
• 同源策略是浏览器安全的基础机制