在 Hacker News Daily 上看到「Web Data Render」這個有趣的東西,這個網頁本身是個 JSON,透過一些技巧載入 javascript 後就可以讀取資料 render...

不過網頁本身就不是合法的 HTML 了:「Showing results for https://webdatarender.com/」,只能算是個有趣的作法...
幹壞事是進步最大的原動力
在 Hacker News Daily 上看到「Web Data Render」這個有趣的東西,這個網頁本身是個 JSON,透過一些技巧載入 javascript 後就可以讀取資料 render...
不過網頁本身就不是合法的 HTML 了:「Showing results for https://webdatarender.com/」,只能算是個有趣的作法...
目前我在 blog 上使用 Imgur 的圖檔主要是用 WebP 格式,然後針對不支援 WebP 的瀏覽器 (主要就是蘋果家的 Safari) 是用 JavaScript 換回 JPEG 格式...
昨天早上看到「AVIF has landed」這篇,提醒我有 <picture>
這個原生支援的方式可以用,翻了一下 Can I Use 上面的支援程度,看起來除了 IE11 以外幾乎都支援了 (參考「Picture element」),而且 IE11 應該也會因為語法的關係走到正確的 JPEG fallback,大概是這樣:
<picture> <source type="image/webp" srcset="https://i.imgur.com/xxxxxx.webp" /> <img src="https://i.imgur.com/xxxxxx.jpg" alt="" /> </picture>
換完後來觀察看看...
一樣還是 Hacker News Daily 上看到的東西,不過這個東西主要就是趣味性為主而已。這次看到的是純 HTML + CSS 做出來的踩地雷 (Minesweeper),沒有 JavaScript 在內:「css-sweeper from PropJockey」。
自從 HTML + CSS3 證明是 Turing-complete 後,再加上 CSS 本身又一直加各種互動性質的操作,出現這些東西好像不太意外就是了 XDDD
依照他的說明,這邊用到的 CSS 技巧主要是 Space Toggle 這個技巧 (也就是 --toggler
這個),但試著找了對應的文獻說明居然沒翻到,有人可以給個 hint 嗎...
在「html-to-svg」這邊看到的,專案在 GitHub 上的「as-a-service/html-to-svg」這邊。
整個服務的程式碼其實很短 (大約 50 行?),因為主要的業務是透過 Chrome (headless) 生出 PDF 檔,再用 Inkspace 把 PDF 轉成 SVG:「htmltosvg.js」。
主要是 Inkspace 可以做 PDF 轉 SVG 這件事情算是新知...
這次 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 — 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 沒支援。
在 Hacker News Daily 上看到 mgartner/pg_flame 這個專案,可以把 PostgreSQL 的 EXPLAIN
結果 (JSON 格式) 轉成 Flamegraph (用 HTML 呈現):
不過我是直接看 EXPLAIN
的輸出比較習慣... 但如果需要做投影片的時候,應該是個好工具?
「HEAD - A free guide to <head> elements」這篇整理了 HTML 裡 <head> 的標準,以及網路上夠大的廠商所定義的標準 (另外還把中國的瀏覽器也拉出來)。
從目錄就可以看出來講了哪些:
另外一種看法就是,你要怎麼樣讓你的 <head> 塞滿垃圾然後變得很肥... XD
現在 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 上讀到就當作讀取失敗。