同源策略(同域限制)

呼叫6945

于 2024-08-18 19:37:47 发布

阅读量246

点赞数 8

文章标签： javascript 前端 ajax html5

本文链接：https://blog.csdn.net/m0_73890048/article/details/141304139

版权

这是浏览器中的一种安全策略，是为了保障网站资源间访问的安全性的一种策略。旨在保护用户数据和防止恶意攻击。它主要用于限制网页之间的交互，确保脚本只能在同源的条件下进行操作

这里的“同源”是指以下三个组成部分都相同：

协议（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)：
- 通过在同源服务器上设置代理，可以间接访问不同源的资源。代理服务器接收来自客户端的请求，然后将其转发到目标服务器，再将响应返回给客户端。

关注