认识

2024年03月20日

柏拉文

越努力，越幸运

一、同源策略

---

浏览器同源策略是一种安全机制, 用于限制不同源（origin）的网页之间相互访问数据或资源。具体来说，同源策略规定: 两个 URL 必须具有相同的协议（如 HTTP 或 HTTPS）、域名和端口，才能被视为 同源。同源策略 防止恶意网站通过 JavaScript 等方式获取或操作其他网站的数据，从而保护用户的隐私和安全。同源策略主要限制了 DOM 访问、Cookie、LocalStorage 以及 AJAX 请求等方面的跨域操作。但是, img 标签、a 标签、script 标签 等带 src 和 href 属性的标签允许跨域加载资源。

二、跨域策略

---

2.1 跨域限制的内容

• DOM 节点

• AJAX Fetch请求

• Cookie、LocalStorage、IndexedDB 等存储性内容

2.2 允许跨域的标签

• <img src='' />

• <a href=''></a>

• <script src=''></script>

• <form url=''/>

• <iframe url=''/>

总结: 带src属性的标签都不受同源策略的影响

2.3 实现跨域的方案

1. JSONP 跨域方案

2. CORS 跨域

3. postMessage + iframe 跨域方案

4. document.domain + iframe 跨域方案

5. window.name 跨域方案

6. location.hash 跨域方案

7. http-proxy 跨域方案

8. nginx 反向代理跨域方案

9. Websocket 跨域方案

10. Node.js BFF 请求代理或转发

三、问题

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

浏览器同源策略是一种安全机制, 用于限制不同源（origin）的网页之间相互访问数据或资源。具体来说，同源策略规定: 两个 URL 必须具有相同的协议（如 HTTP 或 HTTPS）、域名和端口，才能被视为 同源。同源策略 防止恶意网站通过 JavaScript 等方式获取或操作其他网站的数据，从而保护用户的隐私和安全。同源策略主要限制了 DOM 访问、Cookie、LocalStorage 以及 AJAX 请求等方面的跨域操作。但是, img 标签、a 标签、script 标签 等带 src 和 href 属性的标签都不受同源策略的影响。

3.2 为什么浏览器不支持跨域?

浏览器同源策略是一种安全机制, 用于限制不同源（origin）的网页之间相互访问数据或资源。具体来说，同源策略规定: 两个 URL 必须具有相同的协议（如 HTTP 或 HTTPS）、域名和端口，才能被视为 同源。同源策略 防止恶意网站通过 JavaScript 等方式获取或操作其他网站的数据，从而保护用户的隐私和安全。同源策略主要限制了 DOM 访问、Cookie、LocalStorage 以及 AJAX 请求等方面的跨域操作。但是, img 标签、a 标签、script 标签 等带 src 和 href 属性的标签允许跨域加载资源。

3.3 为什么要有同源策略限制？

浏览器同源策略是一种安全机制, 用于限制不同源（origin）的网页之间相互访问数据或资源。具体来说，同源策略规定: 两个 URL 必须具有相同的协议（如 HTTP 或 HTTPS）、域名和端口，才能被视为 同源。同源策略 防止恶意网站通过 JavaScript 等方式获取或操作其他网站的数据，从而保护用户的隐私和安全。同源策略主要限制了 DOM 访问、Cookie、LocalStorage 以及 AJAX 请求等方面的跨域操作。但是, img 标签、a 标签、script 标签 等带 src 和 href 属性的标签允许跨域加载资源。