同源策略及前后端(同源/跨域)通信

最新推荐文章于 2025-07-04 21:18:06 发布
原创 最新推荐文章于 2025-07-04 21:18:06 发布 · 695 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了同源策略的概念及其在Web安全中的作用。探讨了不同源文档之间的交互限制，包括Cookie、LocalStorage等的读取限制，DOM访问限制及AJAX请求的限制。此外，还讨论了实现跨域通信的方法，如JSONP、WebSocket和CORS。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

什么是同源策略和限制？

源：= 协议 + 域名 + 端口

同源策略在MDN中有如下解释：
同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。
这是一个用于隔离潜在恶意文件的关键的安全机制。

什么是限制：
当源不一样时，就产生了跨域。不是一个源的文档没有权利去操作另一个源的文档。具体表现为：

  • Cookie、LocalStorage、IndexDB 无法读取
  • DOM 无法获得
  • AJAX请求无法发送

前后端如何通信？

  • AJAX(同源)
  • WebSocket(不受同源策略限制)
  • CORS(支持跨域也支持同源通信)

如何创建Ajax

  • XMLHttpRequest
  • 兼容性处理
  • 事件触发条件
  • 事件触发顺序

跨域通信的几种方式

  • JSONP
    (1)动态创建一个<script>标签，发送给服务端一个包含回调名callback，并且在本地创建一个与回调名相同的全局函数
    (2)服务端返回数据
    (3)浏览器将返回的数据当成js来执行

  • WebSocket

  • CORS          //可以理解为支持跨域通信的AJAX
  • Hash            //页面不刷新也能获取新资源
  • postMessage   //H5中新增的标准
