Chrome 92 破坏性功能，我这弹窗有何用？

时间 2021-08-12

标签 html 前端 ios 面试 chrome axios segmentfault 跨域浏览器安全栏目 Chrome 繁體版

原文原文链接

近期，Chrome 92 进行了发布，咱们来看看 Chrome 92 中说起的一个影响比较大的破坏性改动。html

https://www.chromestatus.com/...前端

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

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

若是不明白跨域的能够看我这篇文章：面试

"chrome

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

"segmentfault

为了实际的演示，咱们先来看看旧版浏览器的效果。跨域

有些运营商或者插件劫持你的页面或者广告，会往你的页面插入一些 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>

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

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

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

回看笔者往期高赞文章，也许能收获更多喔！

结语

❤️关注+点赞+收藏+评论+转发❤️ ，原创不易，鼓励笔者创做更好的文章

关注公众号秋风的笔记，一个专一于前端面试、工程化、开源的前端公众号