首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么web推送不能在chrome的iframe中工作,两者都通过https加载?

Web推送(Web Push)是一种在Web浏览器中实现实时消息推送的技术。它允许网站向用户发送通知,即使用户没有打开网站也能收到消息。然而,在Chrome的iframe中使用Web推送可能会遇到问题,即使两者都通过HTTPS加载。

这是因为Chrome浏览器对于Web推送在iframe中的限制。Chrome要求Web推送的服务工作线程(Service Worker)必须在顶级浏览上下文中注册,而不是在iframe中注册。这是为了确保用户能够明确地知道哪个网站正在发送通知,以保护用户的隐私和安全。

由于这个限制,如果在Chrome的iframe中使用Web推送,推送服务将无法正常工作。用户将无法收到来自该网站的通知。

解决这个问题的方法是,将Web推送的服务工作线程注册在顶级浏览上下文中,而不是在iframe中。这样,即使在iframe中加载网页,用户仍然可以收到来自该网站的通知。

腾讯云提供了一系列与Web推送相关的产品和服务,例如腾讯移动推送(TPNS)。腾讯移动推送是一种高效、稳定的移动消息推送服务,可帮助开发者实现在移动设备上向用户发送通知。您可以通过以下链接了解更多关于腾讯移动推送的信息:腾讯移动推送

需要注意的是,以上答案仅针对Chrome浏览器中Web推送在iframe中的限制进行了解释,并提供了腾讯云的相关产品作为参考。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Web端即时通讯技术盘点:短轮询、Comet、Websocket、SSE

