学习
实践
活动
工具
TVP
写文章

深入剖析iframe问题

HTML5学堂:本文当中我们介绍了的基本知识,讲解到了的相关种类,并讲解了解决域中的一种方法——如何使用iframe。 讲解了iframe的基本原理与流程,并配以实战~ 利利的独白:,是我们的课程中必不可少的一部分,但是我们一直都是在讲解JSONP的方式,虽然也提到了iframe方式,但是由于时间因素, 本文仅仅讲明了iframe问题,想了解更多关于iframe标签的基本知识,直接发送 “iframe标签” 到 “HTML5学堂” 的微信。 问题是浏览器同源策略限制,当前域名的JavaScript只能读取同下的页面对象,这也是JavaScript出于安全方面的考虑 “话说,利利啊,能不能解释明白点? 如果还想了解AJAX的相关问题,直接发送 “AJAX” 到 “HTML5学堂” 的微信。 HTML5小编-利利&堡堡 耗时11.0h

7.8K40

【HTML】iframe访问问题

概述 本地同一浏览器访问本地HTML文件和访问服务器端HTML文件,本地Iframe没有自适应高度,而服务器端的Ifrane自适应了高度。 1.问题重现: Chrome 版本 41.0.2272.101 (64-bit) OS:Win8.1 Chrome访问服务器端HTML文件呈现的结果 ? 本地访问的HTML文件Iframe没有根据Iframe里面的页面类容自适应高度 2.Iframe自适应高度代码 在index.html文件中间中添加Iframe页面,页面加载时,加载src指定的文件路径 <iframe id="indexFrame" name="index" width="800" onload='iFrameHeight("indexFrame")' src="Web/Index/ 在这里,我猜测是访问本地文件是file协议(file:///),HTML代码和JS代码存在问题。小弟对file协议不熟悉,请大家不吝赐教。

