作者阿德里安·霍洛瓦蒂 on 八月 10， 2022

早在1996年，TotalNews.com 網(wǎng)站就有一個(gè)非常邪惡的想法。為什么不做一個(gè)網(wǎng)站，它本身就包含所有頂級的美國新聞網(wǎng)站，直接嵌入其中？

畢竟，人們?yōu)槭裁匆闊┲苯釉L問華盛頓郵報(bào)或紐約時(shí)報(bào)網(wǎng)站呢？TotalNews.com，網(wǎng)站將在一個(gè)地方提供，易于導(dǎo)航。

使用一種稱為HTML <frame> 元素，TotalNews嵌入了美國頂級新聞網(wǎng)站 - 內(nèi)容，設(shè)計(jì)和一切！——以這樣一種方式，新聞總是新鮮的。（因?yàn)?，嗯，它?shí)際上是其他網(wǎng)站。

當(dāng)然，TotalNews也圍繞新聞增加了廣告。他們因提供這種令人難以置信的便利而獲得廣告收入的補(bǔ)償是公平的。

是的，那是網(wǎng)絡(luò)早期，狂野的西部日子 - 但你必須欽佩他們的chutzpah。我當(dāng)時(shí)自己的網(wǎng)頁瀏覽花在了Pearl Jam粉絲網(wǎng)站上，所以我從未親眼看到TotalNews，但是這張1996年12月 Archive.org 快照提供了一個(gè)模糊的圖片。

不知何故，新聞網(wǎng)站不喜歡TotalNews盜用并從其內(nèi)容中獲利。因此，在1997年2月，他們中的一群人提起訴訟。

該案，華盛頓郵報(bào)等人訴TotalNews，Inc.等人，庭外和解和 TotalNews被禁止嵌入網(wǎng)站繼續(xù)前進(jìn)。這開創(chuàng)了一個(gè)先例，如果不是法律上的，那么至少在文化上：未經(jīng)許可的框架是不行的。

但陰暗的做法仍在繼續(xù)。事實(shí)上，如此之多，以至于“破壞框架”腳本變得流行起來。這是一種在您的網(wǎng)站中放置一些JavaScript以檢查它當(dāng)前是否正在構(gòu)建中的技術(shù) - 并根據(jù)需要“打破”框架。（請參見這篇優(yōu)秀的2010年幀破壞技術(shù)回顧和隨附的幻燈片以獲取技術(shù)概述。這本質(zhì)上是網(wǎng)站自衛(wèi)。

隨著時(shí)間的推移，Web開發(fā)人員和安全研究人員意識(shí)到，網(wǎng)站想要防止框架化的原因更嚴(yán)重：點(diǎn)擊劫持.例如，當(dāng)一個(gè)網(wǎng)站構(gòu)建您的網(wǎng)站時(shí)，然后劫持用戶輸入，以便用戶被愚弄，以為他們正在與您的網(wǎng)站進(jìn)行交互，而他們實(shí)際上正在向（邪惡的）包含網(wǎng)站提供數(shù)據(jù)。想象一下，在銀行網(wǎng)站上輸入您的銀行憑據(jù)（您認(rèn)為是），而實(shí)際上它是一個(gè)邪惡的網(wǎng)站，記錄了您輸入的所有內(nèi)容。

如今，不再需要幀破壞腳本，因?yàn)榫W(wǎng)站可以使用特殊的HTTP標(biāo)頭，X-Frame-Options，以優(yōu)雅有效的方式阻止框架。和可愛的Web框架，如Django通過該標(biāo)頭提供開箱即用的保護(hù)。幀破壞或多或少是一個(gè)已解決的問題。

除了一個(gè)主要案例。

如果您在智能手機(jī)上的原生Facebook，Instagram，Reddit或Twitter應(yīng)用程序中單擊網(wǎng)絡(luò)鏈接，則不會(huì)被帶到手機(jī)的網(wǎng)絡(luò)瀏覽器。相反，該應(yīng)用程序直接嵌入網(wǎng)頁，因此您不會(huì)離開其環(huán)境。

例如，以下是我在Twitter iOS應(yīng)用程序中獲得的內(nèi)容，當(dāng)我點(diǎn)擊Simon Willison最近的一條推文中的鏈接時(shí)：

