这是浏览器中的一种安全策略,是为了保障网站资源间访问的安全性的一种策略。旨在保护用户数据和防止恶意攻击。它主要用于限制网页之间的交互,确保脚本只能在同源的条件下进行操作
这里的“同源”是指以下三个组成部分都相同:
- 协议(Protocol):比如 HTTP 或 HTTPS。
- 域名(Domain):例如
example.com
。 - 端口(Port):比如 80(HTTP)或 443(HTTPS)。如果端口未指定,通常会默认使用 HTTP 的 80 端口或 HTTPS 的 443 端口。
注意,URL 中 协议、域名、端口 三者要**完全相同**,才表示的是同源资源,只要其中有任意一个不同,则为非同源的资源。
非同源的资源之间确实有相互访问的需求,则称作 “跨域” 访问。
以下资源为非同源资源:
> - http://localhost:5500/login.html
> - http://localhost:3000/users/login
> - http://127.0.0.1:5500/users/login
同源策略的具体限制:
-
跨域请求:
- 同源策略禁止网页从一个源(协议、域名、端口)向不同源的网页发起请求。这意味着,A 站点上的 JavaScript 脚本不能通过 AJAX 请求访问 B 站点的资源,除非 B 站点明确允许这种跨域访问。
-
DOM 操作:
- 脚本只能访问与其同源的页面的 DOM 对象。这防止了恶意网站通过脚本操控其他网站的内容或窃取用户信息。
-
Cookie 操作:
- Cookie 只能被设置和读取与其相同源的页面。不同源的页面无法访问或篡改 Cookie。
解决资源访问“跨域”问题的方案:
-
CORS(跨域资源共享):
- CORS 是一种机制,它允许服务器通过 HTTP 头部指示浏览器允许特定来源的请求访问资源。服务器可以在响应头中添加`Access-Controll-*` 头部,以明确允许跨域请求。
-
JSONP(JSON with Padding):
- JSONP 是一种老旧的跨域技术,通过在 `<script src="">`标签中动态插入请求来绕过同源策略。服务器返回 JSON 数据,但以函数调用的形式包装,浏览器允许这种请求。
-
WebSocket:
- WebSocket 协议在建立连接时会遵循同源策略,但一旦连接建立,WebSocket 连接允许跨域数据传输。
-
PostMessage:
window.postMessage
方法允许在不同源的窗口之间安全地传递消息。这种方法常用于父页面和嵌入的 iframe 之间的通信。
-
服务端代理(proxy):
- 通过在同源服务器上设置代理,可以间接访问不同源的资源。代理服务器接收来自客户端的请求,然后将其转发到目标服务器,再将响应返回给客户端。