Firefox 的 UI/UX 歷史

Hacker News 首頁上看到「Firefox UI/UX History (github.com/black7375)」這篇,整理了 Firefox 的 UI/UX 歷史,裡面也試著分析各個不同版本的優缺點。

話說看到這個最早的版本的 screenshot 讓人懷念 (還叫做 Phoenix 的版本):

裡面也提到了一些 fork,像是「Early (v1 ~ v3)」這個 UI 版本的 fork 還可以在 SeaMonkey 看到。

到了「Classic (v4, 2011.3)」這個版本,目前還有在維護的 fork 則是 Pale Moon,不過核心的部份沒有跟上,很多網站的新功能是沒辦法用的。

接著是「Australis (v29, 2014.04)」這個版本,目前已經沒有在維護的 fork 了,2021 年年底 Basilisk 宣佈停止維護。

然後是「Photon (v57, 2017.11)」這個版本,目前還有在維護的 fork 是 Waterfox 的 G3 系列。

目前最新的一個是「Proton (v89, 2021.06)」這個版本。

裝 uBlock Origin 擋詐騙廣告:金石堂

昨天在噗浪上看到這則:「金石堂的google搜尋推薦第一位是詐騙網站」。

這邊一直在推廣 uBlock Origin,在主要的幾個瀏覽器上都有支援:

從上面那則噗裡的討論可以看到,把一個檢舉掉了,過幾個小時候另外一個還是會冒出來...

網頁的死亡線

是一篇 2017 年的文章,前幾天在 Hacker News 上重新被提出來:「The Line of Death (2017) (textslashplain.com)」。

文章開頭在講瀏覽器 UI 的信任區,這條線以上是 native UI,以下是網站可以任意操控的內容:

所以 UI 上面有些小細節讓你區分,但這其實對不是專精 phishing 的人很不友善:

另外當然就會提到 browser-in-a-browser (以及 picture-in-picture) 類的 phishing 了:

另外提到了 Fullscreen API,這使得信任區間變成 0:

提到 Fullscreen API 所以就去翻資料,意外發現 IE11 居然支援這組 API,雖然是帶 ms 的 prefix,而且不支援一些輔助性的功能 (像是傳回 Promise object)。

這些 UI 與 security 類的問題,主要還是得考慮到使用者未必那麼熟悉,以及就算有經驗的人也很有可能不小心中獎...

修正 Curl 的 TLS handshake,避開 bot 偵測機制

利用 TLS handshake 的 pattern 可以當作是某種 fingerprint,就可以知道你是用 Curl,這個方式在蠻多 CDN 都會用在 anti-bot 機制 (像是 Cloudflare),而剛剛看到有人投稿自己的 patch,試著將 Curl 修改成 Firefox 的 pattern:「curl-impersonate」,Hacker News 上的討論在這邊可以看到:「Show HN: Curl modified to impersonate Firefox and mimic its TLS handshake (github.com/lwthiker)」。

作者有提到這次的 patch 偏 hack,不太可能整進上游,但希望未來改的乾淨一點,然後整進上游:

I hope to do so in the future, for now the implementation is extremely hacky so I doubt it can get accepted into curl.

另外有人提出來說應該要用 Firefox ESR 版本的 pattern 而非 stable channel,也有人提出來說用 Google Chrome 的更好,不過我覺得有人開始做就已經很棒了 XD

CSS4 的 aspect-ratio

Hacker News Daily 上看到 aspect-ratio 這個新的 CSS property 的介紹:「Aspect Ratio is Great」,對應的 Hacker News 討論則是在這:「Aspect-ratio is great (css-irl.info)」。

MDN 上的解釋是這樣:

The aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.

對於圖片來說,這可以用來指定希望 crop 多少的範圍。

作者也有提到以往的 hack 方式是透過 paddingcalc + var 的方式達到,現在讓瀏覽器直接處理就簡單不少了,這張示意圖就蠻清楚表達想要做的事情是怎麼樣:

然後看了一下 Can I use 上面的資料,看起來許多大宗的瀏覽器都支援了,也包括了 Firefox 的 ESR 版本 (91,在 2021 年八月的時候釋出的);不過仔細看會發現 Safari 這邊寫 15 才支援,這代表 Catalina (10.15) 與 Big Sur (11) 的 Safari 都不支援,而這兩個版本目前 Apple 都還有支援,另外在行動裝置上,這也代表 iOS 的要求是 15+,所以目前還在支援的 iPhone 5SiPhone 6 用的 iOS 12 也會遇到問題:

