精华内容
下载资源
问答
  • 跨域通信的几种方法
    2022-02-15 19:17:53
    跨域通信
    	概念
    	直接跨域会导致什么问题?
    		请求被拦截,提示没有允许跨域
    	跨域方式
    		CORS跨域
    			跨域资源共享
    				服务端设置响应头部:Access-Control-Allow-Origin,允许请求源
    		jsonp跨域
    			jsonp的工作原理,如何执行
    			使用方式
    				请求携带回调函数
    				响应方拿到回调函数,并传入参数,并返回
    		postMessage跨域
    			使用场景:同一页面的父子窗口
    			使用方式
    				发送消息:父页面通过子页面的窗口代理向子页面发送消息
    				接收消息:监听message事件,,通过事件处理器获取消息体,(并可验证消息源)
    		window.name跨域
    			window.name的特点:
    				每一个窗口共享window.name
    				窗口存在期间,载入的所有页面拥有该参数的读写权限
    				window.name可以存储不超过2M的数据,数据格式可自定义
    			使用方式
    				在a页面,添加iframe,设置src为目标页面,待iframe加载结束,修改iframe的src指向同源页面,再访问iframe窗口对应的name属性
    		location.hash跨域
    			同源数据互访
    			使用方式
    				在a页面,添加iframe,设置src为目标页面c,将目标页面的数据,添加到子窗口b页面的url路径上,b页面可直接修改a页面的hash
    		后端设置代理跨域
    			原理:因为JS同源策略是浏览器的安全策略,所以在浏览器客户端不能跨域访问,而服务器端调用HTTP接口只是使用HTTP协议,不会执行JS脚本,不需要同源策略
    			使用方式
    				前端发出同源请求,服务端转发请求,并返回结果
    		document.domain跨域
    		websocket跨域
    			该协议不实行同源策略
    			使用方式:客户端发起连接,之后监听事件,获取数据
    		form表单跨域
    			原理:form只是提交数据,不会返回数据,js脚本不会读取跨域数据
    			使用方式:使用form提交请求,使用postmessage返回数据
    		关闭浏览器跨域限制
    
    更多相关内容
  • 这周碰到一个让人头疼的需求:要在我的web项目中嵌入另一个第三方web...在window对象下有个postMessage方法,是专门用来解决跨域通信问题的。 关于postMessage的详细介绍请戳这里,不过MDN的文档太详细了,导致有些同学
  • JavaScript由于同源策略的限制,跨域通信一直是棘手的问题。当然解决方案也有很多: 1.document.domain+iframe的设置,应用于主域相同而子域不同; 2.利用iframe和location.hash,数据直接暴露在了url中,数据容量和...
  • NULL 博文链接:https://lililucky1211.iteye.com/blog/1853504
  • JavaScript 父子页面跨域通信的方法
  • MessengerJS-master(iframe跨域通信) MessengerJS-master(iframe跨域通信)
  • iframe跨域通信 查看演示 源码下载 众所周知,由于前端javascript对跨域访问做了安全限制,javascript只能访问与包含它的文档在同一域下的内容。 用法举例: 需求是在http://www.demo.org/top.html中通过iframe...
  • iframe跨域通信

    2022-01-25 13:41:40
    iframe通信跨域情况下,可以使用 postMessage 配合监听 onmessage 调用

    在非跨域的情况下,可以通过
    【父调子】 iframe的dom节点.contentWindow
    【子调父】window.top/window.parent
    来相互通信

    在跨域情况下,可以使用postMessage()配合监听onmessage调用

    // 主动调用的页面
    window.top.postMessage('messageMark','*') // 该页面为iframe页面
    iframeDom.contentWindow.postMessage("messageMark", "*"); // 该页面为父页面
    
    // 被调用的页面
    window.addEventListener('message',function(e) {
        if (e.data == 'messageMark') { // 传参校验
            ......
        }
    })
    

    注:需要iframe加载完成才可以调用,初始化时就要执行的功能可以放在iframe.onLoad中执行

    postMessage()方法

    postMessage(message,targetOrigin,arr[transfer])

    message: onmessage事件中可以接受到的数据
    targetOrigin: 指定哪个url能接收到消息事件(默认’*’)
    transfer: 可选,是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权

    message

    利用此事件来监听来自你的扩展其他部分的消息

    示例(vue项目)

    ...
    created(){
        if (!this.isPhone) return
        let _this = this
        // 要执行的内容函数
        const editPhone = function(e) {
            if (e.data == 'editPhone') { // 传参校验
                _this.getDetail()
            }
        }
        window.addEventListener('message',editPhone)
        _this.$emit('hook:beforeDestroy',function() {
            window.removeEventListener('message',editPhone)
        })
    }
    ...
    

    另一个页面

    ...
    methods: {
        phoneChange(){
            ...
            // 跨域通信
            this.iframeDom.contentWindow.postMessage("editPhone", "*");
        }
    }
    ...
    
    展开全文
  • 本文主要介绍几种常见的javascript跨域通信方法。首先讲解一下JSONP。 1、JSONP JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server...
  • 本文介绍了详解html5 postMessage解决跨域通信的问题,分享给大家,具体如下: 效果图 postmessage解析HTML5提供了新型机制PostMessage实现安全的跨源通信. 语法 otherWindow.postMessage(message, targetOrigin, ...
  • 针对舰艇编队一对多跨域指挥和舰艇随遇接入的实际需求,在 ABE 机制和代理重加密技术的基础上,提出了一种基于密文策略(CP,cipher policy)的属性基加密机制(CP-ABE)的编队跨域通信方案,给出了具体案例,进行了安全性...
  • 跨域通信的几种方式

    2022-05-04 10:51:12
    为什么会产生跨域?浏览器的同源策略。跨域通信有哪几种方式?常见的有JSONP,CORS,postMessage等。如果没有设置跨域,跨域请求会不会到达服务器?有时候会有时候不会


    一、浏览器的同源策略

    同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSRF等攻击。

    所谓同源是指"协议+域名+端口"三者相同,如果协议,域名,端口有一个不同就是跨域,Ajax请求会失败。

    二、怎么解决跨域

    1.JSONP

    JSONP的原理:JSONP 的原理很简单,就是利用 <script> 标签没有跨域限制的漏洞。通过 <script> 标签指向一个需要访问的地址并提供一个回调函数来接收数据当需要通讯时。

    JSONP 的实现:
    比如说,客户端这样写

     <script src="http://www.smyhvae.com/?data=name&callback=myjsonp"></script>
    

    上面的src中,data=name是get请求的参数,myjsonp是和后台约定好的函数名。 服务器端这样写:

    myjsonp({
          data: {}
    
      })
    

    于是,本地要求创建一个myjsonp 的全局函数,才能将返回的数据执行出来。

    JSONP 使用简单且兼容性不错,但是只限于 get 请求

    2.CORS

    CORS 可以理解成是既可以同步、也可以异步的Ajax。

    • CORS需要浏览器和后端同时支持
    • 浏览器会自动进行 CORS 通信,实现CORS通信的关键是后端。只要后端实现了 CORS,就实现了跨域.
    • 服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表示哪些域名可以访问资源,如果设置通配符则表示所有网站都可以访问资源
    header("Access-Control-Allow-Origin: * ");
    

    可以看我在这篇详细介绍 -> CORS跨域的原理

    3.document.domain + iframe跨域

    该方式只能用于二级域名相同的情况下,比如 a.test.comb.test.com 适用于该方式。
    只需要给页面添加 document.domain = 'test.com' 表示二级域名都相同就可以实现跨域

    1.)父窗口:(http://www.domain.com/a.html)

    <iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
    <script>
        document.domain = 'domain.com';
        var user = 'admin';
    </script>
    

    2.)子窗口:(http://child.domain.com/b.html)

    document.domain = 'domain.com';
    // 获取父窗口中变量
    alert('get js data from parent ---> ' + window.parent.user);
    

    4.Hash

    url# 后面的内容就叫 HashHash的改变,页面不会刷新。这就是用 Hash 做跨域通信的基本原理。

    补充:url?后面的内容叫SearchSearch的改变,会导致页面刷新,因此不能做跨域通信。

    使用举例:
    场景: 我的页面 A 通过iframe或frame嵌入了跨域的页面 B。现在,我这个A页面想给B页面发消息,怎么操作呢?

    1. 首先,在我的A页面中:
     //伪代码
        var B = document.getElementsByTagName('iframe');
        B.src = B.src + '#' + 'jsonString';  //我们可以把JS 对象,通过 JSON.stringify()方法转成 json字符串,发给 B
    
    1. 然后,在B页面中:
    // B中的伪代码
    window.onhashchange = function () {  //通过onhashchange方法监听,url中的 hash 是否发生变化
      var data = window.location.hash;
    };
    

    5.postMessage()方法

    H5中新增的postMessage()方法,可以用来做跨域通信。既然是H5中新增的,那就一定要提到。

    这种方式通常用于获取嵌入页面中的第三方页面数据。一个页面发送消息,另一个页面判断来源并接收消息

    // 发送消息端
    window.parent.postMessage('message', 'http://B.com');
    
    // 接收消息端
    var mc = new MessageChannel();
    mc.addEventListener('message', (event) => {
        var origin = event.origin || event.originalEvent.origin;
        if (origin === 'http://blog.poetries.com') {
            console.log('验证通过')
        }
    });
    

    三、跨域请求到底会不会被服务器执行

    请求有的时候会被执行,有的时候不会执行。

    什么时候会执行,什么时候不会执行呢?其实这个问题主要要从以下几个方面去考虑:

    • 跨域究竟是谁的策略?浏览器
    • 在什么时机会拦截请求?
    • 究竟什么时候会发预检请求?非简单请求
    • 如果有预检,请求什么时候会被真正执行?预检请求返回允许跨域的相关头部时

    简单请求:不管是否跨域,只要发出去了,一定会到达服务端并被执行,浏览器只会隐藏返回值(拦截响应)
    复杂请求:先发预检,预检不会真正执行业务逻辑,预检通过后才会发送真正请求并在服务端被执行


    展开全文
  • 主要介绍了html5通过postMessage进行跨域通信的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 经常会利用iframe在一个父页面中嵌入另外一个子页面,或者在一个父页面中弹出另一个页面,由于同源策略的限制,父子页面之间的脚本无法实现通信,而使用postMessage方法就实现了父子页面之间的跨域信息传递。...
  • 1.Ajax 1.1.Ajax简介  Ajax简介这一部分我们主要是谈一下ajax的起源,ajax是什么?因为这些是跟技术无关的。所以,大多细节都是一笔带过。  Ajax的起源?  Ajax一词源于2005年 Jesse James Garrett发表的一篇题...
  • 一般情况下都是用在同一域下的...但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,接下来介绍利用iframe实现ajax跨域通信感兴趣的朋友可以了解下,或许对你学习ajax跨域有所帮助
  • 该文档介绍了vue和普通web页面中iframe实现跨域的解决方案,解决了主页面中无法调用iframe方法的问题
  • SDN中ovs跨域通信

    2020-12-23 20:53:14
    控制器:ODL Boron 拓扑: 主机Ip: ...在主机中直接ping会出现...此时再ping,还是不通,通过s1交换机上wireshark抓包可以看到h1在不断发送arp报文,想找到h2的mac地址,但是arp不能跨域,所以需要在两台主机上.

    控制器:ODL Boron

    拓扑:

     

    主机Ip:

    步骤:

    在主机中直接ping会出现network is unreachable,原因是找不到路由,用route -n命令就可以看到主机中就1条路由,所以现在需要添加一条路由,可以是到对方网络的路由,也可以是到对方主机的路由,这里选择后者。两台主机都添加对方ip为主机路由。

    此时再ping,还是不通,通过s1交换机上wireshark抓包可以看到h1在不断发送arp报文,想找到h2的mac地址,但是arp不能跨域,所以需要在两台主机上手动添加arp缓存记录。注意绑定的是对方的IP和mac地址。

    此时双方可以通信:

     

    展开全文
  • 说起来挺简单的,可以直接去查询postMessage推送和window....实现跨域就需要有两个不同源的服务器咯 开始 iframe引入页面(我也是使用这样方式) 父页面(发送方) [removed] //这里是发送监听 functio
  • 主要介绍了SpringBoot实现jsonp跨域通信的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • ##跨域通信demos 图像ping JSONP Comet Http Streaming Long Polling Server-sent Events Websocket iframe document.domain URL.hash Cross-fragment Window.name postMessage ##注意: 1-5请求都是发送到localhost...
  • 总结一下:其实跨域并不会出现问题,跨域的出现只是浏览器为了阻止js读取不同域的响应内容以及限制cookies、LocalStoraged在不同域之间传递。 没有跨域 后端server只要在回应头部‘set-cookie’,那么就会有cookie...
  • javaScript跨域通信

    2014-05-15 15:13:44
    跨域的实现 并带有事例 更清楚实现方式 操作更方便
  • 跨域通信是前端开发中经常会遇到的情景,跨域通信有多种多样的方式,今天就详细说一下使用postMessage这样方式进行跨页面脚本的数据通信。 一、认识window.postMessage 根据MDN的官方文档解释:window.post...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 40,562
精华内容 16,224
关键字:

跨域通信

友情链接: wangxin_cmsV8.0.zip