Robots Exclusion Protocol

Google Webmaster Central Blog 昨天發表了Formalizing the Robots Exclusion Protocol Specification這篇文章,介紹到 Robots Exclusion Protocol (REP) 這個正在標準化的草案,REP 其實就是已經被廣泛使用的robots.txt檔案,robots.txt 誕生至今已經 25 年了,當初是由Martijn Koster所設計,早期網路的東西基本上就是先做,設計的不錯大家就跟著抄,不一定會有什麼標準的文件,robots.txt 就是這樣其實一直都沒正式的標準文件,我以前還真的有懷疑過怎麼找不到,直到 Google 這篇文章才確定了,真的一直以來是沒標準的,雖然 Google 衝網路標準太快讓人有不少意見,不過這次我倒是覺得樂觀其成,而且他們也還公開了他們的 robots.txt 的parser matcher lib

消息來源


SameSite Cookie

Cookie Time

Cookie 的規格是 RFC 文件所定義的,其實一直以來都有在演化,目前為止已經有三個版本,照順序分別是RFC2109RFC2965和最新的RFC6265,像是HttpOnly就是 RFC6265 才出現的,而最近最新的屬性,就是SameStie了,其實它和HttpOnly的起源很接近,都是近年來比較被人重視的安全性和隱私的原因,Google 的 web.dev 有一篇圖文並茂的文章介紹的很詳細-SameSite cookies explained,建議還不清楚什麼是 SameSite cookie 的可以先去看一下。

SameSite Cookie 的標準文件其實還未正式定稿,目前還算是草稿RFC6265bis(bis 在The Tao of IETF有解釋),不過主流瀏覽器都已經支援了,然後其實這篇文章我想說的是最近在 W3C TAG 看到的 Issue 373:SameSite=Lax by default,是由 Google 的 Mike West 提案要把 SameSite 的預設值改為 Lax,現在 Google Chrome 已經有這個實驗選項了,而且除了 SameSite 預設值的改變之外,其實還有一個修改目標是SameSite要在Secure的時候才能設為None,這項改變相對而言是影響比較大的,所以提案的文件(Incrementally Better Cookies)也有提到可以分步進行,另外就是 Firefox 也表示有意願來實做,看起來至少 SameSite 預設改為 Lax 這件事應該是不會太久之後就會發生了。

在花時間看一些文件內的參考資料後,發現 Mike West 還有其它幾份相關的草案:

  • first-party-set是用/.well-known/URL 來跟客戶端溝通,可以提供 first party 的域名清單;
  • First-Party Sets and SameSite Cookies利用上面的 first-party-set 資訊,然後提供兩種新的 SameSite 值:FirstPartyLaxFirstPartyStrict
  • HTTP State Tokens定義了個標準化的 session token,是由瀏覽器端產生的 token,而不是 Web API,至於怎麼傳遞到 server 端,怎樣溝通有效期等都有寫在規範內,Incrementally Better Cookies 的想法也是從這份草案中的特性而來。

這些草案都還蠻有趣的,至於會不會定稿成為規範甚至大家都開始實做,目前就還很難斷定了。


瀏覽器多樣性 Browser Diversity

前陣子大事就是微軟要放棄自家的 EdgeHTML 引擎,轉用 Chromium 專案為基礎來開發新版的 Edge Browser 了,風聲剛出來的時候,我注意到微軟官方完全沒做出回應,也沒有任何微軟員工出來講話,加上有些媒體早就發現到有 Edge 的開發成員在貢獻 Chromium,我就覺得是真的了,後來十二月六日微軟正式回應,還有一份比較長的聲明,Mozilla 也有回應,其實這件事情對於網路生態算是很大的衝擊,不過一般使用者可能沒什麼感覺,加上都沒看到中文的文章寫這件事情的影響,所以只好我來寫一下了。

首先,我講可能沒什麼公信力,所以可以直接來看一下 Google(?) 其中一集 HTTP 203 短片,標題是 Browser Monoculture,Monoculture 剛好是 Diversity 的相對,mono 是單一,單聲道或是黑白影像都是用 mono,culture 就是文化,Monoculture 的意思自然可以明白:

事實上,當微軟放棄 EdgeHTML 引擎之後,現在整個生態圈只剩下 Firefox 的 Gecko 引擎和 WebKit 家族(Safari 的 WebKit 和 Chrome 的 Blink ),而 WebKit 家族現在的市佔率已經是超過八成的獨大局面,行動裝置領域更是嚴重,如果扣除 iOS 的 Mobile Safari 則幾乎都是 Chrome 的天下了,幾乎是回到 IE 壟斷的時光,不過其實我覺得現在狀況又比那時候更險峻一點,有兩個問題:第一個是現在的 Web Platform 已經太複雜了,HTML 本身還算是單純的部分,但是各種 CSS、Web API 的推陳出新,再加上安全性、親和力、網路連線、Extensible Web 等等,到底有多少東西呢?可以參考我之前貼過的Web Platform那篇文章中Google Chrome 的 Platform Status,光這邊登記在案的,現在就有 1255 個功能,還有不少面向的東西不會列在這邊,像是效能、開發工具、WebDriver 等,其實我已經不認為現在有什麼其他第三方勢力還有辦法維護一個獨自的瀏覽器引擎了,就算是 Google 一開始也是從 WebKit,Mozilla 也是從 Gecko 來發展,微軟今天放棄繼續開發 EdgeHTML 之後,可能過一兩年就會讓它難以再次跟上標準的發展,其實微軟當年能從把 IE 重構成現在的 Edge 我覺得實在很厲害了,不過未來這種事情難度只會越來越高。

第二個是如果 Chrome 已經佔有率這麼高,它是不是可以自己開始亂搞加功能呢?就像是以前的 IE。答案其實是可以,只是現在手法已經進化了,以下舉個例子,不過先消毒,我不是指控 Google Chrome 團隊這件事是 be evil,而是假設要 be evil,這已經是可行的方法,或是換個角度,他們其實不覺得自己在 be evil,只是結果就是這樣了。

