從前端工程角度聊付費牆 (paywall) 的技術實現

2024年2月20日

💎 加入 E+ 成長計畫 與超過 300+ 位軟體工程師一同在社群中成長,並且獲得更多的軟體工程學習資源

最近科技媒體界的一個大新聞,是 TechCrunch 收掉了訂閱服務。早在這之前,Business Insider 等媒體也關閉付費牆 (paywall)。 身為一個聊技術的電子報,這邊不從商業面討論這個網路時代許多媒體常用的商業模式,而是從技術面來看看相關的實作。

所謂的付費牆,是指你需要付費訂閱該媒體,才可以閱讀完整的內容;如果沒有訂閱,只能看到少部分的內容,然後會有一個牆擋著,要你訂閱(如下圖所示)。今天聊聊從前端的角度破解付費牆。

image

特別注意,這篇文章僅是從前端工程的角度討論,是技術分享,藉由了解如何實現,來更清楚不同的技術概念。大家理解完雖然會獲得能破解付費牆的技術能力,但去破解就算不違法也不道德。

好的內容需要大家付費支持,好媒體才能永續經營。所以假如真的喜歡某個內容,就付費支持吧 (或可以付費訂閱 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 的內容創作)。

🧵 如果你想收到最即時的內容更新,可以在 FacebookInstagram 上追蹤我們