使用者在電腦上使用先進的網頁瀏覽器,如 Google Chrome 或 Firefox,因為這些瀏覽器可以安裝「擴充套件」,有時可讓使用者達成一些方便的功能,但網頁或 web 系統,可能就因為這些擴充套件,發生排版顯示或是嚴重操作的問題。

一、廣告攔截的擴充套件讓正常內容也出不來

當使用者都在網路上的時候,廣告也跟著出現在網路上了。網路有很多地方,以網頁來說,廣告是怎麼顯示在網頁上的?最單純的可能有個 img html tag,有個 js script ,圖片或 js script 裡面包含了各大廣告系統的 domain,跟廣告相關的英文單字出現在 html class name/ id name 中,圖片名稱或路徑包含廣告的相關字詞…等等。(但是近代的網頁廣告通常都沒這麼簡單)

眾多廣告攔截器們

於是瀏覽器的廣告攔截擴充套件,在取得瀏覽器的相關讀取權限後,就可以將網頁上這些應該是廣告的東西殺掉,讓使用者得到一個乾淨的網頁。

但是這些規則,卻常常把網頁上要正常顯示的內容也擋掉了,為店家和開發者造成一些額外的問題

  • 店家網頁自己的促銷訊息區塊,圖片檔名或圖片資料夾路徑名稱含有 ad,無法顯示。有時候其實內容不是廣告,但只是檔名不小心取到,或是剛好放錯資料夾,也會被擋掉。當然,廣告攔截套件的理念是寧可錯殺一百也不可漏放一個,不然使用者會覺得這套件沒用。
  • 一些社群分享套件,如 addthis, Facebook Fan Page Plugin 之類的無法載入
  • 名稱含有 share 或 ad 的 div 被移除/寬高被設為0,以及上述兩種情況,都將導致頁面跑版,或是產生一塊莫名的空白
  • 廣告圖片是用黑色半透明背景的 modal 頁面視窗呈現,瀏覽器擴充套件把廣告圖殺掉了,但是背景黑色的區塊沒有一起殺掉,x 有時候也被一起移除掉,導致一塊黑色半透明的東西蓋在網頁上,無法瀏覽網頁。
  • 彈跳視窗被擋掉,一些列印、分享、選門市、店家公告內容,無法正常顯示。
  • 有些會阻擋臉書的 sdk.js 或是 fbevents.js,連帶產生的 js error/warning,可能導致頁面上其他段 JS 程式碼也無法執行。(如 facebook 的像素 的 fbq is not defined)


