在 DOM 操作時的 insertAdjacentElement

看到「Why I'm still using jQuery in 2019」這篇,裡面提到了 jQuery 很多操作上相較於 vanilla javascript 簡單很多,其中一個例子提到了 DOM 操作的 insertAdjacentElement()

el.insertAdjacentElement('afterend', other) undoubtedly works, but $(el).after(other) is actually palatable.

其實我不知道 insertAdjacentElement() 這個功能,我知道的操作都是透過 parentElementfirstChild 在移動位置,然後用 appendChild()insertBefore() 放進去。

跑去 MDN 上查了「Element.insertAdjacentElement() - Web APIs | MDN」後才發現有這個好用的東西:

targetElement.insertAdjacentElement(position, element);

position 的四個變化減少了以前組積木組多了會頭暈的情況。

接下來是研究支援度的問題,才發現可能是因為 Firefox 一直到 48 才支援 (從「Firefox version history」可以看到 48 是 2016 年八月釋出),所以網路上大多數的文章都還是用組積木的方式在介紹 DOM 操作,以避免相容性的問題:

Firefox 48 was released on August 2, 2016 for both desktop and Android.

另外還看到 insert​Adjacent​HTML()insert​Adjacent​Text() 可以用,其中讓我注意到 MDN 上面提到 insert​Adjacent​HTML() 居然是 Firefox 8+?本來以為是 48+ 的誤植,但從 Mozilla 的記錄「Implement insertAdjacentHTML」這邊可以看到,應該是在 Firefox 8 的時候實作的,這樣的話可以當作 insertAdjacentElement() 的替代品 (如果考慮到古早的相容性),只是這邊需要輸入 html string,跟其他操作是是用 element 不太一致...

意外的學到不少歷史故事... @_@

MDN 上的 CSS Layout cookbook

MDN 上看到「CSS Layout cookbook」,目前整理了六種情境,包括了設計方式與瀏覽器的支援度。

看到「Center an element」有種苦笑的感覺啊... 以前弄這個都是 workaround,現在都有對應的 CSS 可以處理了。

Mozilla 跟 Google 都宣佈了 TLS 1.0 與 TLS 1.1 的退役計畫

UpdateApple 也宣佈了,時間點跟大家都差不多:「Deprecation of Legacy TLS 1.0 and 1.1 Versions」。

Mozilla 宣佈了「Removing Old Versions of TLS」,而 Google 也宣佈了「Modernizing Transport Security」,兩篇都是講自家瀏覽器 TLS 1.0 與 TLS 1.1 的退役時程。

Mozilla 這邊的計畫是 2020 年三月移除:

In March of 2020, Firefox will disable support for TLS 1.0 and TLS 1.1.

Google 這邊的計畫則是 Chrome 81 移除,換算成時間會從 2020 年一月開始影響到 canary channel,到 release channel 應該跟 Firefox 差不多時間:

In line with these industry standards, Google Chrome will deprecate TLS 1.0 and TLS 1.1 in Chrome 72. Sites using these versions will begin to see deprecation warnings in the DevTools console in that release. TLS 1.0 and 1.1 will be disabled altogether in Chrome 81. This will affect users on early release channels starting January 2020.

差不多試從現在開始的一年半。

雖然這是講瀏覽器端的支援,但如果伺服器想要只支援 TLS 1.2+ 的話,就得考慮一下舊 client 支援的情況了。

桌機影響會比較小 (升級比較方便,替代方案也比較多),而行動平台看起來需要 Android 4.4+、iOS 7+,就要看各網站或是服務的族群了...

讓 Firefox 連線數變多 (然後加快速度)

最近換到 Firefox 後覺得開很多 tab 時很卡,但 CPU 也沒滿,大概是某種 lock/mutex/semaphore 機制導致硬體資源沒用完但是自己限制住...

找資料研究的時候發現 Firefox 對單一 server 的最大連線數是 6 個,而 Chrome 是 10 個:「Max parallel http connections in a browser?」。這對於網路速度夠的使用者就很卡,像是透過 RSS reader 同時對一個站台狂開分頁時就會卡住。

翻了一下 Firefox 的設定,找到相關的幾個設定,其中上面提到的是 network.http.max-persistent-connections-per-server,預設的確是 6 個,改成 10 個後測了一天好不少,決定改成跟 IE11 一樣的 13 個... (奇怪的數字)

另外一個是 network.http.max-connections,預設是 900 了,應該夠用...

修改 Firefox 的 Pop Up 限制

