让网站从原生应用中脱颖而出

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

早在1996年，TotalNews.com 网站就有一个非常邪恶的想法。为什么不做一个网站，它本身就包含所有顶级的美国新闻网站，直接嵌入其中？

毕竟，人们为什么要麻烦直接访问华盛顿邮报或纽约时报网站呢？TotalNews.com，网站将在一个地方提供，易于导航。

使用一种称为HTML <frame> 元素，TotalNews嵌入了美国顶级新闻网站 - 内容，设计和一切！——以这样一种方式，新闻总是新鲜的。（因为，嗯，它实际上是其他网站。

当然，TotalNews也围绕新闻增加了广告。他们因提供这种令人难以置信的便利而获得广告收入的补偿是公平的。

是的，那是网络早期，狂野的西部日子 - 但你必须钦佩他们的chutzpah。我当时自己的网页浏览花在了Pearl Jam粉丝网站上，所以我从未亲眼看到TotalNews，但是这张1996年12月 Archive.org 快照提供了一个模糊的图片。

不知何故，新闻网站不喜欢TotalNews盗用并从其内容中获利。因此，在1997年2月，他们中的一群人提起诉讼。

该案，华盛顿邮报等人诉TotalNews，Inc.等人，庭外和解和 TotalNews被禁止嵌入网站继续前进。这开创了一个先例，如果不是法律上的，那么至少在文化上：未经许可的框架是不行的。

但阴暗的做法仍在继续。事实上，如此之多，以至于“破坏框架”脚本变得流行起来。这是一种在您的网站中放置一些JavaScript以检查它当前是否正在构建中的技术 - 并根据需要“打破”框架。（请参见这篇优秀的2010年帧破坏技术回顾和随附的幻灯片以获取技术概述。这本质上是网站自卫。

随着时间的推移，Web开发人员和安全研究人员意识到，网站想要防止框架化的原因更严重：点击劫持.例如，当一个网站构建您的网站时，然后劫持用户输入，以便用户被愚弄，以为他们正在与您的网站进行交互，而他们实际上正在向（邪恶的）包含网站提供数据。想象一下，在银行网站上输入您的银行凭据（您认为是），而实际上它是一个邪恶的网站，记录了您输入的所有内容。

如今，不再需要帧破坏脚本，因为网站可以使用特殊的HTTP标头，X-Frame-Options，以优雅有效的方式阻止框架。和可爱的Web框架，如Django通过该标头提供开箱即用的保护。帧破坏或多或少是一个已解决的问题。

除了一个主要案例。

如果您在智能手机上的原生Facebook，Instagram，Reddit或Twitter应用程序中单击网络链接，则不会被带到手机的网络浏览器。相反，该应用程序直接嵌入网页，因此您不会离开其环境。

例如，以下是我在Twitter iOS应用程序中获得的内容，当我点击Simon Willison最近的一条推文中的链接时：

对于未经训练的眼睛来说，这似乎是我手机的网络浏览器。它在任何地方都不认为自己是Twitter，而且它看起来，嗯，非常平淡。

但事实上，这是完全不同的东西 - 一个更短暂的东西，称为“webview”或“应用内浏览器”。这是本机应用程序嵌入迷你Web浏览器的一种方式，同时主张对用户体验的控制并附加UI，功能和其他垃圾。它看起来像一个单独的浏览器，但实际上它仍然是伪装的Twitter应用程序。

看起来很熟悉？这是框架，只是以应用程序的形式。但这一次，框架网站没有办法框架化。

这是TotalNews——但对于2020年代来说，情况要糟糕得多。这些原生应用程序（在大多数情况下）并没有在网站周围投放广告 - 但它们保持对用户浏览体验的控制，有时监视用户，并为框架网站提供各种问题，用户或网站所有者没有任何追索权。

在此过程中的某个地方，尽管有相当强大的反框架文化，但框架从一个巨大的禁忌变成了一个巨大的耸耸肩。在网络环境中，它被诽谤;在本机应用程序上下文中，它完全被忽略。

确切地说，为什么这很糟糕？这里有四个原因。每个都有一个具体的例子，几乎在每种情况下，我都有直接的工作经验声音切片.

盗用

本机应用程序可能会对其框架中的网站做出误导性声明。由于Webview的无缝实现方式，非技术用户将无法知道他们实际上正在本机应用程序的上下文中查看完全无关的网站。

例如，几年前，我们得到消息说，一个Android应用程序正在嵌入Soundslice的免费音乐XML文件查看器.该应用程序将其作为“功能”提供给用户。

我们没有发现它，直到他们有勇气与我们联系，报告有关Webviews中文件上传的错误。

我们做对了一切 - 我们的网站已经发出了标题，这意味着我们不允许框架。然而，原生应用程序（及其移动操作系统）忽略了这个标题，这是一个巨大的漏洞。X-Frame-Options: Deny

用户体验差

如果本机应用在 Web 视图中打开第三方网站，则该第三方网站将开始新会话，而无需现有 Cookie。这实际上就像使用Web浏览器的私有（也称为“隐身”）模式一样。

这意味着：如果您在手机的浏览器中登录了某个网站，但从本机应用的 Web 视图单击指向该网站的链接，则您的登录状态将不受支持。您需要重新登录。

充其量，这是令人讨厌的。在最坏的情况下，它给人们一种错误的印象，即网站被破坏或注销。

一个具体的例子是Soundlice的Instagram 帐户，我们重点介绍人们在我们的平台上创建的内容。如果您在我们的Instagram上看到一些东西，并希望将其添加到练习列表中在您的Soundslice帐户中，您在Instagram应用程序中打开链接时很快就会遇到摩擦。即使您在手机浏览器中登录到Soundslice，Instagram应用程序也不会支持您的Soundslice登录。