2.4K80
  • 广告
    关闭

    热门业务场景教学

    个人网站、项目部署、开发环境、游戏服务器、图床、渲染训练等免费搭建教程,多款云服务器20元起。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    iframe安全

    1.响应头X-Frame-Options 响应头X-Frame-Options是用来给浏览器指示允许一个页面可否在<frame>,<iframe>,<object>中展现的标记。 这有助于防止站点脚本攻击(XSS)。 支持的指令 frame-ancestors uri1 uri2 允许一个页面可否在<frame>,<iframe>,<object>,<embed>,或<applet>中展现。 add_header Content-Security-Policy "frame-ancestors http://www.a.com http://www.b.com"; 兼容性 IE浏览器不支持 3.子域名 document.domain = "a.com"; site2.a.com document.domain = "a.com" 将不同子域名的站点document.domain设置为相同的基础域名,则可实现访问

    1.7K20

    详解使用postMessage解决iframe通信问题

    第一时间想到的就是用iframe了,但问题来了,我和第三方web项目是有交互的,这就违反同源策略了,处理问题是最让人头疼的事之一。 在window对象下有个postMessage方法,是专门用来解决通信问题的。 关于postMessage的详细介绍请戳这里,不过MDN的文档太详细了,导致有些同学看完还是一脸懵逼,下面我们就来看看怎么用postMessage实现iframe通信,当你会用了之后再回去看文档,感觉是完全不同的 是无法通信,因为它们是不同源的(假设存在问题),这时候就要用到postMessage了。 ','*'); } 我们知道postMessage是挂载在window对象上的,所以等iframe加载完毕后,用iFrame.contentWindow获取到iframe的window对象,然后调用

    41020

    学员投稿 | iframe 解决

    ,网上相关内容一抓一大把,但是突然学习到一个关于前端解决的方式 就是 利用 iframe  不管你有没有了解过,反正我没有 我觉得很有用并且容易忘,所以我记录下来哈哈哈 下面会分三块内容进行描述 1、基本原理 2、简单模拟 2、封装的函数 3、封装函数实战 解决场景 现在我们在 a.com 的域名下有一个页面 我们要请求 b.com 下的一个接口,很明显是会的,无法直接请求 今天我们使用 iframe  来解决这个问题 基本原理 1、需要三个页面 两个同(a.com)的页面,一个和接口同的页面(b.com) 其中一个页面是父页面,也就是真正的内容页,展示数据的 另外两个作为子页面,是辅助父页面请求数据用的  解决问题,但是实际上并不会这么做,肯定是封装得更加适用一些 详情就看下面吧 封装函数 经过上面的说明,我们首先要明确我们的目的 1、iframe 2、两个辅助页 3、数据回调 所以我们封装的函数必须要满足这几个东西 的确存在能耗高,安全问题...很多小伙伴嫌弃它,但是它毕竟是解决问题的一种思路,面试可能会问哦,多掌握点总是没错的。

    33530

    IE中iframe访问

    1      什么叫?        指在A系统(第一方)中通过URL直接调用B系统(第三方),并且两个系统分别部署在不同的内,简单的理解就是访问这两个系统需要不同的IP。 2      会引发什么问题?         在IE中,A系统中的iframe或者frame访问了B系统一个资源时,IE浏览器默认设置是禁用第三方Cookie的,这就导致向B系统发送请求时丢失了JSESSIONID,从而B系统服务器中就无法得到 session对象,就会引发一系列问题。 IE中如此处理可能也是出于安全考虑,经测试,在Chrome、FireFox中默认是允许第三方Cookie的,也就不会存在引发的问题。这种的情况通常出现在多个系统间互相嵌入某些功能。

    91100

    解决postMessageiframe消息传递

    页面中有子iframe页面 , 当子iframe接收到消息 , 比如websocket传递过来的消息时 希望能通知到父级页面 可以使用windows.postMessage传递消息 , 两个参数 ,第一个是数据 ,第二个是时指定的目的 向父级页面传递消息 , 部分是 * , 表示所有域名 window.parent.postMessage(redata,"*"); 父级页面监听消息 window.addEventListener

    50520

    iframe调用js_ajax访问

    在这里,我猜测是访问本地文件是file协议(file:///),HTML代码和JS代码存在问题。小弟对file协议不熟悉,请大家不吝赐教。 iframe访问 js是个讨论很多的话题.iframe访问也被研究的很透了. 一般分两种情况: 一. 用P3P header解决iframe访问cookie 1.IE浏览器iframe丢失Session问题 在开发中,我们经常会遇到使用Frame来工作,而且有时是为了跟其他网站集成,应用到多的情况下 JS访问问题描述:应用A访问应用B的资源,由于A,B应用分别部署在不同应用服务器(tomcat)上,属 … IFrame访问&;&;IFrame访问自定义高度 1.IFrame访问: http://blog.csdn.net/fdipzone/article/details/17619673 2.IFrame访问自定义高度: 由于JS禁止访问,如

    9020

    iframe应用 - 使用iframe提交表单数据

    之前我们提到了iframe,今天我们在原有的基础之上进行“实例”的讲解。通过iframe实现表单数据的提交。 如果想了解iframe,可以发送“iframe”到“HTML5学堂”公众号。 为何提交数据还要? 在使用iframe之前,可能你的脑海中就出现了这样一个问题:为何提交表单数据还需要呢? 但是作为用户的我们,也尽可能的避免掉一些问题吧~ iframe提交表单数据 说完了前面的需要了解的东西,我们进入iframe的实例操作吧~! 构建基本的结构样式 2 引入需要依赖的JS文件 3 定义动态创建iframe标签的功能函数 4 获取表单数据并序列化、加密处理 5 通过AJAX发送请求,完成 代码书写位置 我们依旧在A当中进行代码书写

    1.5K50

    【JS应用】Iframe 解决

    有些都是很普通很常见的知识,但是为了巩固自己的知识面,梳理自己的知识树,所以每个知识点都会写成文章,所有文章都会放在公众号右下角的前端进阶课程总结中~~~也希望能够帮助到需要的人~~ 的东西, 简直不要接触太多 ,网上相关内容一抓一大把,但是突然学习到一个关于前端解决的方式 就是 利用 iframe 不管你有没有了解过,反正我没有 我觉得很有用并且容易忘,所以我记录下来哈哈哈 下面会分三块内容进行描述 1、基本原理 2、简单模拟 2、封装的函数 3、封装函数实战 解决场景 现在我们在 a.com 的域名下有一个页面 我们要请求 b.com 下的一个接口,很明显是会的,无法直接请求 今天我们使用 iframe 来解决这个问题 基本原理 1、需要三个页面 两个同(a.com)的 页面,一个和接口同的 页面(b.com) 其中一个页面是父页面,也就是真正的内容页,展示数据的 另外两个作为子页面,是辅助父页面请求数据用的 解决问题,但是实际上并不会这么做,肯定是封装得更加适用一些 详情就看下面吧 封装函数 经过上面的说明,我们首先要明确我们的目的 1、iframe 2、两个辅助页 3、数据回调 所以我们封装的函数必须要满足这几个东西

    1.1K10

    iframe+postMessage实现通信

    需要在本页面跳转到一个图片管理系统上传图片,上传成功后返回图片链接,然后返回管理系统,显示图片 实现思路: 上传图片时,需要在本窗口跳转到图片管理系统,并且两个系统之间要通信 考虑到两个系统是不同的端口号,存在问题 ,结合window.postMessage()实现通信 项目背景 该管理系统基于React.js搭建,在此简称为A页面,地址为http://www.blogoog.com:8000 图片管理系统基于 在页面内嵌入iframe页面的情况下,需要等到页面内的iframe页面,也就是B页面加载完成之后,才能进行postMessage通信 event.origin中的origin不能保证是该窗口的当前origin 始终是你需要通信的目标窗口 A页面中:A页面向B页面发送信息,window就是在A页面中嵌入的iframe指向的B页面的window,即:iframe.contentWindow B页面中:B页面想 ,再进行postMessage通信 一定要对origin做判断,去掉不是来自我们目标窗口的origin,防止来自其他origin的攻击 着重注意window.postMessage()中window

    97240

    puppeteer 无法获取iframe内容解决

    puppeteer访问的页面存在iframe时,会存在无法获取iframe内容的问题

    1.4K21

    IFRAME 安全的数据交互方案

    场景概述:站点A页面通过IFRAME嵌套站点B页面,A页面需要从B页面获取数据 站点B页面推送数据: parent.window.postMessage(data, "http://sitea"); 站点

    29130

    mb增加关闭iframe检查功能

    document.getElementById("login_frame"); console.log('haha2:' + dom.contentWindow); 这种方式访问子frame,存在问题

    39920

    AngularJS问题 ajax

    headers: { 'Content-Type': 'application/x-www-form-urlencoded',//站必须 ,content-type") 注意:返回json的格式必须严谨,否则会ajax err 一:案例实现 从网上下载了一个AngularJS项目,配置启动后发现数据发送不到自己的后台中去,总是提示问题 ); return lists; } } 必须要加上@responseBody,否则无法返回数据给前端,稍后的博客会详细介绍@requestBody和@responseBody 二:问题详解 下面详细说一下AngularJS的$http请求,此部分为网上查询得到。 ,前端开发会经常遇见,AngularJS实现方式类似于Ajax,使用的是CORS机制。 1:CORS机制: 是一种允许当前的资源被其他的脚本请求访问的机制。

    86930

    问题

    二、是指浏览器允许向服务器发送请求,从而克服Ajax只能同源使用的限制。 ​ 常见的场景: 同一域名,不同文件或路径、不同端口、不同协议 域名和域名对应相同ip、主相同但子不同 不同域名 三、常见的解决的方案 1、JSONP 2、nodejs中间件代理 3、document.domain + iframe 4、location.hash + iframe 5、window.name + iframe 6、postMessage 7、WebSocket协议 8、资源共享 CORS请求分为简单请求和非简单请求。 ​ Nginx代理 ​ Nginx代理实质和CORS原理一样,通过配置文件设置请求响应头等字段。 ​

    28420

    问题

    1.简介 Ajax是后台交互,后台与前端交互都是使用ajax,在实际开发中,往往不是后台给php去连接,而是一个API, 但是直接访问API,会出错() eg: $(function(){ 2.怎么实现 浏览器中的<script>可以无限制的访问,这是一个漏洞。例如引用静态资源库里的jquery 所以,可以利用这个漏洞解决。 eg: <script> //利用script标签实现的数据访问,在接口后边加“&_jsonp=abc”,其中abc是一个回调函数的名字 var url = "http://cdn.weather.hao 3.$.ajax()解决问题 $("#btn").click(function(){ $.ajax({ type:请求方式 GET

    49030

    问题

    什么是问题 同源策略: 同源指的是域名(或IP),协议,端口都相同,不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况下,不能读写对方的资源。 同源策略限制以下几种行为: Cookie、LocalStorage 和 IndexDB 无法读取 DOM 和 Js对象无法获得 AJAX 请求不能发送 模拟问题 测试URL为 http://localhost 模拟请求 模拟请求 再澄清一下问题: 并非浏览器限制了发起站请求,而是站请求可以正常发起,但是返回结果被浏览器拦截了。 ##怎么解决问题 解决方案有很多 通过jsonp document.domain + iframe location.hash + iframe window.name + iframe postMessage 资源共享(CORS) 前端通过Nginx解决问题 nodejs中间件代理 WebSocket协议 这里主要介绍SpringMVC解决问题的方式

    76440

    问题及CORS解决问题方法

    1.问题 1.1什么是 是指域名的访问,以下情况都属于原因说明 示例 域名不同 www.jd.com 与 www.taobao.com 域名相同,端口不同 www.jd.com 1.2.为什么有问题不一定会有问题。因为问题是浏览器对于ajax请求的一种安全限制:一个页面发起的ajax请求,只能是于当前页同域名的路径,这能有效的阻止站攻击。 因此:问题 是针对ajax的一种限制。 但是这却给我们的开发带来了不变,而且在实际生成环境中,肯定会有很多台服务器之间交互,地址和端口都可能不同,怎么办? 1.3.解决问题的方案 目前比较常用的解决方案有3种: Jsonp 最早的解决方案,利用script标签可以的原理实现。 优势: 在服务端进行控制是否允许,可自定义规则 支持各种请求方式 缺点: 会产生额外的请求 2.cors解决 2.1.什么是cors CORS是一个W3C标准,全称是"资源共享"(

    6.1K42

    springboot 解决问题_java解决问题

    CrossOrigin(originPatterns = "*", allowCredentials = "true", maxAge = 3600) 方法二 如果以上方法还是不生效,最后的终极方法可以进行硬编码进行设置 : 对需要的接口,进行Response对象设置可URL设置(*代表所有URL可访问) public ServiceResult<?

    8010

    扫码关注腾讯云开发者

    领取腾讯云代金券