专栏首页秋风的笔记Chrome 92 破坏性功能,我这弹窗有何用?

Chrome 92 破坏性功能,我这弹窗有何用?

近期,Chrome 92 进行了发布,我们来看看 Chrome 92 中提及的一个影响比较大的破坏性改动。

https://www.chromestatus.com/feature/5148698084376576

对于来自跨域的 iframes 将被禁止 alert、confirm 和 prompt 等功能。

首先我们先来看看 Chrome 对这个破坏性的动机的官方解释:

如果不明白跨域的可以看我这篇文章:10 种跨域解决方案(附终极方案)

"

现阶段来源于 iframe(不管是否跨域的) 的 JS 弹窗(alert/confirm/prompt)是令人困惑,因为它出现的时候看起来像浏览器自己的弹窗。这容易欺骗用户(尤其是 window.prompt),例如 iframe 站点假装特定消息来自 Chrome(例如 1,2,3)。通过在消息前加上 "say..." 来掩饰这些欺骗行为。然而,当这些 alerts 来自跨域 iframe 时,UI 会更加混乱,因为 Chrome 试图解释对话框不是来自浏览器本身或顶级页面。一方面由于跨域 iframe JS 对话框的使用率较低,从事实来看,站点的主要功能通常不需要使用 JS 对话框时,另一方面难以可靠地解释对话框的来源,因此我们建议删除跨域 iframe 中的 JS 对话框 。这也将避免我们将通过删除主机名提示,或者将对话框移动到内容区域的中心,来使对话框更明显地成为页面的一部分来明确对话框的含义(这个对话框不是由浏览器发出的)。因此当出现跨域iframe 弹窗(alert/confirm/prompt)将会被阻止,否则这些子 iframes 可能会假装父页面的对话框。

"

为了实际的演示,我们先来看看旧版浏览器的效果。

有些运营商或者插件劫持你的页面或者广告,会往你的页面插入一些 iframe 之类的元素。以 alert为例:

// localhost:5000

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<script>
    alert("百度提醒:恭喜中奖!")
</script>
</body>
</html>

我们来模拟一下这个过程:

这个影响可能没那么严重,但是会使用当我们使用window.confirm/window.prompt 来插入到页面的时候,可就麻烦大了,因为他们是可交换的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<script>
    const sign = prompt("百度提醒:用户信息即将过期请确认你的密码");
    console.log(sign);
</script>
</body>
</html>

也许以上两个例子比较简单,绝大多数人都不会上当,但是如果换成一个域名非常相似,手段更加高明的子网页,那么其中的安全隐患可想而知。

因为当我们升级了 Chrome 92 之后,这个问题便得以迎刃而解了。

可以看到,当往主站中插入一个 iframe ,里面是有弹窗的,但是主站根本不会理会这个弹窗。

因此当存在跨域的子 iframe ,它的 alert/confirm/prompt 将会失效。这个改动带来安全性的同时也带来了很多老系统的兼容性问题。

例如内部的 OA 系统,就是嵌套一些开放性的页面提供给第三方调用,页面交互就是以 prompt/confirm 进行确认的,那么工程师就要进行相应的改动了。

<form>
        <input type="text" name="name" placeholder="工单内容">
        <button id="btn">提交工单</button>
    </form>
<script>
        btn.onclick = () => {
            const msg = "您真的确定要提交吗?\n\n请确认!";
            if (confirm(msg) == true) {
                axios.post('xxxx')
                return true;
            } else {
                return false;
            }
        }
</script>

安全是一把双刃剑,有些时候更安全了,就会变得麻烦。

例如跨域请求问题,几乎曾让每个前端工程师都抓狂过,也许还会抱怨为什么还有跨域这种东西来影响我们的开发的?

再比如,类似于现在的安全验证,除了输入密码,还得设置各种密保,或者绑定邮箱啊手机啊类似的种种,都是属于安全范畴,虽然对用户来说产品的链路变得更加长了,但是它更安全了。

