从前端工程角度聊付费墙 (paywall) 的技术实现

最近科技媒体界的一个大新闻，是 TechCrunch 收掉了订阅服务。早在这之前，Business Insider 等媒体也关闭付费墙 (paywall)。 身为一个聊技术的电子报，这边不从商业面讨论这个网路时代许多媒体常用的商业模式，而是从技术面来看看相关的实作。

所谓的付费墙，是指你需要付费订阅该媒体，才可以阅读完整的内容；如果没有订阅，只能看到少部分的内容，然后会有一个墙挡着，要你订阅(如下图所示)。今天聊聊从前端的角度破解付费墙。

特别注意，这篇文章仅是从前端工程的角度讨论，是技术分享，借由了解如何实现，来更清楚不同的技术概念。大家理解完虽然会获得能破解付费墙的技术能力，但去破解就算不违法也不道德。

好的内容需要大家付费支持，好媒体才能永续经营。所以假如真的喜欢某个内容，就付费支持吧 (或可以付费订阅 E+ 来支持 ExplainThis)～

从浏览器存储角度看付费墙

首先来聊一种常见的付费墙，是一开始会给你免费的额度，例如可以免费看三篇，然后当超过额度后，就要订阅后才能继续阅读。这种机制第一个要问的是，该网站要怎么知道你看了多少篇?

这个关键问题背后意味着，有一个存储机制，在记录你读了多少篇文。而在浏览器中，有几种不同的存储机制。我们先前分别在 《请描述 cookie, sessionStorage 和 localStorage 的差异》以及 《你知道 localStorage 但你知道 IndexedDB 吗？》 等文章介绍过。一般来说，这种记下你已经读过几篇的，因为量比较小，且是每次发送请求时会确认，所以会选择存在 cookie。

以 Harvard Business Review 哈佛商业评论来说，只要在浏览器，开启开发者工具，然后在 Application 分页当中找到 Cookie，然后把 https://hbr.org 相关的 Cookie 清除掉，就会发现这个计数器被清掉，然后付费墙就没有再出现了。

从伺服器端渲染 (SSR) 角度来看付费墙

先前在《什么是 SPA (Single-Page Application)？有什么优点和缺点？》一文中有谈到，假如要让网页的 SEO 好，现今比较常见的做法，是透过伺服器端渲染 (SSR) 来达成。

所谓的伺服器端渲染，是指先把网页在伺服器 (server) 渲然完后，把完整的 HTML 档案传送到客户端，然后客户端就可以直接呈现。在最开始送 HTML 到前端时，JavaScript 还没有送过来。而要有付费墙，需要有写在 JavaScript 的逻辑才能完成。

换句话说，如果没有 JavaScript 的逻辑，付费墙就没办法出来。在网页中，一样可以开启开发者工具，然后用 Windows 系统用 Control+Shift+P、Mac 系统用 Command+Shift+P 打开搜寻栏，然后搜寻 JavaScript，接着点击 disable JavaScript。

这时就会看到，因为没有 JavaScript，网页就只有 HTML 跟 CSS，所以会有内容，但没有付费墙。

从快取 (cache) 的角度来看付费墙

最后来谈谈从快取的角度怎么突破付费墙。在这之前需要了解一些技术概念。搜寻引擎在做的事情基本上是爬虫，上面谈到 SSR 的 SEO 会比较好，是因为 SSR 会先把内容渲染好才传到客户端，所以搜寻引擎爬得到内容。

接着聊另个技术概念，是很多人都知道的快取 (cache)，在 《系统设计五大心法：水平扩张、快取、非同步、避免单点故障、监控》我们有比较详细谈，推荐不熟的读者可以读下。

许多浏览器都会快取爬虫爬下的内容，这能在网页载入不稳定时，仍呈现内容给浏览网页的人。但 Google 的搜寻引擎在今年把这个功能拿掉[连结]，因为现今的网页技术比较成熟，不稳的状况被大幅改善。但是微软的 Bing 还保有这功能。

所以你可以在搜寻结果点击快取，然后看到过去爬虫爬下的内容。因为希望让内容被爬，让 SEO 变好，付费墙通常不会挡下爬虫。所以从快取的页面，通常能看到完整的内容。

以上，希望透过付费墙的解说，让大家对于浏览器存储机制、伺服器端渲然，以及快取 (cache) 的概念都有更熟悉。

然后再次声明，这篇的目的是跟大家分享前端的技术；对于优质的内容，请务必付费支持 (想持续在前端、后端、工程师职涯的路上成长，可以付费订阅 E+，获得好内容与社群，同时支持 ExplainThis 的内容创作)。