進度條

【實體課程】WordPress 跨界網站接案講座暨工作坊 | 開源研究室 x 進度條線上課程

開源研究室 x 進度條線上課程,台北場盲鳥票開賣中!! 至 11/08 (日) 23:50 為止喔!購票與詳情請看「KKTIX 購票頁面」或「進度條文章

要怎麼辨別使用者瀏覽者用哪種瀏覽器呢?用UserAgent是最簡單的方式喔!

是爬蟲還是手機?淺談網路訪問的識別證UserAgent

作者: Vincent Ke 更新日期:

不知道大家是不是都曾有過疑問,當我們用手機開啟網站時,大多都會導向行動版網站(mWeb),而用PC開啟時就會導向一般網站(Web),但一樣的行為之中,究竟是怎麼判斷使用者訪問的當下,使用的是何種裝置呢?

 

 

pexels-photo-678308.jpeg

 

 

這時候不得不提到一個隱身在http裡面的小小功臣-UserAgent (中文稱使用者代理),當我們使用軟體或是APP,進行網路協定的操作時,通常會透過提交一個特定的字串來標示自己的身份,以及相關的訊息,例如裝置、作業系統、應用程式,來表明使用的身份。

 

 

而服務端一但接收到這樣的身份識別後,就可以做出相對應的回應,例如了解妳是來自PC還是mobile,來決定提供給你的Web應該屬於哪種類型,進而提升使用者體驗。

 

校正小編補充:

UserAgent並不是一個一定會包含在HTTP(S) Request裡面的內容,它屬於Header,是開發者可以自己訂或是更改的(手機APP也可以),一般來說是用來表明Request發送的「來源程式」,比方說你是用哪種瀏覽器,或是是由哪支APP發出的(要自己定)。並且如果使用的是HTTPS Request的話Header是會被加密的,可以有基本的安全性(但不是很有用,中間人攻擊就是一個例子),如果只是用HTTP的話則會是明碼傳輸。

 

 

 

pexels-photo-955450.jpeg

 

 

最簡單的檢查方法,就是在你的Chrome裡面,輸入chrome://version/ 就會看到囉,以小編的為例如下:使用者代理程式 Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) 

 

 

 

但奇怪,我用的不是Chrome嗎?為什麼出現的是mozilla呢?

 

 

這就牽扯到瀏覽器的各種戰爭啦,在早期的瀏覽器中有兩個骨灰級角色Mosaic和Mozilla(當時名稱為Netscape),儘管顯示上都圖文並茂,但NetScape是支援Frame顯示的,而Mosaic並不支援,所以當時的網站就必須探測這兩種UA,來了解使用者是使用哪種瀏覽器,進而提供有Frame或是沒有Frame的頁面。

 

 

pexels-photo-697059.jpeg

 

 

但當時所有的瀏覽器也都支援Frame,但為了避免拿到沒有Frame的頁面,於是就都加上了Mozilla,來表示兼容的動作,於是乎一路演變迄今,Mozilla就成了Default UA的代名詞。

 

 

而除了我們常見的手機、PC之外,別忘了在網路世界中,還有一個很重要的角色-網路爬蟲,像是Google的爬蟲總是會不經意的爬進你家的網站,進而針對你家的網站架構、體質..等等進行解析,最後給予你在各種關鍵字的搜索排名

 

 

而網路爬蟲,可也有他們自己的UserAgent呢?當然有啊!舉例來說Google的就是Mozilla/5.0 (compatible; Googlebot/2.1; +http:// www.google.com / bot.html)。

 

 

那辨別UserAgent,除了增加使用者體驗外,對服務端有什麼好處呢?

 

 

pexels-photo-1556707.jpeg

 

 

這可不勝枚舉了,例如當你的服務只想針對iOS開發時,你就可以去鎖Android的UserAgent;或是有一些頁面,如果被爬蟲爬到會造成搜索排名的下降,也可以針對爬蟲的UserAgent進行封鎖。甚至是當你在做開發時,也可以透過UserAgent的切換,來模擬mobile device檢視頁面的樣式是否如同預期,甚至有些網站為了隱私權的問題,不允許default 的UserAgent aceess。

 

 

像小編就習慣透過Chrome的插件工具mod-header,來修改http request 的header,並利用這樣的方式做出UserAgent的模擬和切換。網路上也滿多網站列出了各種搜索引擎與瀏覽器的UserAgent,有興趣可以用Google 搜尋看看喔!

 

 

校正小編補充:

如果看了上面兩段應該會覺得怪怪的,既然UserAgent可以模擬切換,那又要怎麼做到防護的工作?

就結論而言資訊的不對稱性就已經製造了一些麻煩,就像你家的門鎖鎖匠總是可以解開並不表示門鎖對防盜與安全是沒有用的,穿得少總比裸奔好吧!有門檻就可以過濾掉一些奇怪的事情,商業上還是有些許的幫助。
  
不過如果是要用來做絕對防止的話,UserAgent其實幫不了你多少,就連開發上最常用的 curl 基本功能就可以自訂UserAgent。另外如果你沒讓你的Request加上SSL變成HTTPS的話,基本上就是在裸奔。當然就算加上HTTPS還是可以有辦法知道UserAgent,只是比起直接看光光還是多了一點複雜度。
  

 

 

pexels-photo-684387.jpeg

 

總之不論是服務端還是使用者,UserAgent辨識的目的,最大宗當然就是帶給使用者更好的體驗,下次大家可以自己試著切換成不同的UserAgent,也許會有不同的驚喜呢!

 

校正小編補充:

如果要警告萬惡的IE系列使用者,使用UserAgent是可以辨識的。

至於有沒有人會故意用IE但是改UserAgent假裝成其他瀏覽器呢?

第一,改UserAgent並不會讓IE變得比較強,可以執行比較現代的程式碼。
第二,如果他聰明到有能力改UserAgent,那他應該不會使用IE...


總之,如果你是為了讓使用者體驗更好的情況,就只要去考慮一般的使用者就可以了。
 

最後,如果你喜歡我們的文章,別忘了到我們的FB粉絲團按讚喔!!

Medium vincent

Vincent Ke

喜歡把混亂的事情變的簡單 用嘴巴做事其實很可以 但要結合靈活的腦袋思考 就一起來拆解吧