[Instagram是一个特别令人发指的例子，因为它甚至不允许您添加帖子的链接。如果您在Instagram帖子中输入URL，它不会变成可点击的链接。只有一个链接，即您的频道简介中的链接，是可点击的。一整个家庭手工业已经形成了围绕这种“生物链接”的疯狂。

是的，您可以复制并粘贴 URL（如果 Web 视图显示它），也可以选择“在 Web 浏览器中打开”选项（如果 Web 视图提供）。但这两种情况都需要非平凡的技术复杂性。大多数用户只会说“哦，伙计，我以某种方式退出了Soundslice”，并将责任归咎于我们。

原生应用程序的支持者可能会争辩说：“但从原生应用程序的角度来看，这是一个更好的用户体验！因为用户不必将上下文切换到不同的环境，即Web浏览器。确实有一段时间，这个论点是有道理的：2015年之前的几年，也就是iOS 9的时候。引入了全局“后退”按钮方便地解决问题。当然，Android有其全局“后退”按钮。如今，这种说法毫无道理。

原生应用程序的支持者也可能会说：“如果你有自己的原生应用程序，这个问题就会得到解决，因为你可以注册一个链接处理程序，它会自动打开你的原生应用程序中的所有 soundslice.com URL。通用链接;安卓称之为应用链接.这是事实。这也是一种不合理的、不成比例的要求。我不应该仅仅为了控制如何处理我网站的链接而开发一个本机应用程序。

奇怪的非标准浏览器

Instagram和Facebook等流行的应用程序不仅使用香草网络视图。他们使用定制的，有自己的怪癖。

这意味着：如果您单击Facebook应用程序中的链接，并在Facebook的网络视图中打开，则该网站可能会稍微损坏。根据我的经验，页面尺寸/布局可能会受到影响，并且网站提供了有关其环境的错误信息。

我强烈推荐阅读亚历克斯·罗素的文章霍布森浏览器，详细介绍了应用内浏览器的缺陷。

一个具体的例子是Soundlice。我们的主要内容类型 - 我们通常链接到的东西 - 是一段交互式乐谱，它是动态调整屏幕大小.我们特别遇到了Instagram网络视图无法正确传达其屏幕尺寸的问题 - 导致我们的网站对乐谱应用了不正确的尺寸。同样，这是一种由于我们无法控制的晦涩技术细节而看起来很糟糕的情况。

滑稽的是，几年前一名脸书员工宣布他们添加了一种在Facebook应用内浏览器的上下文中查看网站时调试网站的方法。后我回答说，如果Facebook首先在默认浏览器中打开链接会更容易，员工通过说它来合理化网络视图帮助保护人们.这使我们：

安全

这是最重要的问题，尽管幸运的是，这是我在自己的工作中没有直接经历过的唯一一个问题。

当本机应用通过 Web 视图嵌入网站时，本机应用可以控制该页面。是的，即使它位于本机应用无法控制的域上（！这意味着原生应用程序可以将它喜欢的任何JavaScript注入到在web视图中查看的任何网站中。

今天我读了菲利克斯·克劳斯（Felix Krause）的惊人揭露，其中他发现Facebook和Instagram的iOS应用程序将JavaScript注入到在其Web视图中查看的所有网页中。您应该阅读并处理此内容。

Facebook有一个坚实的声誉，所以我相信他们不会在这里做任何可怕的事情。但更多邪恶的应用程序可能会窃取密码或执行其他类型的攻击.

我越想越不相信不受限制的JavaScript访问第三方网站的Webview会成为一种合法的，被接受的技术。这对用户不利，对网站也不有利。

但幸运的是，我认为可以对这一切做些什么。

建议的解决方案

从根本上说，这是关于权力的。这是四个参与者之间的斗争：

• 用户希望单击指向网站的链接，保留任何有用的状态，并能够在应用程序/网站之间自由跳转。
• 该网站希望用户拥有流畅的体验。
• 本机应用希望将用户保留在其应用内（也称为锁定）。在某些情况下，例如Facebook，该应用程序希望收集有关用户浏览行为的详细信息。
• 移动操作系统（iOS和Android）希望开发人员在其平台上构建本机应用程序。网络有点事后的想法，优先级较低。

目前，权力完全掌握在最后两个人手中。我认为它应该更加平衡，让网站所有者有一种选择退出这种行为的方法—— 用老派的话来说，就是一种框架破坏的方式。

所以我的建议是这样的：苹果和谷歌应该尊重网络视图中现有的HTTP标头。如果将网站加载到 Web 视图中，并且该网站包含相应的标头，则移动操作系统应立即停止加载 Web 视图，并在用户的首选 Web 浏览器中打开 URL。X-Frame-OptionsX-Frame-Options

这优雅地使用了现有技术，并为网站提供了急需的选择退出。

不幸的是，发生这种情况的唯一方法是说服苹果和谷歌这样做。我无法想象一个通用的选择退出解决方案不涉及iOS和Android在操作系统级别提供钩子。而且，作为原生手机应用程序世界的共同垄断者，苹果和谷歌没有动力做出这样的改变。

从理论上讲，它可以由单个应用程序实现，但由于利益冲突，我不相信Facebook会这样做。以及可悲的先例“不跟踪”页眉很有启发性。

我们最好的选择是监管干预，沿着开放网络宣传正在做。在这里收集我的想法时，我希望开始这次对话。TotalNews的现代版本必须受到控制。