從前端工程角度聊付費牆 (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 的內容創作)。