一篇彻底讲清浏览器同源策略

目录

一、什么是同源?

二、为什么需要同源策略?

三、同源策略的限制范围

四、跨源解决方案

1.请求跨域

CORS(跨源资源共享)

JSONP(仅限 GET 请求)

Websocket

代理服务器

2.页面跨域

 postMessage API 

  document.domain

  window.location.hash

   window.location.hash

五、常见误区与注意事项

六、总结


一、什么是同源?

两个 URL 的 协议(Protocol)、域名(Domain)、端口(Port) 三者完全相同,才属于同源。

MDN 解释
示例

  • https://example.com/page 与 https://example.com/api 同源

  • http://example.com 与 https://example.com 不同源(协议不同)

  • example.com 与 sub.example.com 不同源(域名不同)

  • example.com:80 与 example.com:8080 不同源(端口不同)


二、为什么需要同源策略?

核心目的是 隔离潜在恶意文档,保护用户数据安全

  1. 防止恶意网站通过脚本读取敏感数据(如 Cookie、DOM)。

  2. 阻止跨站请求伪造(CSRF)等攻击。

  3. 限制不同源页面间的未授权通信。


三、同源策略的限制范围

以下操作默认被浏览器禁止(跨源时):

  1. DOM 访问

    • 无法通过 iframe.contentWindowwindow.open 等方式访问非同源页面的 DOM。

    • 示例:A 页面嵌入 B 的 iframe,若不同源,A 无法读取 B 的 DOM 内容。

  2. 网络请求

    • XMLHttpRequest 或 Fetch API 发起的跨源 HTTP 请求会被浏览器拦截(需服务器显式允许 CORS)。

    • 例外:

你可能感兴趣的:(js,javascript)