對于未經(jīng)訓(xùn)練的眼睛來說，這似乎是我手機(jī)的網(wǎng)絡(luò)瀏覽器。它在任何地方都不認(rèn)為自己是Twitter，而且它看起來，嗯，非常平淡。

但事實(shí)上，這是完全不同的東西 - 一個(gè)更短暫的東西，稱為“webview”或“應(yīng)用內(nèi)瀏覽器”。這是本機(jī)應(yīng)用程序嵌入迷你Web瀏覽器的一種方式，同時(shí)主張對用戶體驗(yàn)的控制并附加UI，功能和其他垃圾。它看起來像一個(gè)單獨(dú)的瀏覽器，但實(shí)際上它仍然是偽裝的Twitter應(yīng)用程序。

看起來很熟悉？這是框架，只是以應(yīng)用程序的形式。但這一次，框架網(wǎng)站沒有辦法框架化。

這是TotalNews——但對于2020年代來說，情況要糟糕得多。這些原生應(yīng)用程序（在大多數(shù)情況下）并沒有在網(wǎng)站周圍投放廣告 - 但它們保持對用戶瀏覽體驗(yàn)的控制，有時(shí)監(jiān)視用戶，并為框架網(wǎng)站提供各種問題，用戶或網(wǎng)站所有者沒有任何追索權(quán)。

在此過程中的某個(gè)地方，盡管有相當(dāng)強(qiáng)大的反框架文化，但框架從一個(gè)巨大的禁忌變成了一個(gè)巨大的聳聳肩。在網(wǎng)絡(luò)環(huán)境中，它被誹謗;在本機(jī)應(yīng)用程序上下文中，它完全被忽略。

確切地說，為什么這很糟糕？這里有四個(gè)原因。每個(gè)都有一個(gè)具體的例子，幾乎在每種情況下，我都有直接的工作經(jīng)驗(yàn)聲音切片.

盜用

本機(jī)應(yīng)用程序可能會(huì)對其框架中的網(wǎng)站做出誤導(dǎo)性聲明。由于Webview的無縫實(shí)現(xiàn)方式，非技術(shù)用戶將無法知道他們實(shí)際上正在本機(jī)應(yīng)用程序的上下文中查看完全無關(guān)的網(wǎng)站。

例如，幾年前，我們得到消息說，一個(gè)Android應(yīng)用程序正在嵌入Soundslice的免費(fèi)音樂XML文件查看器.該應(yīng)用程序?qū)⑵渥鳛椤肮δ堋碧峁┙o用戶。

我們沒有發(fā)現(xiàn)它，直到他們有勇氣與我們聯(lián)系，報(bào)告有關(guān)Webviews中文件上傳的錯(cuò)誤。

我們做對了一切 - 我們的網(wǎng)站已經(jīng)發(fā)出了標(biāo)題，這意味著我們不允許框架。然而，原生應(yīng)用程序（及其移動(dòng)操作系統(tǒng)）忽略了這個(gè)標(biāo)題，這是一個(gè)巨大的漏洞。X-Frame-Options: Deny

用戶體驗(yàn)差

如果本機(jī)應(yīng)用在 Web 視圖中打開第三方網(wǎng)站，則該第三方網(wǎng)站將開始新會(huì)話，而無需現(xiàn)有 Cookie。這實(shí)際上就像使用Web瀏覽器的私有（也稱為“隱身”）模式一樣。

這意味著：如果您在手機(jī)的瀏覽器中登錄了某個(gè)網(wǎng)站，但從本機(jī)應(yīng)用的 Web 視圖單擊指向該網(wǎng)站的鏈接，則您的登錄狀態(tài)將不受支持。您需要重新登錄。

充其量，這是令人討厭的。在最壞的情況下，它給人們一種錯(cuò)誤的印象，即網(wǎng)站被破壞或注銷。

一個(gè)具體的例子是Soundlice的Instagram 帳戶，我們重點(diǎn)介紹人們在我們的平臺(tái)上創(chuàng)建的內(nèi)容。如果您在我們的Instagram上看到一些東西，并希望將其添加到練習(xí)列表中在您的Soundslice帳戶中，您在Instagram應(yīng)用程序中打開鏈接時(shí)很快就會(huì)遇到摩擦。即使您在手機(jī)瀏覽器中登錄到Soundslice，Instagram應(yīng)用程序也不會(huì)支持您的Soundslice登錄。