MuffinFish
关注
【网络安全 | 浏览器安全机制】同源策略（Same origin policy）及跨域请求
等风来
08-24 1万+
同源策略（Same-origin policy）是一个浏览器安全机制，用于限制不同源之间的跨域操作。它是一种控制浏览器如何处理来自不同源的资源（例如文档、脚本、样式表和AJAX请求）的规则。在同源策略中，如果两个URL具有相同的协议（protocol），主机（host）和端口号（port），则它们被视为同源（origin）。当一个浏览器的两个tab页中分别打开来自百度和谷歌的页面，浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。
Django使用中间件解决前后端同源策略问题
09-18
主要介绍了Django使用中间件解决前后端同源策略问题,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
同源策略&跨域
m0_67841039的博客
04-21 2992
了解同源策略&跨域 1.什么是同源 同源指的是两个 URL 地址具有相同的协议、主机名、端口号。 例如，下表给出了相对于 http://www.test.com/index.html 页面的 5 个同源检测结果： 2.什么是同源策略 同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。 浏览器的同源策略规定：不允许非同源的 URL 之间进行资源的交互。 3.什么是跨域 同源指的是两个 URL 的协议
网安系列【2】之深入理解同源策略
最新发布
缘友一世的博客
07-04 676
深入理解前端web同源策略
跨域/解决跨域方法
song854601134的博客
12-19 4421
首先编写一个过滤器，可以起名字为MyCorsFilter.java} }.} }.} }.} }.} }.} }.} }.} }.} }.} }.} }.
前后端交互---同源策略与跨域
前端与计算机相关知识的分享，博主的qq523235674
03-06 788
1.什么是同源 如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。 例如，下表给出了相对于http://www.test.com/index.html页面的同源检测: 2.什么是同源策略 同源策略(英文全称Same origin policy)是浏览器提供的一个安全功能。 MDN官方给定的概念:同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。 通俗的理解:浏览器规定，A网站的JavaScript，不允许和非同源的网站
同源策略和跨域
weixin_51810350的博客
02-17 511
1.同源:如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。 2.同源策略 同源策略是浏览器提供的一个安全功能 1.跨域 出现跨域的根本原因 :浏览器的同源策略不允许非同源的URL之间进行资源的交互 。 2.浏览器对跨域请求的拦截 浏览器允许发起跨域请求，但是跨域请求回来的数据，会被浏览器拦截 ，无法被页面获取到 3.如何实现跨域数据请求 最主要的两种解决方案是JSONP和CORS JSONP只支持GET请求,不支持POST请求 CORS支持get和post请求 ，...
同源策略与跨域
热门推荐
mijichui2153的博客
11-21 1万+
前言：最近业务上前端同学多次联系说访问腾讯云cos资源的时候因为跨域的问题访问不到。大致看了下腾讯云关于设置跨域访问的教程，按照前端同学给的域名等选项就给配了，而且测试下来也是好的。但是呢一直不知道什么是跨域这里就做一个简单的学习记录。 一、同源策略 同源策略(Same Origin Policy)是一种约定，它是浏览器最核心也是最基本的安全功能。同源策略会阻止一个域的javascrip脚本和另一个域的内容进行交互，是用于隔离潜在恶意文件的关键安全机制；关于这一点我们后面会举例说明。...
同源政策/跨域与跨域解决策略/web安全攻击CSRF以及XSS
darabiuz的博客
02-11 3365
1.同源策略 1. 什么是同源 同源策略是浏览器安全的基石，当前网页的url和ajax请求地址的url必须同源，它要求协议、域名、端口号三者必须相同，只要有一处不同就属于跨域 2. 为什么要有同源策略 想象这样一个场景，你登录并信任了一个购物网站A，然后在没有退出的情况下登陆了恶意网站B，由于浏览器携带了cookie信息，那么B就可以冒充用户向A网站发送请求，比如购买物品之类的违背用户预期的恶意行为，带来严重影响，这其实也就是平时所说的CSRF攻击（具体见下文对于CSRF的介绍），由来同源策略以后，主要限制
同源策略和跨域-总结
u010790621的博客
12-17 509
1.同源策略 2.跨域 3.几种跨域技术 - JSONP, CORS
前后端分离项目之浏览器的同源策略和CORS
人的愤怒都是因为自己的无能。
06-05 935
浏览器的同源策略： 同源策略是一种约定，它是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，则浏览器的功能可能都会受到影响。可以说Web是构建在同源策略基础之上的浏览器知识针对同源策略的一种实现。 同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。 ...
同源策略及跨域的问题
Preeminent
01-13 1203
同源策略 源：如果两个页面的协议，端口和域名是相同的，则两个页面具有相同的源。 同源策略限制从一个源加载的文档或脚本与另一个不同的源的资源进行交互。 即一个页面不能调用另一个不同源中的脚本。（可以引用，例如src，但不能读写） 跨域及其几种常见的实现形式 跨域：从一个页面去请求读或者写另一个页面的资源，突破同源策略的限制。 跨域的几种实现形式： 降域：仅限主域名相同子域名不同的两个页面交互，可以通过
同源策略和跨域实现
Luxd的博客
07-05 548
同源策略和跨域实现同源策略 怎样才算同源同源是指域名（主机名或者ip地址）、端口、协议相同。不同的客户端脚本（javascript、ActionScript)在没有明确授权的情况下，不允许读取对方的资源。下面举例，与URL”http://www.example.com/dir/page.html“进行对比说明：（转自http://www.jianshu.com/p/beb059c43a8b） 对比
同源策略与跨域的解决方案
失眠时间的博客
05-12 3580
总所周知，同源策略是导致跨域的原因，那么什么是同源策略，又可以如何解决跨域的问题呢？咱们一起往下探讨吧~当浏览器中一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。用户在使用浏览器的情况下会使用到 CORS，因为控制访问权限的是浏览器而非服务器。因此使用其它客户端的时候无需关心任何跨域问题。同源策略(Same Origin Policy)是一种约定，它是浏览器最核心也是最基本的安全功能。
同源策略与跨域访问
qq_43285335的博客
11-20 266
同源策略 什么是同源策略 两个页面拥有相同的 协议,域名,端口号(如果规定)，那么他们就属于同一个源 例如： http:www.wozuimei.com/first.html http:www.wozuimei.com/cont/my/other.html 上面两个就是属于同一个源 http:www.wozuimei.com/first.html http:www.bumeili.com/firs...
理解浏览器同源策略：原理、IE特性和跨域通信
同源策略（Same-origin Policy, SOP）是Web浏览器内置的一组规则，旨在防止跨域资源共享（Cross-Origin Resource Sharing, CORS）时的潜在安全风险。源的概念源自于网络地址，它由协议（如http或https）、主机名（如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值