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>

安全是一把雙刃劍，有些時候更安全了，就會變得麻煩。

例如跨域請求問題，幾乎曾讓每一個前端工程師都抓狂過，也許還會抱怨爲何還有跨域這種東西來影響咱們的開發的？

再好比，相似於如今的安全驗證，除了輸入密碼，還得設置各類密保，或者綁定郵箱啊手機啊相似的種種，都是屬於安全範疇，雖然對用戶來講產品的鏈路變得更加長了，可是它更安全了。

回看筆者往期高贊文章，也許能收穫更多喔！