[Instagram是一個(gè)特別令人發(fā)指的例子，因?yàn)樗踔敛辉试S您添加帖子的鏈接。如果您在Instagram帖子中輸入U(xiǎn)RL，它不會(huì)變成可點(diǎn)擊的鏈接。只有一個(gè)鏈接，即您的頻道簡介中的鏈接，是可點(diǎn)擊的。一整個(gè)家庭手工業(yè)已經(jīng)形成了圍繞這種“生物鏈接”的瘋狂。

是的，您可以復(fù)制并粘貼 URL（如果 Web 視圖顯示它），也可以選擇“在 Web 瀏覽器中打開”選項(xiàng)（如果 Web 視圖提供）。但這兩種情況都需要非平凡的技術(shù)復(fù)雜性。大多數(shù)用戶只會(huì)說“哦，伙計(jì)，我以某種方式退出了Soundslice”，并將責(zé)任歸咎于我們。

原生應(yīng)用程序的支持者可能會(huì)爭辯說：“但從原生應(yīng)用程序的角度來看，這是一個(gè)更好的用戶體驗(yàn)！因?yàn)橛脩舨槐貙⑸舷挛那袚Q到不同的環(huán)境，即Web瀏覽器。確實(shí)有一段時(shí)間，這個(gè)論點(diǎn)是有道理的：2015年之前的幾年，也就是iOS 9的時(shí)候。引入了全局“后退”按鈕方便地解決問題。當(dāng)然，Android有其全局“后退”按鈕。如今，這種說法毫無道理。

原生應(yīng)用程序的支持者也可能會(huì)說：“如果你有自己的原生應(yīng)用程序，這個(gè)問題就會(huì)得到解決，因?yàn)槟憧梢宰砸粋€(gè)鏈接處理程序，它會(huì)自動(dòng)打開你的原生應(yīng)用程序中的所有 soundslice.com URL。通用鏈接;安卓稱之為應(yīng)用鏈接.這是事實(shí)。這也是一種不合理的、不成比例的要求。我不應(yīng)該僅僅為了控制如何處理我網(wǎng)站的鏈接而開發(fā)一個(gè)本機(jī)應(yīng)用程序。

奇怪的非標(biāo)準(zhǔn)瀏覽器

Instagram和Facebook等流行的應(yīng)用程序不僅使用香草網(wǎng)絡(luò)視圖。他們使用定制的，有自己的怪癖。

這意味著：如果您單擊Facebook應(yīng)用程序中的鏈接，并在Facebook的網(wǎng)絡(luò)視圖中打開，則該網(wǎng)站可能會(huì)稍微損壞。根據(jù)我的經(jīng)驗(yàn)，頁面尺寸/布局可能會(huì)受到影響，并且網(wǎng)站提供了有關(guān)其環(huán)境的錯(cuò)誤信息。

我強(qiáng)烈推薦閱讀亞歷克斯·羅素的文章霍布森瀏覽器，詳細(xì)介紹了應(yīng)用內(nèi)瀏覽器的缺陷。

一個(gè)具體的例子是Soundlice。我們的主要內(nèi)容類型 - 我們通常鏈接到的東西 - 是一段交互式樂譜，它是動(dòng)態(tài)調(diào)整屏幕大小.我們特別遇到了Instagram網(wǎng)絡(luò)視圖無法正確傳達(dá)其屏幕尺寸的問題 - 導(dǎo)致我們的網(wǎng)站對樂譜應(yīng)用了不正確的尺寸。同樣，這是一種由于我們無法控制的晦澀技術(shù)細(xì)節(jié)而看起來很糟糕的情況。

滑稽的是，幾年前一名臉書員工宣布他們添加了一種在Facebook應(yīng)用內(nèi)瀏覽器的上下文中查看網(wǎng)站時(shí)調(diào)試網(wǎng)站的方法。后我回答說，如果Facebook首先在默認(rèn)瀏覽器中打開鏈接會(huì)更容易，員工通過說它來合理化網(wǎng)絡(luò)視圖幫助保護(hù)人們.這使我們：

