在「html-to-svg」這邊看到的，專案在 GitHub 上的「as-a-service/html-to-svg」這邊。
整個服務的程式碼其實很短 (大約 50 行？)，因為主要的業務是透過 Chrome (headless) 生出 PDF 檔，再用 Inkspace 把 PDF 轉成 SVG：「htmltosvg.js」。
主要是 Inkspace 可以做 PDF 轉 SVG 這件事情算是新知...
Tag: html
jQuery 3.5.0 的修正，補 XSS 漏洞
這次 jQuery 3.5.0 修正了一個安全性漏洞：「jQuery 3.5.0 Released!」，不過實測了一下，不完全算是 jQuery 的自己出的問題，比較像是幫使用者擦屁股。
jQuery 的說明如果看不懂，可以交叉參考「XSS Game」這篇的說明，搜尋 htmlPrefilter 應該就可以看到了。
這次修正的函數是被 html() 用到的 htmlPrefilter()，這個函數會在 3.5.0 之前會把 <tag/> 這樣的元素轉成 <tag></tag>，而 3.5.0 之後會保留本來的形式。
利用這個特性，就可以用這樣的字串來打穿 WAF：
<style><style/><script>alert(1)<\/script>
原因是 WAF 在看到時會以為 <script> 是 <style> 內部的 data 而認為不是 XSS 攻擊而穿過 WAF 的檢查，但實際上被 jQuery 展開後變成：
<style><style></style><script>alert(1)<\/script>
而最前面的 <style><style></style> 被當作是一包，後面的 <script> 就成功被拉出來執行了。
這是相同程式碼使用 jQuery 3.4.1 與 jQuery 3.5.0 的差異，我把 alert(1) 改成 document.write(1)，比較容易在 JSFiddle 上看出差異：
不過回過來分析，會發現一開始用 html() 才是問題的起點，要修正問題應該要從這邊下手，而不是用 WAF 擋...
MVP.css
看到「MVP.css — Minimalist stylesheet for HTML elements」這個，目標是只需要寫 semantic html，剩下的就交給 css 處理：
No class names, no frameworks, just semantic HTML and you're done.
這種專案主要是看樣式喜不喜歡，畢竟選這種方案主要目的就是「懶」而不是要做太多效果，之後有機會來用看看...
讓手機上瀏覽器自動帶出數字鍵盤的方式
在「HTML attributes to improve your users' two factor authentication experience」這邊看到關於讓使用者輸入 2FA (通常是數字) 比較流暢的設定。
原始是上面這張這樣，目標是希望下面這張這樣，當透過 SMS 2FA 時可以提供選項直接貼上，而且也自動帶出數字鍵盤：
給出的幾個重點在於 inputmode、pattern 以及 autocomplete：
<input type="text" name="token" id="token" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" />
查了一下 caniuse.com 上面的支援度，pattern 基本上都支援了，autocomplete 在這邊用到的 one-time-code 基本上也沒問題，只有 inputmode 這邊支援度比較差，IE11 (基本上不會更新了)、Firefox 與 Safari 沒支援。
把 PostgreSQL 的 EXPLAIN 轉成 Flamegraph
在 Hacker News Daily 上看到 mgartner/pg_flame 這個專案，可以把 PostgreSQL 的 EXPLAIN 結果 (JSON 格式) 轉成 Flamegraph (用 HTML 呈現)：
不過我是直接看 EXPLAIN 的輸出比較習慣... 但如果需要做投影片的時候，應該是個好工具？
HTML 裡 head 的整理...
「HEAD - A free guide to <head> elements」這篇整理了 HTML 裡 <head> 的標準，以及網路上夠大的廠商所定義的標準 (另外還把中國的瀏覽器也拉出來)。
從目錄就可以看出來講了哪些：
另外一種看法就是，你要怎麼樣讓你的 <head> 塞滿垃圾然後變得很肥... XD
Chrome 將不會在 HTTPS 頁面上載入 HTTP 資源...
現在 Google Chrome 的穩定版是 77，到了十二月會推出的 79 的時候，就會有一連串的避免 HTTPS 頁面使用 HTTP 資源的措施：「No More Mixed Messages About HTTPS」。
首先是 79 的時候會有新的界面，讓使用者可以修改阻擋類的設定。
到了 80 的時候會試著將 HTTP 的影音 <audio> 與 <video> 升級到 HTTPS 連線，如果 HTTPS 讀不到的話就當作讀取失敗。但圖片 <img> 的部份則是會讀進來，只是安全性上會顯示 Not Secure。
到了 81 就是這系列的最終階段，包括 <img> 也會一使用 80 時影音的邏輯，沒辦法在 HTTPS 上讀到就當作讀取失敗。
Hacker News
早上看到「Tell HN: Thank you for not redesigning Hacker News」這篇，作者在網路速度受限的地區，上各種網站幾乎都不會動，但 Hacker News 沒有改用一堆前端框架，而是保留使用 HTML 反而讓頁面維持極小：
I’m currently in a country with low speed internet and the entire ‘modern’ web is basically unusable except HN, which still loads instantly. Reddit, Twitter, news and banking sites are all painfully slow or simply time out altogether.
To PG, the mods and whoever else is responsible: thank you for not trying to ‘fix’ what isn’t broken.
順手開了一下網路工具來看，發現單一元件最大的居然是 favicon XDDD：
照 Wikipedia 上列出來的相容性，如果只支援 IE11+ 的話，看起來可以改用 PNG，大小就已經有明顯的改善了：
-rw-r--r-- 1 gslin staff 7527 Sep 2 09:50 favicon.ico -rw-r--r-- 1 gslin staff 2598 Sep 2 09:51 favicon.png
補上 WordPress 編輯器的 accesskey
在 WordPress 編輯文章時我還是習慣用傳統編輯界面自己修改主要的 html tag，像是這樣：
上面那些按鈕在很久以前的版本透過 accesskey 用鍵盤快速輸入各種連結與效果，但後來就被拿掉了... 不過可以在「Adding WordPress Custom QuickTags」這邊看到一些文章有提到過。
研究了一下 WordPress 的 minimal plugin 有哪些東西，看起來也不難寫，就花了些時間用 js 操作，這樣編輯起來方便多了... 程式包起來放到 gslin/wp-editor-accesskey 上，有需要的也可以拿去用，不過我猜現在還這樣寫文章的人不多了...
把 HTML 資料都塞到 URL 裡的服務
如標題說的，專案叫做「URL Pages」，是一個把 HTML 的原始碼都放到 url string 裡的服務。服務本身可以在 http://jstrieb.github.io/urlpages 這邊使用。
現在網路上有很多地方可以塞 demo page (像是 GitHub 自己提供的 GitHub Pages)，這個方式需要依賴 JavaScript 提供各種轉換機制，應該會有不少 side-effect bug，看起來會有不少技術瓶頸，就當作是個實驗性質的專案來看，真的需要放 demo page 的還是可以隨便找空間放比較簡單，像是前面提到的 GitHub Pages 其實可以直接在 GitHub 的網頁上操作...