可以通过在返回数据中嵌入JS脚本的方式,如“”,服务器端将返回的数据作为回调函数的参数,浏览器在收到数据后就会执行这段JS脚本。 ?...Google 的天才们使用一个称为“htmlfile”的 ActiveX 解决了在 IE 中的加载显示问题,并将这种方法应用到了 gmail+gtalk 产品中。 6....在Android 4.3以及更早的版本中,系统默认浏览器两者都不支持,Firefox和Chrome则完全支持;Android 4.4中,系统默认浏览器两者都支持;Safari从5.0开始支持SSE(iOS...因为SSE能在现有的HTTP/HTTPS协议上运作,所以它能直接运行于现有的代理服务器和认证技术。...当然,我们可以通过SSE连接传输二进制数据:在SSE中,只有两个具有特殊意义的字符,它们是CR和LF,而对它们进行转码并不难。

2.7K50

打破 iframe 安全限制的 3 种方案

这是为什么呢? 二.点击劫持与安全策略 没错,禁止页面被放在iframe里加载主要是为了防止点击劫持(Clickjacking): ?...,但二者作用相反,后者用来限制当前页面中的iframe>与所能加载的内容来源 至于 framekiller,则是在客户端执行一段 JavaScript,从而反客为主: // 原版 <script...三.思路 既然主要限制来自 HTTP 响应头,那么至少有两种思路: 篡改响应头,使之满足iframe安全限制 不直接加载源内容,绕过iframe安全限制 在资源响应到达终点之前的任意环节,拦截下来并改掉...CSP 与X-Frame-Options,比如在客户端收到响应时拦截篡改,或由代理服务转发篡改 而另一种思路很有意思,借助Chrome Headless加载源内容,转换为截图展示到iframe中。...也就是说,通过 Chrome 正常加载页面,再将内容截图放到iframe里,因而不受上述(包括 framekiller 在内的)安全策略的限制。

29.9K63
  • 脚本化HTTP 取得响应 指定请求

    脚本化HTTP 下面将会用js代码操纵HTTP 下面将会说明在没有导致web浏览器重新加载任何窗口或者窗体的情况下,脚本实现web浏览器和服务器之间的通信。...,动态加载一个script标签,向https://hm.baidu.com/hm.js?...用户的页面停留,直接计算两次加载的时间差即可。数据库完成统计即可。一个最简单的页面统计完成。 iframe 一个淘汰的标签。...下面是旧的ajax方式 使用iframe完成一次ajax,脚本先把要发送给web服务器的信息编码到url中,服务器在动态的创建一个html文档,将其内容返回给web,在iframe中显示,这种方式受道同源的限制...解决方法,chrome的浏览器访问https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

    1.4K40

    2022 年前端大事记

    例如:在站点 A 中通过 iframe 嵌入了一个站点 C,正常情况下如果三方 Cookie 被禁用后,C 是无法在 A 站点访问到它的 Cookie 的。...它只会在站点 A 中通过 iframe 嵌入站点 C 时才会生效,浏览器会判定只会在顶级站点为 A 时才发送该 Cookie。...了解更多:如何控制Web资源加载的优先级?...openFile(fileHandle); } }); 在很多 Web 开发的场景下,我们需要在没有网页中的导航的情况下去更新页面的 URL,特别是在 SPA 应用里面,我们在切换了导航之后,不希望刷新网页...浏览器在收到推送的资源之后会缓存到本地。等解析 HTML 发现需要加载对应资源的时候会直接从本地读取,不必再等待网络传输了。

    1.3K50

    前端网络高级篇(六)网站性能优化

    所以,我们可以通过使用Keep-Alive和较少的域名来减少DNS查找。 Keep-Alive,HTTP1.1协议中推出的持久连接。...不利于SEO:搜索引擎的检索程序无法解读iframe中的src 阻塞onload事件:iframe不加载完毕,就不会触发父窗口的onload事件。...defer和async 两者都支持异步加载文件,不同之处是,defer会在全部资源下载完毕后才执行JS文件;async在脚本文件下载完就立刻执行,并且,async模式加载的JS文件无法依序执行,对于有顺序依赖的脚本来说...图片懒加载 通过图片懒加载可以让一些不可视的图片不去加载,避免一次性加载过多的图片导致请求阻塞(浏览器一般对同一域名下的并发请求的连接数有限制),这样就可以提高网站的加载速度,提高用户体验。...第一步: 懒加载的img标签的src设置缩略图或者不设置src,然后自定义一个属性,值为真正的图片或者原图的地址(比如data-src)。

    1.9K30

    web messaging与Woker分类:漫谈postMessage跨线程跨页面通信

    worker.postMessage Worker 接口是Web Workers API 的一部分,代表一个后台任务,创建一个专用Web worker,它只执行URL指定的脚本,并且在工作线程中执行。...相对于驱动应用的主JavaScript线程,它运行在其他线程中,所以不会造成阻塞。它设计为完全异步,同步API(如XHR和localStorage)不能在service worker中使用。...所以Chrome浏览器为SharedWorker单独创建一个进程来运行JavaScript程序,在浏览器中每个相同的JavaScript只存在一个SharedWorker进程,不管它被创建多少次。...可转移对象是如ArrayBuffer,MessagePort或ImageBitmap的实例对象。transferList数组中可默认不传,但不可传入null。...https://www.jianshu.com/p/4f07ef18b5d7 HTML5 postMessage iframe跨域web通信简介 https://www.zhangxinxu.com/wordpress

    2.2K30

    现代浏览器探秘(part 1):架构

    每天晚上18:00准时推送 原文:https://developers.google.com/web/updates/2018/09/inside-browser-part1 翻译:疯狂的技术宅 CPU...如果两个进程需要通信,他们可以通过使用进程间通信(IPC)来实现。 许多程序都是以这种方式工作的,因此如果一个工作进程失去响应,则可以重新启动它,而不会停止运行程序的其他进程。 ?...图6:通过IPC进行通信的独立进程示意图 浏览器架构 那么如何使用进程和线程构建Web浏览器? 好吧,它可能是一个具有许多不同线程的进程,或是许多具有少量线程的通过IPC进行通信的不同进程。 ?...图11:Chrome的服务化示意图,将不同的服务转移到多个进程或一个浏览器进程中 帧渲染器进程:站点隔离 网站隔离是Chrome中最近推出的一项功能,可为每个跨网站的iframe运行单独的渲染进程。...默认情况下,自从Chrome 67启用桌面隔离功能后,选项卡中的每个跨站点iframe都会得到单独的渲染进程。 ?

    1.1K20

    2020前端性能优化清单(五)

    使用 HTTP/2,可以将关键 CSS 存储在一个单独的 CSS 文件中,并通过服务器推送[33]传输,这样就不会使 HTML 变得膨胀。但问题是服务器推送很麻烦,浏览器之间有很多陷阱和竞争条件。...加载页面后插入到文档中的 HTML 块(常见的通过 JavaScript 填充内容的情况)不能利用这种优化。 浏览器支持吗?...Addy 关于“Chrome 中的加载优先级[77]”的文章展示了 Chrome 如何准确地解析 resource hint,一旦你决定了哪些资源对渲染是至关重要的,你就可以为它们分配高优先级。.../web/updates/2018/07/nostate-prefetch [75] 工作得很好: https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome...-776165961bbf [77] Chrome 中的加载优先级: https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome

    2K20

    简单方法检测远端用户的反病毒软件

    我常使用的操作系统是 Windows7,为了确保更安全,我安装了卡巴斯基互联网安全防病毒软件。一天我在一个 Web 页面上看到了一段非常有趣的代码,在我看来它不该出现在页面上。...为什么 Facebook 会使用卡巴斯基网站的 js 代码?我立刻意识到是我的反病毒软件做了 MITM,在网页上注入代码来跟踪页面的活动。...在客户端计算机上存在任何的反病毒软件的话,包括 KIS,为什么不创建一个特殊的页面来监视 Javascript 的代码呢? 创建服务器的第一个页面 iframe.html iframe.html 并注入 js 代码,在这个图片中我们可以看到更改的 iframe 页代码 KIS 反病毒软件需要从 iframe.html 中读取代码并分析字符串,如果页面有 kasperskylab_antibanner...Dr.Web DrWeb Security Space 11.0 Chrome 扩展的名字:Dr.Web Anti-Virus Link Checker Extension URL 在 index.html

    1.1K100

    浏览器与服务器的消息通信

    comet Comet是一种用于Web的推送技术,能使服务器实时地将更新的信息传送到客户端,而无须客户端发出请求,目前有两种实现方式: 长轮询(long polling) 长轮询 (long polling...iframe iframe 是很早就存在的一种 HTML 标记, 通过在 HTML 页面里嵌入一个隐蔵帧,然后将这个隐蔵帧的 SRC 属性设为对一个长连接的请求,服务器端就能源源不断地往客户端输入数据。...Google 的天才们使用一个称为“htmlfile”的 ActiveX 解决了在 IE 中的加载显示问题,并将这种方法用到了 gmail+gtalk 产品中。...我们常用的网页版的gtalk就是这种实现方式,Google的开发人员使使用一个称为“htmlfile”的 ActiveX 解决了在 IE 中的加载显示问题。...为什么可以实现持久连接 Ajax、Comet、HTML 5 Web Sockets技术比较分析 WebSocket wiki 使用 HTML5 WebSocket 构建实时 Web 应用 The WebSocket

    1.7K60

    浏览器与服务器的消息通信

    comet Comet是一种用于Web的推送技术,能使服务器实时地将更新的信息传送到客户端,而无须客户端发出请求,目前有两种实现方式: 长轮询(long polling) 长轮询 (long polling...iframe iframe 是很早就存在的一种 HTML 标记, 通过在 HTML 页面里嵌入一个隐蔵帧,然后将这个隐蔵帧的 SRC 属性设为对一个长连接的请求,服务器端就能源源不断地往客户端输入数据。...Google 的天才们使用一个称为“htmlfile”的 ActiveX 解决了在 IE 中的加载显示问题,并将这种方法用到了 gmail+gtalk 产品中。...我们常用的网页版的gtalk就是这种实现方式,Google的开发人员使使用一个称为“htmlfile”的 ActiveX 解决了在 IE 中的加载显示问题。...为什么可以实现持久连接 Ajax、Comet、HTML 5 Web Sockets技术比较分析 WebSocket wiki 使用 HTML5 WebSocket 构建实时 Web 应用 The WebSocket

    1.8K50

    0CTF h4x0rs.club12 复现

    '; 只允许加载带nonce属性的srcipt style-src 'self' 'unsafe-inline' fonts.googleapis.com; 允许加载本域css,允许加载内嵌于html中的...然后分析network,发现引入了一个外域的东东, ? 进一步发现主页是通过引入一个iframe来加载的这个页面。 ? 然后发现这个引入的页面里有一堆的js代码。...首先通过加载iframe,来获得一个通以及token,来供两个页面进行通信。 ?...既然没办法修改值,为什么不尝试伪造呢? 因为后端index不知道是谁给他通过postMessage发送的信息。但是,他却将所有信息都发送到了最顶级窗口。 后端主页js代码 ?...看似没用,但是看过大佬的思路后,顿时感觉汗颜,还是自己太年轻啊! Chrome拦截策略是,当你在url通过iframe引入其他域页面是,进行拦截,所以,我们完全可以引入一个本域的页面。

    1.6K70

    如何知道iframe文件下载download完成

    现有的iframe的onLoad方法具有兼容性问题,在chrome、IE下无法监听onLoad事件监听文件下载完毕,因为onLoad事件本身也是对iframe中的html结构的加载进度监听。......'); document.body.removeAttribute(iframe); } document.body.appendChild(iframe); 当chrome、IE下时,如果...opera和firefox里面好好的没问题,在IE下面就是不行 解决思路一:利用cookie 后端将文件下载进度放在cookie中,通过轮询cookie的方式,对文件下载进度进行获取,判断文件是否已经下载完毕...中加载资源的文件内容 // https://developer.mozilla.org/zh-CN/docs/Web/HTTP/X-Frame-Options response.addHeader('X-Frame-Options...并且下载的时候网络连接会出现失败。 解决思路三:轮询监听readyState 定时器轮询监听readyState的状态,如果是 complete 或者 interactive 说明文件加载完成。

    8.7K40

    知识整理之HTML篇

    标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 HTML5 为什么只需要写 Web 应用程序将通过频繁的异步JavaScript和XML(AJAX)请求实现长轮询。轮询的效率低,非常浪费资源(因为必须不停连接,或者 HTTP 连接始终打开)。...这也是为什么建议使用link方式来加载css,而不是使用@import方式。...link和@import的区别 两者都是外部引用CSS的方式,但是存在一定的区别: link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS...如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。 如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。

    1.3K41

    XSS平台模块拓展 | 内附42个js脚本源码

    13.基于XHR的portscanner 依靠XHR探测远程端口状态的端口扫描器。该技术比img.src更高效,但更有可能在浏览器级别得到缓解。通过图片源URL发送隐藏结果。...说明 https://github.com/diafygi/webrtc-ips 16.XHR DDoS 使用XHR以及Websockets(如果受害者不运行IE),只需使用稍微随机的参数来洪泛目标。...第一个iFrame获取CSRF保护的页面,在第一个表单的“token”参数中窃取标记值,并创建第二个iFrame,并与相应的标记进行连接。...shell 这种极其复杂的漏洞使攻击者能够劫持在注入浏览器中加载的Web会话,并从那里浏览任何可用的Web应用程序。...它有一些限制(只支持FF和Chrome,如果HTTPS在任何地方启用,将无法工作等),但它绝对是一个非常聪明的技术 说明 https://github.com/diracdeltas/sniffly 38

    12.5K80

    深入理解浏览器原理

    2.2.2  渲染进程中的线程 1个主线程:运行JavaScript、DOM、CSS、样式布局计算 N个工作线程:运行Web Worker,ServiceWorker,Worklet 内部线程:Blink...限制因设备的内存和CPU功率而异,但当Chrome达到限制时,它会在一个进程中开始从同一站点运行多个选项卡 图片引自Mariko Kosaka的《Inside look at modern web browser...当Chrome在强大的硬件上运行时,它可能会将每个服务拆分为不同的流程,从而提供更高的稳定性,但如果它位于资源约束设备上,Chrome会将服务整合到一个流程中,从而节省内存占用。...确定加载资源方式 在加async或defer属性,浏览器异步加载和运行JS,不阻止解析。      ...在视口内部使用栅格部件 - chrome首次发布时处理栅格化的方式 用户滚动页面,则移动光栅框架,并通过更多光栅填充缺失的部分 合成是一种将页面的各个部分分层,分别栅格化,并在合成器线程的单独线程中合成为页面的技术

    4.7K31

    阿里卖家 Flutter for Web 工程实践

    在 Debug 环境下在 IDE 中设置断点后,即可在 IDE 中调试断点,也可在 Chrome 中查看断点,Chrome 中甚至可看到 dart 代码。...Web 平台的 Native —— JS 调用 通过使用 pub.dev 等仓库,可以在 FFW 中轻松的使用各种能力。对于仓库中没有的能力就要考虑进行扩展了。...Mtop接口 鉴于 App 端现有 Mtop (阿里App使用的一种网关)的建设,如果能在 FFW 中调用现有的 Mtop 将可以减少很多的工作量。...为此需要为 FFW 添加 Mtop 调用的能力,要完成这个工作需要两部分的工作: FFW 端支持 Mtop 调用 服务端支持 H5 方式的 Mtop 调用 FFW 支持 Mtop 通过调用 mtop.js...参考App上管用的做法,可在数据加载出来之间插入骨骼屏,实现如下: iframe src="https://g.alicdn.com/algernon/alisupplier_content_web

    16310

    Puppeteer已经取代PhantomJs

    创建最新的自动化测试环境。使用最新的JavaScript和浏览器功能,直接在最新版本的Chrome中运行测试。 捕获时间线跟踪 您的网站以帮助诊断性能问题。 测试Chrome扩展程序。...,BrowserContext 具有独立的 Session(cookie 和 cache 独立不共享),一个 BrowserContext 可以包含多个 Page Page:表示一个 Tab 页面,通过...chrome 实例,偶尔会出现 Page Crash 现象,需要进行并发控制,并定时重启 Chrome 实例 如何等待加载?...Context),我们不能跨 Frame 执行函数,一个页面中可以有多个 Frame,主要是通过 iframe 标签嵌入的生成的。...的 Performance 可以上传对应的 json 文件并查看分析结果 – 我们可以写脚本来解析 trace.json 中的数据做自动化分析 – 通过 tracing 我们获取页面加载速度以及脚本的执行性能

    6.4K10

    腾讯前端团队是如何做web性能监控的?

    前言:为什么需要监控? web 的性能一定程度上影响了用户留存率,Google DoubleClick 研究表明:如果一个移动端页面加载时长超过 3 秒,用户就会放弃而离开。...BBC 发现网页加载时长每增加 1 秒,用户就会流失 10%。 我们希望通过监控来知道 web 应用性能的现状和趋势,找到 web 应用的瓶颈?某次发布后的性能情况怎么样?是否发布后对性能有影响?...这种监控方式的优缺点: 优点: 是真实用户访问情况。 可以观察历史性能趋势。 有一些额外的功能:报表推送、监控告警等等。缺点: 有侵入性,会一定程度上响应 web 性能。...chrome 渲染过程中记录的 trace event 3)可利用 Chrome DevTools Protocol 拿到页面布局节点数目。...这些一条条的数据都会被存储到数据库中,然后通过数据分析与聚合,提炼出有意义的数据。例如:某日所有用户的平均访问时长、pv 等。

    7.6K20
    领券