js 跨域问题 汇总-编程思维

前言 相信每一个前端er对于跨域这两个字都不会陌生,在实际项目中应用也是比较多的。但跨域方法的多种多样实在让人目不暇接。老规矩,碰到这种情况,就只能自己总结一篇博客,作为记录。 正文 1. 什么是跨域? 跨域一词从字面意思看,就是跨域名嘛,但实际上跨域的范围绝对不止那么狭隘。具体概念如下:只要协议、域名、端口有任何一个不同,都被当作是不同的域。之所以会产生跨域这个问题呢,其实也很容易想明白,要是

再也不学ajax了!(三)跨域获取资源 ③-编程思维

让我们先简单回顾一下之前谈到的内容,AJAX是一种无页面刷新的获取服务器资源的混合技术。而基于浏览器的“同源策略”,不同“域”之间不可以发送AJAX请求。但是在某些情境下,我们需要“跨域获取资源”,为了满足这一需求,我们可以使用“JSONP”与“CORS”两种技术。 现在,我们将要简要了解“跨域共享资源”的另外两种方式:WebSocket 和 postMessage。让我们先大概看看他们是什么,

9种跨域方式实现原理-编程思维

摘要:当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。不同域之间相互请求资源,就算作“跨域”。 本文分享自华为云社区《九种跨域方式实现原理咋回事》,作者:龙哥手记 一、什么是跨域? 1.什么是同源策略及其限制内容? 同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个

个人文章-编程思维

此方法可以用于实现跨源通信等,我们来演示如何实现在两个窗口之间进行通信。假设我们现在有两个页面:page1.html和page2.html, 他们的关系是通过iframe关联起来的,就像这样(下面是page1.html的内容):<iframe id="receiver" src="./page2.html" width="300" height="100"></iframe>

iframe跨域通信实战 - 编程思维

"长时间不写文章,开头的方式总是那么出奇的相似",最近很忙,好久没写博客了啊(是不是?)。 更换工作已经有三个月有余,这段三个月把过去三年没加过的班都加了一次。收获挺多,发现的问题也挺多。 一直也在思考一些问题: 如何把自己遇见的问题好好的理解并且总结? 如何很好的学习新知识,不只是停留在用的基础上? …… 上面的问题我一直在尝试更适合我的方法,暂时就不扯淡了,先尝试一下把这段时间

通过postmessage进行跨域通信 - 编程思维

最近工作中遇到一个需求,场景是:h5页作为预览模块内嵌在pc页中,用户在pc页中能够做一些操作,然后h5做出响应式变化,达到预览的效果。 这里首先想到就是把h5页面用iframe内嵌到pc网页中,然后pc通过postMessage方法,把变化的数据发送给iframe,iframe内嵌的h5通过addEventListener接收数据,再对数据做响应式的变化。 这里总结一下postMessage的

jsonp原理及jquery jsonp的使用 - 编程思维

JSONP原理 JSON和JSONP   JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧,不是很清楚的朋友可以去json.org上了解下,简单易懂。   JSONP是JSON with Padding的略称。它是一个非官方的协议,它允许在服务器端集成Scripttags返回至客户端,通过javascriptcallba

postmessage 还能这样玩 - 编程思维

在日常工作中,消息通信是一个很常见的场景。比如大家熟悉 B/S 结构,在该结构下,浏览器与服务器之间是基于 HTTP 协议进行消息通信:然而除了 HTTP 协议之外,在一些对数据实时性要求较高的场景下,我们会使用 WebSocket 协议来完成消息通信:对于这两种场景,相信大家都不会陌生。接下来,阿宝哥将介绍消息通信的另外一种场景,即父页面与 iframe 加载的子页面之间,如何进行消息通信。为什

全新的postmessage库特性介绍与源码解析 - 编程思维

众所周知,postMessage 是在不同页面间进行通信的一种常用方式:window.postMessage() 方法可以安全地实现跨源通信。通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机 (两个页面的模数 Document.domain设置为相同的值) 时,这两个脚本才能相互通信。window.postM

window.name和postmessage跨域详解 - 编程思维

