浏览器工作原理与实践--同源策略：为什么XMLHttpRequest不能跨域请求资源

最新推荐文章于 2024-08-28 21:00:00 发布
最新推荐文章于 2024-08-28 21:00:00 发布
阅读量964 收藏 29
点赞数 23
分类专栏： 浏览器 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/echohuangshihuxue/article/details/137668839
版权
本文详细介绍了浏览器安全的三大块——Web页面安全、浏览器网络安全和系统安全，重点讲解了同源策略如何限制不同源间的交互，包括DOM操作、数据访问和网络通信。同时讨论了安全性和便利性之间的权衡，以及CSP和CORS在防止XSS攻击和跨域资源共享中的作用。
摘要由CSDN通过智能技术生成

通过前面6个模块的介绍，我们已经大致知道浏览器是怎么工作的了，也了解这种工作方式对前端产生了什么样的影响。在这个过程中，我们还穿插介绍了一些浏览器安全相关的内容，不过都比较散，所以最后的5篇文章，我们就来系统地介绍下浏览器安全相关的内容。

浏览器安全可以分为三大块——Web页面安全、浏览器网络安全和浏览器系统安全，所以本模块我们就按照这个思路来做介绍。鉴于页面安全的重要性，我们会用三篇文章来介绍该部分的知识；网络安全和系统安全则分别用一篇来介绍。

今天我们就先来分析页面中的安全策略，不过在开始之前，我们先来做个假设，如果页面中没有安全策略的话，Web世界会是什么样子的呢？

Web世界会是开放的，任何资源都可以接入其中，我们的网站可以加载并执行别人网站的脚本文件、图片、音频/视频等资源，甚至可以下载其他站点的可执行文件。

Web世界是开放的，这很符合Web理念。但如果Web世界是绝对自由的，那么页面行为将没有任何限制，这会造成无序或者混沌的局面，出现很多不可控的问题。

比如你打开了一个银行站点，然后又一不小心打开了一个恶意站点，如果没有安全措施，恶意站点就可以做很多事情：

  • 修改银行站点的DOM、CSSOM等信

