Tag: html

網頁本身是個合法的 JSON 的展示

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

不過網頁本身就不是合法的 HTML 了：「Showing results for https://webdatarender.com/」，只能算是個有趣的作法...

用 picture + source + img 替代本來的 JavaScript 替換

目前我在 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>

換完後來觀察看看...

用純 HTML + CSS 做出來的踩地雷...

一樣還是 Hacker News Daily 上看到的東西，不過這個東西主要就是趣味性為主而已。這次看到的是純 HTML + CSS 做出來的踩地雷 (Minesweeper)，沒有 JavaScript 在內：「css-sweeper from PropJockey」。

自從 HTML + CSS3 證明是 Turing-complete 後，再加上 CSS 本身又一直加各種互動性質的操作，出現這些東西好像不太意外就是了 XDDD

依照他的說明，這邊用到的 CSS 技巧主要是 Space Toggle 這個技巧 (也就是 --toggler 這個)，但試著找了對應的文獻說明居然沒翻到，有人可以給個 hint 嗎...

HTML 轉 SVG

在「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 的修正，補 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 上讀到就當作讀取失敗。