首页
学习
活动
专区
工具
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.5K50

打破 iframe 安全限制 3 种方案

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

25.2K63

脚本化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:搜索引擎检索程序无法解读iframesrc 阻塞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

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都会得到单独渲染进程。 ?

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

1.9K20

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

我常使用操作系统是 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

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.5K70

浏览器与服务器消息通信

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.6K60

浏览器与服务器消息通信

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

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

现有的iframeonLoad方法具有兼容性问题,在chrome、IE下无法监听onLoad事件监听文件下载完毕,因为onLoad事件本身也是对iframehtml结构加载进度监听。......'); 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.4K40

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

13.基于XHRportscanner 依靠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.3K80

深入理解浏览器原理

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.5K31

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.1K10

知识整理之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.2K41

每天都在用浏览器,你知道它是如何工作吗?

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

2.2K20

浏览器缓存策略变更:舍弃性能、确保安全

Chrome HTTP 缓存当前工作方式 从 85 版开始,Chrome 会使用它们各自资源URL作为缓存键来缓存从网络获取资源。 下面我们来看几个示例: ?...浏览器在其缓存找之前缓存资源,因此它使用了资源缓存版本。 ? Cache Key: { https://x.example/doge.png } 图像是否从 iframe加载都没有关系。...跨站点搜索攻击:攻击者可以通过检查特定网站使用“无搜索结果”图像是否在浏览器缓存来检测用户搜索结果是否包含任意字符串。...尽管在上一个示例中加载了相同图像,但是由于密钥匹配,因此不会被缓存命中。 ?... iframe加载,在这种情况下,图像是从网络上下载,因为缓存找不到相同密钥。

1K21
领券