了解本专栏 订阅专栏 解锁全文 超级会员免费看
echoecho_tongtong
关注
专栏目录
订阅专栏
【网络安全 | 浏览器安全机制】同源策略（Same origin policy）及跨域请求
等风来
08-24 8451
同源策略（Same-origin policy）是一个浏览器安全机制，用于限制不同源之间的跨域操作。它是一种控制浏览器如何处理来自不同源的资源（例如文档、脚本、样式表和AJAX请求）的规则。在同源策略中，如果两个URL具有相同的协议（protocol），主机（host）和端口号（port），则它们被视为同源（origin）。当一个浏览器的两个tab页中分别打开来自百度和谷歌的页面，浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。
Chrome Extension中跨域请求访问外部网站数据方法
06-20 3508
当时做Chrome扩展，用Javascript调用外部API总是不成功，会出现across origin error。后来发现跨域了，如果想在Chrome扩展中访问其他网站数据，只需在manifest.json文件中的”permission“中声明，再用xmlhttpRequest即可。详细介绍如下(转自360chrome的开发文档，同时可参考Chrome extension)： 跨域 X...
AJAX（XMLHttpRequest）进行跨域请求方法详解（一）
热门推荐
【孟子E章】
01-11 13万+
注意：以下代码请在Firefox 3.5、Chrome 3.0、Safari 4之后的版本中进行测试。IE8的实现方法与其他浏览不同。跨域请求，顾名思义，就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见，比如说通过 style 标签加载外部样式表文件、通过 img 标签加载外部图片、通过 script 标签加载外部脚本文件、通过 Webfont
分享跨域访问的解决方案与基础分析
最新发布
ZL_1618的博客
08-28 1470
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。下面我们展示JSONP的使用案例。
Xmlhttprequest请求跨域
那些年我们踩过的坑
08-23 8035
Xmlhttprequest请求跨域 同源策略 本人采用： 一：接口注解@CrossOrigin 二：过滤器对跨域请求特殊处理 HttpServletRequest servletRequest = (HttpServletRequest) request; HttpServletResponse servletResponse = (HttpServletResponse) resp
将网页设置为允许 XMLHttpRequest 跨域访问
kogu的博客
10-25 1万+
在非IE下，使用XMLHttpRequest 不能跨域访问， 除非要访问的网页设置为允许跨域访问。 将网页设置为允许跨域访问的方法如下： Response.AddHeader("Access-Control-Allow-Origin", "*"); 或指定域名下可以访问： Response.AddHeader("Access-Control-Allow-Origin", "h
XMLHttpRequest的跨域请求
weixin_33804582的博客
05-20 624
缘起 由于浏览器的同源策略，非同源不可请求。 但是，在实践当中，经常会出现需要跨域请求资源的情况，比较典型的例如某个子域名向负责进行用户验证的子域名请求用户信息等应用。 以前要实现跨域访问，可以通过JSONP、Flash或者服务器中转的方式来实现，但是现在我们有了CORS。 CORS与JSONP相比，无疑更为先进、方便和可靠。 1、 JSONP只能实现GET请求，而CORS支持所有类...
layui-table-cros：layui表格跨域请求
02-21
在layui-table-cros-master压缩包中，可能包含了示例代码、配置文件或其他相关资源，用于演示如何在layui表格中实现跨域请求，并与Java后端的CORS配置相结合。你可以解压文件，查看具体代码和文档，以了解更多实现...
浏览器安全策略：同源策略与跨域资源共享
同源策略、浏览器安全、XMLHttpRequest跨域请求限制 在本篇文章中，我们将详细介绍同源策略（Same-origin Policy），它是浏览器安全的核心策略之一。同源策略是指如果两个 URL 的协议、域名和端口都相同，我们就称...
AJAX--XMLHttpRequest & 跨域
郊眠寺
05-18 7100
XMLHttpRequest XMLHttpRequest 是浏览器内置的一个构造函数 作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。 axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR） 封装出来的！ 使用 XMLHttpRequest 发起 GET 请求 主要的 4 个实现步骤： 创建 xhr 对象 调用 xhr.open() 函数 调用 xhr.send() 函
详解XMLHttpRequest的跨域资源共享
weixin_30556959的博客
03-28 313
0x00 背景 在Browser Security-同源策略、伪URL的域这篇文章中提到了浏览器的同源策略，其中提到了XMLHttpRequest严格遵守同源策略，非同源不可请求。但是，在实践当中，经常会出现需要跨域请求资源的情况，比较典型的例如某个子域名向负责进行用户验证的子域名请求用户信息等应用。 以往，有一种解决方案是利用JSONP进行跨域的资源请求，但这种方案存在着几点缺...
利用XMLHttpRequest发起请求解决跨域
qq_37881606的博客
06-20 3475
【代码】利用XMLHttpRequest发起请求解决跨域。
AJAX（XMLHttpRequest）进行跨域请求方法详解
chengjuli6368的博客
04-21 241
注意：以下代码请在Firefox 3.5、Chrome 3.0、Safari 4之后的版本中进行测试。IE8的实现方法与其他浏览不同。跨域请求，顾名思义，就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见，比如说通过 style 标签加载外部样式表文件、通过 img 标签加...
XmlHttpRequest使用及“跨域”问题解决
weixin_30952535的博客
06-30 5319
一. IE7以后对xmlHttpRequest 对象的创建在不同浏览器上是兼容的。 下面的方法是考虑兼容性的，实际项目中一般使用Jquery的ajax请求，可以不考虑兼容性问题。 function getHttpObject() { var xhr=false; if (windows.XMLHttpRequest) xhr=new XMLHttpRequest()...
同源策略：为什么XMLHttpRequest不能跨域请求资源？
知之为知之，不知为不知
10-07 821
什么是同源策略 如果两个 URL 的协议、域名和端口都相同，我们就称这两个 URL 同源。比如下面这两个 URL，它们具有相同的协议 HTTPS、相同的域名 time.geekbang.org，以及相同的端口 443，所以我们就说这两个 URL 是同源的。 https://time.geekbang.org/?category=1 https://time.geekbang.org/?category=0 浏览器默认两个相同的源之间是可以相互访问资源和操作 DOM 的。两个不同的源之间若想要相互访问
浏览器原理--同源策略：为什么XMLHttpRequest不能跨域请求资源
xuan的博客
06-07 522
（1） 如果两个 URL 的协议、域名和端口都相同，我们就称这两个 URL 同源。（2）浏览器默认两个相同的源之间是可以相互访问资源和操作 DOM 的。（3）源策略主要表现在 DOM、Web 数据和网络这三个层面。（1） 页面中可以嵌入第三方资源1、暴露了很多诸如 XSS 的安全问题，为了解决 XSS 攻击，浏览器中引入了内容安全策略，称为 CSP。2、CSP 的核心思想是让服务器决定浏览器能够加载哪些资源，让服务器决定浏览器是否能够执行内联 JavaScript 代码。通过这些手段就可以大大减少 XSS
XMLHttpRequest 跨域问题
whan8080的专栏
03-25 1903
在使用jquery的ajax请求的时候，出现了这么个问题。 XMLHttpRequest cannot loadfile:///some/path/some.html Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrom...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

echoecho_tongtong

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值