本文分享自微信公众号 - 秋风的笔记(qiufengnote),作者:蓝色的秋风

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-08-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • chrome小技巧两则

    有时候我们搜索文档的时候,可能会看到一些对我们有用的信息,想要复制保存的时候可能会弹出来必须要登陆的弹窗,如下所示

    追马
  • 2021年5种最安全的浏览器

    Web浏览器各种各样。每个人的创建方式都不一样,因为有些人比其他人安全得多。任何重视其在线隐私和安全性的人都应使用能够保护其安全,不会在其上充斥不必要的广告且浏...

    C4rpeDime
  • Chrome:垄断,真的可以为所欲为

    Chrome对此的解释是:网页内嵌的第三方页面弹窗可能让用户误以为这是当前页面弹出的弹窗,从而带来隐私风险。

    公众号@魔术师卡颂
  • Amazon后台登陆以及跟卖

    亚马逊模拟登陆,这里使用的是selenium来登陆,并判断是否登陆成功,以及是否有验证码,并破解验证码登陆。

    机器学习和大数据挖掘
  • 无线攻防:wifi攻防从破解到钓鱼

    无线安全是信息安全体系下一门很广泛的学科,包括但并不仅限于近场(NFC)、蓝牙(Bluetooth) 、射频(radio frequency,RF) 、无线局域...

    FB客服
  • 360与《每经》争端鸣响移动互联网时代安全警钟

    罗超为雷锋网、TECH2IPO撰稿。2013年7月8日发表。 日前 360 又被《每日经济新闻》的报道推到风口浪尖。自 2 月 26 日开始《每日经济新闻》连发...

    罗超频道
  • AdGuard Premium v7.1.2872 广告拦截器中文版

    AdGuard 是摆脱恼人广告,在线跟踪,保护您远离恶意软件的最佳方式。AdGuard 使您网络冲浪更快速,更安全,更安逸!AdGuard for Window...

    萌海无涯
  • 劫持Chrome浏览器的“新方法”

    通常情况下,网络犯罪分子在通过技术支持服务来进行诈骗活动时,需要使用到一些钓鱼网站,并在钓鱼页面中包含一些伪造的警告信息。 诈骗分子需要通过这些警告信息来欺骗用...

    FB客服
  • 请停用以开发者模式运行的扩展程序?搞定谷歌浏览器插件弹窗

    为什么我一直推荐使用谷歌浏览器呢,某些浏览器会自作主张封杀某些域名,还经常弹各种广告,当然更主要的是方便我使用谷歌搜索。

    苏生不惑
  • 2015年,网友眼中的流氓软件都有哪些?

    有一些软件总会被我们记住,而原因却是它们出身时所带的“邪恶属性”,它们被冠以“流氓”的恶名,是安全行业的有着巨大破坏性的搅局者,而在2015年,谁又会是它们之中...

    FB客服
  • 当代 Web 的 JSON 劫持技巧

    Benjamin Dumke-von der Ehe 发现了一种有趣的跨域窃取数据的方法。使用JS 代理,他能够创建一个 handler,可以窃取未定义的 Ja...

    Seebug漏洞平台
  • 如何把百度伪装成Google

    xindoo
  • 【前端工具】Chrome 扩展程序的开发与发布 -- 手把手教你开发扩展程序

    Sb_Coco
  • 【前端工具】Chrome 扩展程序的开发与发布 -- 手把手教你开发扩展程序

    Sb_Coco
  • chrome小众插件 一键查找姊妹网站 SimilarSites

    当你浏览一个很棒的站点的时候, 或许你会想到, 和它"差不多"的站点有哪些, 尤其是针对一些资源站点, 这个站点没有, 而它同类的站点"往往有"! 这里推荐一...

    zhaoolee
  • 美国财政部长称勒索软件对经济构成威胁、谷歌警示20亿Chrome用户|全球网络安全热点

    美国财政部长珍妮特·L·耶伦(JanetL. Yellen)表示,今年疑似勒索软件支付的金额可能会翻一番,对美国经济构成“直接威胁”。

    腾讯安全
  • 从零开始学web安全(3)

    上篇文章写到了一个亲自测试的demo,其中有一个地方讲到了“html字符实体”,这是上次xss成功需要知道的非常重要的一个小知识。不仅html字符实体,要继续学...

    IMWeb前端团队
  • 从零开始学web安全(3)

    上篇文章写到了一个亲自测试的demo,其中有一个地方讲到了“html字符实体”,这是上次xss成功需要知道的非常重要的一个小知识。不仅html字符实体,要继续学...

    IMWeb前端团队
  • Edge 浏览器新版来袭,Office 功能首次出现!

    为了让用户快速访问Office文件,微软已经为Edge和Chrome浏览器提供了一个浏览器扩展。除此之外,近日微软Edge 92版开始向开发频道的测试人员推出,...

    逆锋起笔

扫码关注云+社区

领取腾讯云代金券