這是在 Bazqux 使用時遇到的問題,我在 Bazqux 這邊看到想看的文章,會習慣用 c 鍵打開新的 tab,等下再一起看。在 Chrome 上面需要安裝 extension 才能開到背景,在 Firefox 上可以透過修改 about:config 裡的browser.tabs.loadDivertedInBackground,讓他預設開到背景 (雖然變成所有的行為都會到開到背景 tab,但我偏好這樣...)。

但在 Bazqux 用 c 鍵把連結打開到 tab 時,有時發現會跳出遇到開啟上限:

這其實很不方便... 所以故意連打測試發現是 20 個,找了一下資料發現是 dom.popup_maximum 這個值,改成 -1 就好了。這算是某種安全機制吧...

先繼續用看看 :o

Stylish 的隱私問題

找了一下應該是舊聞了 (參考 2017 年年初,在 Ptt 上的「[-GC-] 新版 Stylish 開始蒐集使用者資訊」這篇),最近因為「"Stylish" browser extension steals all your internet history」這篇又被拿出來講。

目前的替代方案主要應該是 Stylus,在 ChromeFirefox 都有套件可以裝:Stylus (Chrome)、Stylus (Firefox)。

剛剛看了一下,Firefox 與 Chrome 的 extension 都已經被下架了,而且 Firefox 這邊直接設為黑名單:「Blocklist Stylish add-on - sends full page urls to remote server」。

今年十月 Firefox 將完全不信任 Symantec 簽出的 SSL Certificate

Mozilla 旗下的產品 (包括 Firefox) 將在今年十月對 Symantec 簽出的 SSL Certificate 終止信任:「Distrust of Symantec TLS Certificates」。

Mozilla 有把發生的事情都整理出來:「CA:Symantec Issues」,另外 Firefox 的動作分成三個階段,目前 stable 是 58,但 nightly 是 60 了:

  • January 2018 (Firefox 58): Notices in the Browser Console warn about Symantec certificates issued before 2016-06-01, to encourage site owners to replace their TLS certificates.
  • May 2018 (Firefox 60): Websites will show an untrusted connection error if they use a TLS certificate issued before 2016-06-01 that chains up to a Symantec root certificate.
  • October 2018 (Firefox 63): Distrust of Symantec root certificates for website server TLS authentication.

去年 Google Chrome 就有先丟出對 Symantec CA 的計畫 (參考「Google Chrome 對 Symantec 全系列憑證的不信任計畫」這篇),看起來 Mozilla 的計畫也差不多,但時間有些差異...

Mozilla 對 Alexa Top 1M Sites 的分析

MozillaAlexa Top 1M Sites 偏安全面向的分析:「Analysis of the Alexa Top 1M Sites」。

對一般情況比較有用的應該是看絕對數字,也就是哪些功能是大家都優先採用了... 然後可以看出 HPKPSRI 果然是大家都懶得上的功能 (事倍功半 XDDD)。

另外也可以當作是安全性確認的 list,把 HTTP header 類的安全性設定都放上去了。

Firefox 對 HTTPS 網站中 "Referer" 的保護

Firefox 從 59 之後,在開啟 Private Browsing 的情況下,不會送出完整的 Referer:「Preventing data leaks by stripping path information in HTTP Referrers」。

這篇吸引到我的是 EFF 的研究員發現的事情:

EFF researchers discovered this leak of personal health data from healthcare.gov to DoubleClick.

其中 EFF 研究員的文章是「HealthCare.gov Sends Personal Data to Dozens of Tracking Websites」這篇。

更好的作法應該是平常就完全阻擋,像是 Firefox 可以用 Referrer Control 設定,或是 Chrome 裡用 Referer Control 設定。

用 IPFS 放 Status Page

Hacker News Daily 上看到的專案,拿 IPFS 來放 Status Page 真的超適合的,靜態為主,然後又可以避開 SPoF:「Decentralized StatusPage」。程式碼放在 GitHubpaulogr/dstatuspage,以 JavaScript 撰寫。

Hacker News 上的討論也蠻有趣的:「Show HN: A Decentralized StatusPage on IPFS | Hacker News」。

IPFS 提供的特性與 Status Page 需要的特性其實還蠻契合的,也許不是 killer application,但應該會是個 IPFS 的出發點...

而且最近 Firefox 在他們的 blog 上發表了 Firefox 59 會將一些分散式協定加進去 (不是實做,而是提供接口):「Extensions in Firefox 59」(參考 Support for Decentralization Protocols 這段),這感覺讓 IPFS 之類的協定有更寬廣的舞台...