最麻煩的是這些症狀不會一起發生,因為市面上至少有幾十種廣告攔截套件,各家軟體開發的愛恨冤仇錄(如 AdBlock Plus 本身會接受 “廠商贊助” 來放行特定廣告,造成其他開發者又出來另外做一套超越藍綠的!@#$%&*),每家套件各有各的規則、黑名單、白名單,公用黑白名單*不同的瀏覽器版本*不同的瀏覽器*不同的套件版本*不同的作業系統…千變萬化的排列組合下,又會發生不同的誤攔截情況。

那上述問題要怎麼解決呢?理想狀態下:

  • 想辦法修改所有建立資料夾、上傳圖片的相關程式,列一堆禁用封鎖字。然後可能使用者整天來問為什麼檔案傳不上去,而且還是百密一疏,最後需要聘請人工智慧關鍵字封鎖名單 DevOps 專員。(這邊的 DevOps 指的是在 Azure Devops 上面開票的人,與真實人物或真實軟工職稱名稱無關)
  • html 的 class/ID name 用隨機字母和英數數字取名,雖然降低程式易讀性,但可避免用到敏感字被判斷為廣告內容。或是用一些 mvvm 框架產出的那種 dymanic class name?
  • 不要在網頁放一堆有的沒的分享按鈕,來假裝充實網頁內容…呃不,是假裝增加社群分享的方便性與話題性。
  • modal 的黑背景 ui 元件也使用 ad 相關的名字來取名,要擋就一起被擋
  • 不要再用彈跳視窗
  • 所有 FB 像素事件碼之類的用 if(window.fbq) 或 try catch 包起來
  • 為上述已知問題再花時間人力,建立一堆整合測試程式

二、解開鎖右鍵,讓網頁產生 javascript 錯誤

很久以前已經介紹過網頁鎖右鍵這種歷久不衰的前端資料顯示需求,要保護網頁資料的技術 vs. 要讓人 copy 內容更方便的瀏覽器套件,矛盾大對決又來了,這種矛盾產生的能量,簡直是現實中的櫻花忍法帖。

解右鍵擴充套件範例

有些解右鍵的瀏覽器擴充套件,具體手段是停用瀏覽器對於該 domain 網頁的 JavaScript 功能,然後導致網站頁面上有用到 JavaScript 的功能就完全無法操作。可憐的開發人員有何解決方案?只能再網頁上放一段小小的 noscript 提示,然後根本沒人會看。

有些瀏覽器擴充套件,則是在網頁上再塞入額外的程式碼,讓本來鎖右鍵的相關 css 或 js 失效,然後有一次遇到一個情況,使用者反應 bootstrap 的 modal 在某幾頁跳不出來。一聽就覺得柯 p 問號,這種整個網站都用同一段程式碼的共同元件,怎麼會「某幾頁無法執行?」

幸好這個問題可以直接實機 debug,遇到問題的起手式就是先遠端連線,打開該電腦瀏覽器的無痕模式,果然一切正常!(無痕模式時不會載入任何瀏覽器套件),兇手又是瀏覽器擴充套件。

最後把瀏覽器擴充套件一個一個關掉,試出是 EnableCopy 這個擴充套件的鍋,大概是該套件在頁面上加入的某個 clearHandlers 的 function 有問題,只有 data-toggle=”modal” data-target=”…. 的呼叫方式會無法使用,只好先改寫成別種方式。

三、防毒軟體讓 ajax 傳輸技術雷到爆

近代的防毒軟體多半有主動偵測機制,以免每次要等病毒碼更新之後才有作用?電腦病毒早就不知道造成多大損失了。

但是近代的 web 需求,又常常得在頁面上傳輸各種使用者個資,或是為了使用者體驗,網頁不准換頁,畫面不能整頁直接刷新重整,得用 ajax 在背景偷偷執行各種資料傳輸需求,並變更頁面上各種資料的狀態。

有時候這些動作剛好跟病毒有 87% 像,於是如果使用者有安裝一些安全防護相關的擴充套件,網頁又不正常了。

有一次碰到使用者反應檔案上傳後,會卡在 loading 畫面,本來判斷是檔案過大造成主機 session 逾時,所以檔案傳完要轉到別頁時,系統已經被登出的問題?

但是後來開發人員發現,使用者的電腦瀏覽器有安裝天殺的趨勢科技工具列,檔案上傳程式回傳的 json 資料,會被瀏覽器套件添加內容,而網頁程式無法正常接收並解析回傳值,當然也就造成前端系統網頁畫面無法正確更新。

趨勢工具列
可點圖放大,console log 看訊息被加了什麼

卡巴斯基也很雷,從以前學生時代操作校務系統時,大家就都知道要把防毒軟體關掉,不然常常會卡住,想不到後來工作時還是持續遇到卡巴斯基的問題。卡巴斯基新版有個網頁防護功能,除了刷卡時會導到另一個安全視窗,把好好的刷卡網頁弄得跟釣魚網站有 87% 像,還會在電腦內的所有瀏覽器要求權限,並安裝擴充套件。所以說做防毒軟體,還要會開發各瀏覽器的套件,真的是太厲害了。

但一樣又碰到操作時,網頁畫面沒有反應,或是重新整理後資料還是沒變更,但是一打開瀏覽器 console 就看到有個 499 error,從 Developer Tools 的 Networks 裡面,可以看到 ajax 的 response 資料被卡巴斯基變更成「如果您認為這個網頁安全,請按下允許」

卡巴司機的主動偵測機制最厲害的是什麼呢?有時候會被擋,有時候又不會被擋,改程式名稱,改 function 名稱,放別台主機,甚至完全不傳值不接收值都無法控制,只要 ajax 資料請求發出去,就是跟台鐵一樣開始比誰的八字重,頂多包個執行失敗的訊息。

至於有裝防毒軟體就不會中毒?語畢,哄堂大笑。

四、套件在網頁嵌入的內容,讓網頁顯示得跟別人不一樣( injected stylesheet)

剛剛第二點已經提過一個瀏覽器擴充套件插入內容,導致網頁運作不正常的案例,只是剛剛的是影響 js 的部份,這個案例是影響 css 的部份。

有一次同仁遇到一個問題,網頁上用了 animate.css 的某個動畫效果,但是有些電腦的 Google Chrome 完全看不到?馬上下背景音樂…….我們不一樣不一央!都快 2019 年了,瀏覽器都升到最新的穩定版了,css3 的 animation 都用 SCSS 自動 prefix 了,還會有什麼問題?

後來發現網頁根本就沒 import 到那個 @keyframes 動畫的 css,那動畫效果哪來的?難道 Google Chrome 某版開始有內建常見的 css3 animation?

套件置入 css

後來發現又是一場夢,從瀏覽器的從 Developer Tools 會看到有 injected stylesheet,最後還是用蒙地卡羅法找到是這套件 Screenshot: Screen Video Recorder 做的好事。

五、這套件有毒

以前的 Google Chrome 可以很輕鬆的下載並安裝瀏覽器套件,就像下載照片一樣點一兩下就裝好了,但因為太多使用者被騙去安裝惡意軟體,所以在 2013 跟 2015 年,網頁瀏覽器的開發團隊都有陸續發佈一些訊息,規定瀏覽器擴充套件一定得從  Chrome Web Store 下載,才能安裝。

但後來其實還是有方法可以安裝,只是安裝步驟變得多了點,因為瀏覽器擴充套件可能是企業內部使用的,不適合公開上架到擴充套件市集。使用者要先進到瀏覽器設定,找到擴充套件設定,然後選擇載入未封裝的擴充套件,再按下一連串的確認同意視窗…

但是在 2018 年又宣布將從 Chrome 71 起,停用上面提的擴充套件安裝的方式,最終使用者只能從官方的 Chrome Web Store 安裝擴充程式。

這安裝套件的歷史跟本文有什麼關連?有時候遇到使用者反應,網頁內文有張風景圖要換顏色,或是按鈕旁邊廣告圖上的英文文案跟連結要改。我黑人問號??內文哪來的風景圖跟廣告圖??!

廣告示意圖

遠端連線一看,原來是不知道裝了什麼,電腦整個中毒,惡意瀏覽器套件自動在內文段落亂塞廣告,有時候插的廣告圖片風格還剛好…

但是大多數情況都沒這麼美好,惡意套件通常綜合了以上各點的特色,也讓網頁無法正常使用,然後使用者跟非技術人員都怪罪開發人員沒排除這些狀況。

奇怪了,當一個電腦的瀏覽器中毒到淘寶跟 Apple 的網站都無法加入購物車,難道是馬雲跟賈伯斯要負責使用者設備中毒問題嗎?只能說設計是一種溝通的過程啊。

最後小結一下近幾年的惡意瀏覽器套件事件

結論

不管是當開發者,設計師,還是使用者,網路都是很危險的,還是趕快回火星吧。