近期，Chrome 92 进行了公布，咱们来看看 Chrome 92 中提及的一个影响比拟大的破坏性改变。

https://www.chromestatus.com/...

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

首先咱们先来看看 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 可能会伪装父页面的对话框。

"

为了理论的演示，咱们先来看看旧版浏览器的成果。

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

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

例如跨域申请问题，简直曾让每个前端工程师都抓狂过，兴许还会埋怨为什么还有跨域这种货色来影响咱们的开发的？

再比方，相似于当初的平安验证，除了输出明码，还得设置各种密保，或者绑定邮箱啊手机啊相似的种种，都是属于平安领域，尽管对用户来说产品的链路变得更加长了，然而它更平安了。

回看笔者往期高赞文章，兴许能播种更多喔！

  • 2021前端学习门路书单—自我成长之路
  • 从破解某设计网站谈前端水印(具体教程)
  • 一文带你层层解锁「文件下载」的神秘
  • 10种跨域解决方案（附终极大招）

结语

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

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