Open yihan12 opened 10 months ago
同源：如果两个 URL 的协议、域名（主机名）和端口都相同，我们就称这两个 URL 同源。 这两个 URL 是同源的
https://time.geekbang.org/?category=1 https://time.geekbang.org/?category=0
源：就是协议、域名和端口号。 同源策略：SOP（Same origin policy）是由Netscape公司1995年引入浏览器的一种约定，是浏览器最核心、最基本的安全功能，若缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，若两个URL的协议、域名、端口号都相同，则两者为同源，有一个不同则非同源，即便两个不同的域名指向同一个ip地址，也是非同源的
源：就是协议、域名和端口号。
同源策略：SOP（Same origin policy）是由Netscape公司1995年引入浏览器的一种约定，是浏览器最核心、最基本的安全功能，若缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，若两个URL的协议、域名、端口号都相同，则两者为同源，有一个不同则非同源，即便两个不同的域名指向同一个ip地址，也是非同源的
非同源的URL在没有明确授权的情况下，不能读写对方资源（不能相互通信）
具体来讲，同源策略主要表现在 DOM、Web 数据和网络这三个层面。
第一个，DOM 层面。同源策略限制了来自不同源的 JavaScript 脚本对当前 DOM 对象读和写的操作。
第二个，数据层面。同源策略限制了不同源的站点读取当前站点的 Cookie、IndexDB、LocalStorage 等数据。由于同源策略，我们依然无法通过第二个页面的 opener 来访问第一个页面中的 Cookie、IndexDB 或者 LocalStorage 等内容。你可以自己试一下，这里我们就不做演示了。
第三个，网络层面。同源策略限制了通过 XMLHttpRequest 等方式将站点的数据发送给不同源的站点。你还记得在《17 | WebAPI：XMLHttpRequest 是怎么实现的？》这篇文章的末尾分析的 XMLHttpRequest 在使用过程中所遇到的坑吗？其中第一个坑就是在默认情况下不能访问跨域的资源。
浏览器默认两个相同的源之间是可以相互访问资源和操作 DOM 的。两个不同的源之间若想要相互访问资源或者操作 DOM，那么会有一套基础的安全策略的制约，我们把这称为同源策略。
同源策略会隔离不同源的 DOM、页面数据和网络通信，进而实现 Web 页面的安全性。
同源策略将限制以下几种行为：
（1）Cookie、LocalStorage 和 IndexDB 无法读取
（2）DOM 和 Js对象无法获得
（3）AJAX 请求不能发送
以下两种不受同源策略的限制：
（1）页面中的链接，重定向以及表单提交是不会受到同源策略限制
（2）跨域资源的引入，但是js不能读写加载的内容，如嵌入到页面中的，，，等</p> <p>注意：</p> <p>同源策略是浏览器做的限制，对服务器与服务器之间的通信不做限制</p> <p><strong>1. 页面中可以嵌入第三方资源</strong></p> <p><strong>2. 跨域资源共享和跨文档消息机制</strong></p> <h1>总结</h1> <p>同源策略会隔离不同源的 DOM、页面数据和网络通信，进而实现 Web 页面的安全性。</p> <p>不过鱼和熊掌不可兼得，要绝对的安全就要牺牲掉便利性，因此我们要在这二者之间做权衡，找到中间的一个平衡点，也就是目前的页面安全策略原型。总结起来，它具备以下三个特点：</p> <p><strong>页面中可以引用第三方资源</strong>，不过这也暴露了很多诸如 <strong>XSS 的安全问题</strong>，因此又在这种开放的基础之上引入了 <strong>CSP</strong> 来限制其自由程度。 <strong>使用 XMLHttpRequest 和 Fetch 都是无法直接进行跨域请求的</strong>，因此浏览器又在这种严格策略的基础之上引入了<strong>跨域资源共享策略（CORS）</strong>，让其可以安全地进行跨域操作。 <strong>两个不同源的 DOM 是不能相互操纵的</strong>，因此，浏览器中又实现了<strong>跨文档消息机制（window.postMessage）</strong>，让其可以比较安全地通信</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>
什么是浏览器同源策略?
同源：如果两个 URL 的协议、域名（主机名）和端口都相同，我们就称这两个 URL 同源。
这两个 URL 是同源的
非同源的URL在没有明确授权的情况下，不能读写对方资源（不能相互通信）
具体来讲，同源策略主要表现在 DOM、Web 数据和网络这三个层面。
第一个，DOM 层面。同源策略限制了来自不同源的 JavaScript 脚本对当前 DOM 对象读和写的操作。
第二个，数据层面。同源策略限制了不同源的站点读取当前站点的 Cookie、IndexDB、LocalStorage 等数据。由于同源策略，我们依然无法通过第二个页面的 opener 来访问第一个页面中的 Cookie、IndexDB 或者 LocalStorage 等内容。你可以自己试一下，这里我们就不做演示了。
第三个，网络层面。同源策略限制了通过 XMLHttpRequest 等方式将站点的数据发送给不同源的站点。你还记得在《17 | WebAPI：XMLHttpRequest 是怎么实现的？》这篇文章的末尾分析的 XMLHttpRequest 在使用过程中所遇到的坑吗？其中第一个坑就是在默认情况下不能访问跨域的资源。
浏览器默认两个相同的源之间是可以相互访问资源和操作 DOM 的。两个不同的源之间若想要相互访问资源或者操作 DOM，那么会有一套基础的安全策略的制约，我们把这称为同源策略。
安全与便利
同源策略会隔离不同源的 DOM、页面数据和网络通信，进而实现 Web 页面的安全性。
同源策略将限制以下几种行为：
（1）Cookie、LocalStorage 和 IndexDB 无法读取
（2）DOM 和 Js对象无法获得
（3）AJAX 请求不能发送
以下两种不受同源策略的限制：
（1）页面中的链接，重定向以及表单提交是不会受到同源策略限制
（2）跨域资源的引入，但是js不能读写加载的内容，如嵌入到页面中的，![]()
，，