安全

這是最重要的問題，盡管幸運(yùn)的是，這是我在自己的工作中沒有直接經(jīng)歷過的唯一一個(gè)問題。

當(dāng)本機(jī)應(yīng)用通過 Web 視圖嵌入網(wǎng)站時(shí)，本機(jī)應(yīng)用可以控制該頁面。是的，即使它位于本機(jī)應(yīng)用無法控制的域上（！這意味著原生應(yīng)用程序可以將它喜歡的任何JavaScript注入到在web視圖中查看的任何網(wǎng)站中。

今天我讀了菲利克斯·克勞斯（Felix Krause）的驚人揭露，其中他發(fā)現(xiàn)Facebook和Instagram的iOS應(yīng)用程序?qū)avaScript注入到在其Web視圖中查看的所有網(wǎng)頁中。您應(yīng)該閱讀并處理此內(nèi)容。

Facebook有一個(gè)堅(jiān)實(shí)的聲譽(yù)，所以我相信他們不會(huì)在這里做任何可怕的事情。但更多邪惡的應(yīng)用程序可能會(huì)竊取密碼或執(zhí)行其他類型的攻擊.

我越想越不相信不受限制的JavaScript訪問第三方網(wǎng)站的Webview會(huì)成為一種合法的，被接受的技術(shù)。這對用戶不利，對網(wǎng)站也不有利。

但幸運(yùn)的是，我認(rèn)為可以對這一切做些什么。

建議的解決方案

從根本上說，這是關(guān)于權(quán)力的。這是四個(gè)參與者之間的斗爭：

• 用戶希望單擊指向網(wǎng)站的鏈接，保留任何有用的狀態(tài)，并能夠在應(yīng)用程序/網(wǎng)站之間自由跳轉(zhuǎn)。
• 該網(wǎng)站希望用戶擁有流暢的體驗(yàn)。
• 本機(jī)應(yīng)用希望將用戶保留在其應(yīng)用內(nèi)（也稱為鎖定）。在某些情況下，例如Facebook，該應(yīng)用程序希望收集有關(guān)用戶瀏覽行為的詳細(xì)信息。
• 移動(dòng)操作系統(tǒng)（iOS和Android）希望開發(fā)人員在其平臺(tái)上構(gòu)建本機(jī)應(yīng)用程序。網(wǎng)絡(luò)有點(diǎn)事后的想法，優(yōu)先級較低。

目前，權(quán)力完全掌握在最后兩個(gè)人手中。我認(rèn)為它應(yīng)該更加平衡，讓網(wǎng)站所有者有一種選擇退出這種行為的方法—— 用老派的話來說，就是一種框架破壞的方式。

所以我的建議是這樣的：蘋果和谷歌應(yīng)該尊重網(wǎng)絡(luò)視圖中現(xiàn)有的HTTP標(biāo)頭。如果將網(wǎng)站加載到 Web 視圖中，并且該網(wǎng)站包含相應(yīng)的標(biāo)頭，則移動(dòng)操作系統(tǒng)應(yīng)立即停止加載 Web 視圖，并在用戶的首選 Web 瀏覽器中打開 URL。X-Frame-OptionsX-Frame-Options

這優(yōu)雅地使用了現(xiàn)有技術(shù)，并為網(wǎng)站提供了急需的選擇退出。

不幸的是，發(fā)生這種情況的唯一方法是說服蘋果和谷歌這樣做。我無法想象一個(gè)通用的選擇退出解決方案不涉及iOS和Android在操作系統(tǒng)級別提供鉤子。而且，作為原生手機(jī)應(yīng)用程序世界的共同壟斷者，蘋果和谷歌沒有動(dòng)力做出這樣的改變。

從理論上講，它可以由單個(gè)應(yīng)用程序?qū)崿F(xiàn)，但由于利益沖突，我不相信Facebook會(huì)這樣做。以及可悲的先例“不跟蹤”頁眉很有啟發(fā)性。

我們最好的選擇是監(jiān)管干預(yù)，沿著開放網(wǎng)絡(luò)宣傳正在做。在這里收集我的想法時(shí)，我希望開始這次對話。TotalNews的現(xiàn)代版本必須受到控制。