不愧是新世代的 IE,對於需要服務比較一般性的情況應該還是不能用...

更多瀏覽器內 GPU fingerprint 的技巧

在「Your device's GPU may be used for fingerprinting purposes」這邊看到有研究單位找出更多 GPU fingerprint 的技巧,論文在「DRAWNAPART: A Device Identification Technique based on Remote GPU Fingerprinting」這邊可以翻到,另外一些 source code 可以在 GitHub 上的「Drawn Apart」這邊可以翻到。

看起來是透過 WebGL 去建立模型:

The researchers ran experiments on 2500 unique devices using the technique. They developed two methods, both of which use the Web Graphics Library (WebGL), which is supported by all modern web browsers.

接下來瀏覽器端應該會在研究後有更多反制機制被放進來...

XFCE 配上 Chromium 系列瀏覽器 (Chrome/Brave/...),視窗最大化時的問題

今天發現 Brave 在視窗最大化時會超出預期的邊界,而非放大到螢幕的邊緣,找了一下發現有人已經在 Brave 的 GitHub 上開了「Incorrect scale if browser is full screen #18964」這張票,後來看到有人說在 Chromium 的 bug system 上已經有人提出來了:「Issue 1257119: Goes under the taskbar when maximized」、「Issue 1260821: maximise gets screen dimension wron」與「Issue 1261797: [User Feedback - Stable] Reports that when Chrome is maximized after being minimized, it launches to beyond the window frame on Linux」。

這次遇到的 bug 看起來是只有用 XFCE 的使用者才會中獎,目前先摸索出一套 workaround 是透過 wmctrl 操作修改瀏覽器的位置與視窗大小。

方法是先用 wmctrl -l -G 列出所有視窗的資訊,包括 geometry 的資料,接著再用 wmctrl -i -r 0x12345678 -e 0,3760,15,1232,1935 這樣的指令去指定瀏覽器的位置與視窗大小。

不知道要撐多久就是了...

美國聯邦政府 CIO 以資安理由建議安裝 ad block 軟體

Hacker News Daily 上看到的,美國聯邦政府的 CIO Clare Martorana 行文建議行政管理和預算局 (Office of Management and Budget) 安裝 ad block 軟體以確保資訊安全:「The NSA and CIA Use Ad Blockers Because Online Advertising Is So Dangerous」。行文的文件在「Wyden Letter to OMB on Ad-Blocking」這邊可以看到,另外在 Hacker News 上的討論「The NSA and CIA use ad blockers (vice.com)」也可以翻。

有很多惡意軟體 (像是 malware) 會透過合法的 ad network 散布,然後竊取資料,甚至是透過麥克風監聽環境音:

I write to urge the Office of Management and Budget (OMB) to protect federal networks from foreign spies and criminals who misuse online advertising for hacking and surveillance, by setting clear new rules for agencies in its forthcoming “zero trust” cybersecurity policy.

I have pushed successive administrations to respond more appropriately to surveillance threats, including from foreign governments and criminals exploiting online advertisingto hack federal systems. This includes seemingly innocuous online advertisements, which can be used to deliver ‘malware to phones and computers—often without requiring users to click anything. This ‘malware can steal, modify or wipe sensitive government data, or record conversations by remotely enabling a computers built-in microphone.

記得我是從 Firefox 還叫做 Phoenix 的時代就在用 ad blocker 了... 建議大家一定要裝啊,以現在來說應該都是裝 uBlock Origin,在有支援 extension 的瀏覽器都有商店可以直接安裝。

用 Gecko Engine 寫的另外一個瀏覽器 Dot

Hacker News 首頁上看到 Dot 這個瀏覽器,平常看各種標語已經麻木了 (什麼 privacy enhanced 之類的),讓鄉民看上眼的是,這是一個 Gecko 寫的瀏覽器,也就是 Firefox 的底層,而不是 Blink (就 Google Chrome 那個系列):「Dot Browser – privacy-conscious web browser (github.com/dothq)」。

抓下來跑了一下,看起來就如同 GitHub 頁面上的警告:

Dot Browser is alpha software, and you will most likely experience bugs and issues!

目前功能也超陽春,還沒支援 extension 之類的東西... 不過是有內建 ad blocking 與 usercss 的能力,算是基本盤吧。

可以放著看看發展的如何...