我要舉的例子是前兩週 Chrome 發表了他們支援 Background Fetch 這個新標準的消息,我第一時間反應其實是,WTF 我怎麼完全沒聽過這東西,然後我就去查查怎麼回事,然後了解到:

  1. 看介紹大概就了解這個需求確實是有的
  2. Chrome 外其他家都還沒有說要支援(根據Chrome Platform Status
  3. 標準文件的兩位編輯都是 Google 的人,主要應該是 Jake Archibald
  4. WICG那邊是去年二月也是由 Jake Archibald 提的,然後 W3C 那邊根據 blink-dev 的正向回饋就決定接收提案了

這狀況有點讓我聯想到「進化的獨裁者」,一切該有的過程其實都有,但是就都是他們的人,自己提案說有這需求,有寫好文件了,在自己家的討論區得到正向回饋,然後實做起來馬上就有市場 80% 的支援度了,這樣要不要直接算正式的網路標準了,其他家(aka Firefox)又情何以堪。事實上 Chrome 這樣衝網路標準的狀況也好一陣子了,早在 2015 年 ppk 就已經有提出對於標準發展太快的疑慮而發了一篇Stop pushing the web forward

而除了快速的發展新功能之外,還有一種狀況是擱置他們覺得不重要的 Web API 開發,然後因為已經獨大了,所以開發者就算很想要這個新的 Web API 也是無能為力,這其實也就是 HTTP 203 短片有提到的,多樣性意味著開發者有選擇的權力,而有這個力量才能讓兩邊對等。

而除了這兩個問題之外,也有人提出我之前沒想過的安全性問題,剛好就在微軟發佈消息之後沒多久就爆發出SQLite 漏洞,ZDNet 的標題提到影響到所有以 Chromium 為基礎的瀏覽器,這也是一個我之前沒想到過的問題,如果獨大的軟體有嚴重的漏洞,那一下就直接影響超多人,不過其實這次的漏洞連 Firefox 也有受影響,然後也還好不是直接可以遠端就下手的漏洞,其實佔有率高的軟體或服務都一直是駭客的目標,想必 Chromium 的 Blink 核心之後勢必會更加受到駭客關注吧。

這陣子這個圈子很多人都已經發表過看法了,像是ppkZeldman都出來發表意見,如果有人不知道這兩位是誰,趁機介紹一下,Jeffery Zeldman 是Designing with Web Standards的作者,A List Apart(A Book Apart, An Event Apart 等)和Web Standards Project的發起人,也是當年推動瀏覽器實做應該回歸網路標準的意見領袖,ppk 也是那個時期蠻活躍的,做了很多相容性測試,著有 ppk on JavaScript,當年是很棒的入門書。大部分的人其實都是針對 monoculture 論述,然後建議大家現在就開始行動,包括確保你的網站支援 Firefox、開始使用 Firefox 等等,不過 Lea Verou 有則評論則是針對那些覺得少一個瀏覽器要測試很高興的開發者,講的比較重:

至於事主之一的 Google 則就裝死當沒他的事。總之,現在雖然 Firefox 還有個 10% 左右的佔有率,光看數字還比 IE 那時候好,但是我卻覺得情勢更加險峻,很難再有新的競爭者出來,只能希望 Google don't be evil,還有 Mozilla 能夠堅持下去,真是有點想念還有五大主流瀏覽器的時候啊。


Chrome 10 週年

Chrome 10 Years

Chrome 10 週年 Google 真的是很精心的規劃要幫它慶祝啊,我猜大概是找了個很有狼性的 PM 來,最近一下就被發現兩個問題,第一個小一點點,就是 Clear browser data 的地方,全部清除的功能不會幫你清除 Google 的資料喔:

第二個問題比較大一點,灣區日報看到的Why I'm done with Chrome,問題就是 Chrome 69 開始,登入網頁版的 Google 服務會自動把 Chrome 瀏覽器端的 Google 帳號也登入,然後根據 Google 工程師所說,這樣還不會觸發同步備份密碼和 autofill 等隱私資料(包括密碼、信用卡資料),不過在這狀態下你很可能不小心就觸發了,由於這個機制官方沒說過,介面上也沒明顯提示,就只有大頭那邊的頭像會變,幾乎都會被使用者忽略,而會不會自動備份隱私資料只是一部份,比較嚴重的點還是這個行為是破壞使用者的信任,事情鬧出來之後 Google 有官方回應說下一版會有修改讓使用者可以關閉(不過預設還是開啟啦~~),登入後的介面也有相對應的修改讓狀態更清楚,另外就是刪除所有 Cookie 不會保留 Google 的了,以上這些修改都要等十月中的 Chrome 70。

最後就是,隨著這次事件才注意到有ungoogled-chromium這個專案啊。


Intrinsic Size 媒體寬高比

HTML 文件在編寫插入<img>時,通常都會順便加上寬高的資訊,早期這樣做除了指定圖片呈現時的大小外,還有一個好處是提升頁面繪製的速度,不用在圖片讀取好、知道實際寬高時,又重新排版重畫版面,不過這個狀況在用 CSS 設定動態寬度時,就又回到原點了,像是設定width: 100%;這種,因為沒辦法設定相對於圖片寬度的高度值,所以瀏覽器只能自己先隨便決定一個高度,等圖片抓好再重排一次。

一直以來這問題都沒好的方案處理,在排版上比較多人採用的是外面多一層 block 元素然後用padding-top來把空間先佔好,不過這也只算是個替代方案,真的要處理應該還是要從 HTML 或是 CSS 下手,然後前兩天才終於看到有個不錯的方案 Chrome 要來實做了,叫做Intrinsic Size

<img intrinsicsize="250 x 200" src="cat.jpg">

就是一個長乘寬的概念,中間那個乘號其實是小寫的x,然後提供的長寬資訊其實是等於預先給的 naturalWidth、naturalHeight,為什麼不用 aspect ratio 呢?在提案的文件裡面其實都有寫到,基本上就是這種設計提供的資訊更多,有更多好處,例如都沒設定寬高時,可以拿intrinsicsize來先用之類的,intrinsicsize目前設計只能用在圖片和影片上,Chrome預計在 71 的時候推出這個功能,也已經做好有貓測試網頁了,感覺一切都箭在弦上了,不過這新提案在 WICG 上幾乎沒討論,提案者是 WICG 也是 Chromium 成員就是,另外就是另外三家的 web platform status 都還查不到,並且,其實也有一個 CSS 的aspect-ratio提案,所以到底會怎樣還很難說啊(不過我覺得是會變標準啦)。


Extensible Web at 2018

2013 年有一份 Extensible Web 宣言,簽署人同意致力於開發 Web Platform 更底層的介面,讓開發者可以自己擴展 Web Platform,而構成 Web 介面的基本三要素其實就是 HTML、CSS、JavaScript。

其實我在當時就覺得很奇妙,我可以想像的到開發者自己擴充 HTML 標籤,不過卻想像不出來到底 JavaScript 和 CSS 要如何讓開發者擴充,沒想到今天回過頭來看,整個網路標準的發展方向真的是有在朝這方向前進,首先來看 HTML 的部分,其實就是Web Component,包括了 Custom Element、Shadow DOM、Template、HTML Import 等標準,透過這些新的 Web API,開發者很容易就可以做出可重複利用,有自訂行為的自製標籤了。

JavaScript 的部分,其實在上一篇文章介紹那一串 ES6 新功能的最後,有提到 meta programming 的新功能,雖然不是完完全全想擴充什麼就擴充什麼,但是 JavaScript 確實是慢慢的有些可以讓開發者比較深入底層的介面可以用。

最後 CSS 的部分,就是 CSS Houdini 了,Houdini 其實就是史上最偉大魔術師胡迪尼,從名稱就可以感受到這個東西有多 magic 了,其實 Houdini 不是一個標準,而是一個W3C Working Group,他們主要的目標就是建構出一整套 API 讓 CSS 可以擴充,而目前也已經有些成果了,我自己是看了去年一場演講的影片才對 Houdini 有了初步的認識:

現在最主要是已經有 Chrome 把 Paint API 實做出來,所以已經可以用 Canvas 畫圖了,雖然整個計畫離完成還要很久,不過看到 CSS 真的可以開始擴充了,還是覺得很 Magic~

Image Source:https://imgur.com/gallery/YsbKHg1


Web Platform

這篇記錄一下現在主要四個瀏覽器核心對於新標準的支援計畫的狀態網站,不然每次都要重新查。

Chrome 的應該是最多人看過,其實看過這個就能了解現在幾乎是無法從 0 開始開發一個瀏覽器了,Google Chrome 從 WebKit 的基礎開始,到現在也花了十年。


Web 前端文章廣播服務 ofrontend

frontend-news

前陣子弄了一個 web 前端文章的廣播服務,現在沒有正式的服務名稱,不過 code base 和一些帳號都叫ofrontend,所以就先這樣稱呼它吧,現在這服務有兩個末端:

會轉發的文章主要就是我看到和前端相關的為主,也會有少量其他的技術文章,大約 80% 英文、20 % 中文,不過不一定是我讀過覺得要推薦的,也是有過一些剛看標題覺得好像不錯,結果找到時間看完覺得沒什麼的文章,不介意的話可以 follow 一下。

目前資訊來源包括了:

會做這個服務有幾個原因,一個是我其實本來就有在轉發前端相關的文章連結,不過大多丟在一些非公開的地方,並且這些文章連結都沒好好整理,一直都有想找個書籤服務弄起來,然後這陣子看到灣區日報吹水 Just Share覺得也可以來做類似的傳播管道,研究和思考了好一陣子,最後決定花錢訂閱了個Pinboard服務來收集和管理連結,Pinboard 雖然介面沒找什麼設計師,看起來很陽春,不過其實他還蠻靈活的,API 很簡單可以用,不用 oauth,只要帶 token 發請求就可以,和 Telegram Bot 蠻像的,所以其實也不少工具可以用,Android、iOS、Firefox 都有,隨時看到相關的文章都可以很快的把連結丟進 Pinboard。

連結進 Pinboard 之後,就有個轉發的工具來把這連結丟去 Twitter 和 Telegram,轉發的程式也放在 GitHub 上,叫pinboardto,Python 寫的,本來有想趁機玩玩看 Rust,不過研究一下覺得還是先用 Python 把基本款弄出來,裡面東西很簡單沒什麼技術難題,並且不依靠外部儲存(資料庫、檔案),同步的機制是靠系統時間和 cronjob,所以不知什麼原因錯過就錯過了,不過因為這服務也沒有這麼要求可靠性,所以還好。

Facebook 的部分,本來有想接到 Fire-and-Forget 前端轉貼總部 去的,可是 FB 那邊弄不到永久有效的 token 就放棄。

最後成本部分,這個服務其實對我來說蠻低成本的,主要固定支出就只有 Pinboard 的年費,不過本來就要好好收集算是本來就要花,轉發服務掛在現有的主機上,最後就是 iPad 上有花錢買一個 Pinboard 的 app,不過其實也還沒有滿意就是,不知道為什麼抓 Twitter 的網頁 title 都會抓錯。


GitHub Pages Custom Domain HTTPS

GitHub Pages

等了好久終於出來的功能,追了蠻久,昨天 DK 也有提到,其實正式發佈前就看到有人已經可以用了,不過總之這篇稍微記錄一下如果已經是舊有的 GitHub Pages 還不能用可以怎麼處理,不過不完全有效,舊有的專案在設定看起來會像是:

GitHub Pages

下面有寫說因為用了 custom domain 就不能用,這時候把 custom domain 刪除,然後儲存重新加回去就會變成:

GitHub Pages

然後就等,我大概是等到隔天就有了(變成第一張圖的狀態),不過這幾天剛好完全沒空,到現在才有空檔紀錄一下。


TFN 域名轉出

dig markdown.tw,

我的 markdown.tw 在 TFN 註冊的,其實一直很想轉出,但是很怕轉的過程出意外,遲遲沒動手。不過剛剛看到 GitHub Pages 用 custom domain 也正式支援 HTTPS 了,如果是設定 A record 的話需要更新 DNS 設定,於是我就決定認真的來處理這件事,不意外的介面很難理解,決定記錄一下幫助眾生~

閱讀「TFN 域名轉出」全文

此類別所有文章