文章不易,请关注公众号 毛毛虫的小小蜡笔,多多支持,谢谢。概念window.name1、在一个窗口还没关闭之前,同一个窗口的所有页面都共享同一个window.name。这个窗口可理解为chrome浏览器的一个tab标签页面。另外,从一个页面中跳转到另一个页面后,这些页面都共享同一个window.name。2、每个页面都能读和写window.name。这个可能就是安全问题的来源。3、window.n

浏览器同源政策以及js跨域 - 编程思维

浏览器同源政策以及JS跨域 同源是指协议相同、域名相同、端口相同。同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。 同源策略主要限制下面三种情况 Cookie 无法读取 DOM 无法获得 AJAX 请求不能发送 同源策略的本意是为了保证用户的信息安全。但有时也会带来不便,下面我们来看一下怎样规避同源的限制。 Cookie 是服务器写入浏览器的一小段信息,只有同源的网页

利用window.postmessage()实现跨域消息传递(javascript) - 编程思维

说明 window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如,在一个页面和它生成的弹出窗口之间,或者是页面和嵌入其中的iframe之间。 通常情况下,不同页面上的脚本允许彼此访问,当且仅当它们源自的页面共享相同的协议,端口号和主机(也称为“同源策略”)。window.postMessage()提供了一个受控的机制来安全地规避这个限制(如果使用得当的话)。

iframe跨域通讯的几种方法 - 编程思维

在项目中遇到页面中嵌入IFrame(主页面和框架页为不同域名)时,由于同源策略,主页面和IFrame内页无法通讯的问题。 同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那怎样是相同的域呢?当两个域具有相同的协议(如http), 相同的端口(如80),相同的host(如www.e

跨域方案总结 - 编程思维

平时在开发中总是会遇到各种跨域问题,一直没有很好地了解其中的原理,以及其各种实现方案。今天在这好好总结一下。 本文完整的源代码请猛戳github博客,建议大家动手敲敲代码。 1、什么是跨域?为什么会有跨域? 一般来说,当一个请求url的协议、域名、端口三者之间任意一个与当前页面地址不同即为跨域。之所以会跨域,是因为受到了同源策略的限制,同源策略要求源相同才能正常进行通信,即协议、域名、端口号都完

postmessage踩坑实践 - 编程思维

前言在低代码编辑器中进行页面预览常常不得不用到iframe进行外链的url引入,这就涉及到了预览页面与编辑器页面数据通信传值的问题,常常用到的方案就是postMessage传值,而postMessage本身在eventloop中也是一个宏任务,就会涉及到浏览器消息队列处理的问题,本文旨在针对项目中的postMessage的相关踩坑实践进行总结,也为想要使用postMessage传递数据的童鞋提供一

微信小程序的坑之wx.miniprogram.postmessage - 编程思维

工作中有个需求是小程序的网页在关闭的时候,需要回传给小程序一个参数 查阅小程序官方文档,有这样一个接口 wx.miniProgram.postMessage ,可以用来从网页向小程序发送消息,然后通过 bindmessage 事件来监听消息,如下是官方文档描述 以下是代码: // 网页代码 <!DOCTYPE html> <html> <head>

websocket & postmessage - 编程思维

让我们先简单回顾一下之前谈到的内容,AJAX是一种无页面刷新的获取服务器资源的混合技术。而基于浏览器的“同源策略”,不同“域”之间不可以发送AJAX请求。但是在某些情境下,我们需要“跨域获取资源”,为了满足这一需求,我们可以使用“JSONP”与“CORS”两种技术。 现在,我们将要简要了解“跨域共享资源”的另外两种方式:WebSocket 和 postMessage。让我们先大概看看他们是什么,

前端多种跨域方式实现原理详解 - 编程思维

跨域是我们在项目中经常遇到的,前后端数据交互经常碰到请求跨域,首先我们来想一下为什么会有跨域这个词的出现?本文带你来探讨一下以下几个问题: 跨域是什么? 为什么要跨域? 跨域的几种方式? ... 什么是跨域? 跨域是指的浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成,是浏览器对JavaScript实施的安全限制。 跨域实际上指从一个域的网页去请求另一个域的资源,比如:从 http

前端常见跨域解决方案(全) - 编程思维

什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: 1.) 资源跳转: A链接、重定向、表单提交 2.) 资源嵌入: <link>、<script>、<img>、<frame>等dom标签,还有样式中background:url()、@font-face()等文件外链 3.) 脚本请求: js发