Chrome 禁止從頁面打開 Data URI 網址了

現現在，網民的網絡帳戶被盜，頗有多是被「釣魚」了。去年的一份安全報告中指出：「近85%的資金損失是經過釣魚網址泄露支付信息形成的」。

傳統的釣魚網站一般是申請一個和被冒充網站類似的域名，好比 taobao000.com ，或者直接利用三四級域名來冒充，好比 taobao.com.evil.com。

釣魚網址通常是經過郵件、短信、聊天工具等傳輸系統發送給目標羣體的，因而這些傳輸系統的運營商會義不容辭的採起措施，來儘量的檢測並屏蔽那些釣魚網址，並且即使它們不作，現代的瀏覽器也都會作這件事。最多見的釣魚網址檢測技術就是維護一個釣魚網站域名的黑名單，或者使用別的組織共享出來的黑名單（好比谷歌的 Safe Browsing）。一旦某個釣魚網站被添加進了這個黑名單，那麼它的主人釣魚成功的機率就會大幅下降。

如何跳過這些檢測？如何不使用常規的網址來存放網頁？因而有人想到了利用 Data URI。僅僅在 2017 年，我就看到已經有兩家網絡安全公司發文，分別講了兩個利用 Data URI 來釣魚的真實案例，一個是針對 Gmail，一個是針對 Yahoo Mail。我這裏作了一個仿冒淘寶登陸頁的釣魚頁面 的demo，你能夠體驗一下。

利用 Data URI，能夠把整個網頁的內容都放到這個 URL 裏。因爲 Data URI 徹底沒有域名的概念，因此黑名單屏蔽技術對他無效。並且除此以外，還有一個 bonus，那就是你能夠在一個 Data URI 的頭部放置任意你想冒充的網站的網址，像這樣：

在這個真實的 Gmail 登陸網址的後面是一連串的、比被釣魚者的屏幕還要寬的空格，隱藏在這些空格後面的，纔是真正的網頁源碼：

普通網民很容易忽略 「data:text/html,」 這幾個多出來的字符。有了這個 bonus，釣魚者的釣魚成功率更高了，並且不用總花錢去換域名了。

爲此，Chrome 從 56 開始，在地址欄左側把 Data URI 標記成了「不安全」網址：

這可能會減小一些釣魚事件的發生，但考慮到一些網民徹底沒有看地址欄的習慣（尤爲是如今有一些瀏覽器故意弱化地址欄）、以及在移動端 WebView 打開網頁徹底沒有地址欄，因而 Chrome 從 60 開始，採起了一種更完全的方式：屏蔽從頁面打開的 Data URI 網址（相對應的行爲是在地址欄回車打開 Data URI 網址）。

好比下面這個 <a> 連接：

<a href="data:text/html,foo">

若是你單擊這個連接的話，會直接報錯，Not allowed to navigate top frame to data URL：

但在右鍵菜單中點擊 「在新標籤中打開連接」、「在新窗口中打開連接」 不受影響。此外，此次還會屏蔽下面這些跳轉方式（30x 跳轉若干年前就已經屏蔽了）：

1. html 裏添加 <meta http-equiv="refresh" content="0;url=data:text/html,foo" />

2. 響應頭裏添加 refresh: 0;url=data:text/html,foo

3. JS 裏執行 window.open("data:text/html,foo")

4. JS 裏執行 location.href = "data:text/html,foo"

等一切能讓頁面跳轉到 Data URI 的方式都會被屏蔽，其中 open() 方法打開的新標籤頁面會被強制替換成 about:blank。其實 Chrome 的這些屏蔽措施以前就已經應用到了 file: 和 chrome: 等協議上了。

例外狀況除了上面說的右鍵菜單中的各類操做，還有：

1. <a download>

2. 當指定的 MIME 觸發了瀏覽器下載邏輯的狀況，好比 open("data:application/zip,foo")

3. 直接在地址欄上輸入 Data URI 並回車

固然還有咱們經常使用的，Data URI 沒有用在頂層頁面網址的狀況，好比做爲 <img> 的 src 屬性，<iframe> 的 src 屬性，CSS 裏的 url() 的參數等，都不受影響。

在 Chrome 60 以前的三個版本 Chrome 5七、5八、59 中，當你打開一個 Data URI 頁面，會有一句警告信息，提醒開發者提早作遷移：

Chrome 的人作了統計，說從非 Data URI 頁面跳到 Data URI 頁面的狀況只有不到萬分之五的機率，若是你的網站恰巧用到了這種在前端生成頁面的方式，能夠嘗試遷移到後端來生成。