看到「jjkaufman/wiv.js」這個專案，然後點開他的 Demo Site「The web site of coughdrop」後笑出來，這把 2000 年網站的特色做到極致了... XD
看程式碼可以看到主體是在 canvas 上操作，然後用 requestAnimationFrame 產生。
Tag: html
Home » Posts tagged "html"
MDN 上的 CSS Layout cookbook
在 MDN 上看到「CSS Layout cookbook」，目前整理了六種情境，包括了設計方式與瀏覽器的支援度。
看到「Center an element」有種苦笑的感覺啊... 以前弄這個都是 workaround，現在都有對應的 CSS 可以處理了。
把 Trac 改成 Form Login 後 XMLRPC 不會動的問題...
我自己再用的 Trac 本來是走 HTTP 的 Authorization header 登入，但這樣每次重開瀏覽器就要登入一次，覺得麻煩... 就想要找套件改成用 HTML form login。
目前比較有在維護的應該是 AccountManagerPlugin 這套，內建就支援本機密碼，也支援 plugin 掛其他外部服務進去。
但掛進去後發現本來的自動開票機 (i.e. 用 crontab 開票) 就沒辦法登入了，最後找到得用 HttpAuthPlugin 處理。這個套件一開頭就寫了他也是為了 XmlRpcPlugin 而寫的：
This plugin allows you to protect certain paths with HTTP authentication. The AccountManagerPlugin is used to check passwords.
Primarily this is meant to be used with the XmlRpcPlugin, so it will work while using AccountManager's form-based logins.
就是遇到同樣的問題...
RFC 的 Feed...
想說應該有這樣的東西，就找到「https://tools.ietf.org/html/new-rfcs.rss」這頁，本來以為直接就是 RSS feed 了 (因為網址)，一打開來發現看起來像是個網頁，結果最上面這樣說明：
Don't panic. This web page is actually a data file that is meant to be read by RSS reader programs.
馬上打開來看 page source code，果然是 XSL！
<?xml-stylesheet title="CSS_formatting" type="text/css" href="css/rss.css"?> <?xml-stylesheet title="XSL_formatting" type="text/xml" href="rss2html.xsl"?>
好久沒看到這個了，大概是十年前想要做到資料與效果分離 (client-side rendering) 的方式...
相對路徑的攻擊方式 (Relative Path Overwite，RPO)
在「Large-scale analysis of style injection by relative path overwrite」這邊看到的，記得這個方式不是新方法，不過還是有人會中...
這種攻擊是組合技，基礎是引用 css 或是 js 時使用相對路徑 (像是 static/style.css 這樣的引用法)，再加上 https://www.example.com/a.php 這樣的頁面通常也可以吃 https://www.example.com/a.php/，甚至是後面再加東西... 在某些情境下組不出來，但精心策劃後就有機會在頁面上弄出奇怪的 xss 或是其他攻擊了。而論文內列出了常見的的組合：
然後拿 Alexa 的排名來看，其實還是有些站台可以打：
防禦的方式也不算太難，absolute path 是個還不錯的方式：
One option is to use only absolute URLs, taking away the relative path expansion.
而 base tag 也是個方式 (不過在 IE 上還是有問題)：
Alternatively you can specify a base tag, though Internet Explorer did not appear to implement the tag correctly (i.e., was still vulnerable) at the time of the evaluation.
另外作者也提到了 document type 的方式 (看起來是建議用 html5 的 <!DOCTYPE html>)，然後 IE 另外做些處理避免失效：
One of the best mitigations is to avoid exploitation by declaring a modern document type that causes rendering in standards compliant mode. This defeats the attack in all browsers apart from IE. For IE it is also necessary to prevent the page being loaded in a frame by using X-Frame-Options , using X-Content-Type-Options to disable ‘content type sniffing,’ and X-UA-Compatible to turn off IE’s compatibility view.
不過大型站台本來就因為業務需求，會把 asset domain 切開 (然後透過 CDN 加速)，而且會設計系統讓 programmer 很容易使用這樣的架構，反而因此比較不會用到 relative path，中這個攻擊的機會就低多了...
透過類神經網路，直接把圖變成 HTML
看到 GitHub 上的「emilwallner/Screenshot-to-code-in-Keras」這個專案，直接把圖片轉成 HTML。介紹的文章則是「Turning Design Mockups Into Code With Deep Learning」。
有點像是「將 Sketch 輸出成 iOS/Android 的程式碼」與「透過 NN (類神經網路) 訓練好的系統，直接把圖片轉成程式碼」(後面這篇剛好在介紹文章裡也有提到)。
愈來愈有 NN 在逐步取代人類工作的感覺了...
HTML 5.2？
W3C 推出 HTML 5.2，新的 W3C Recommendation...
但網頁開發已經沒有人在管 W3C 的 HTML X.Y 了 (像是之前的 HTML 5.1)，大家都是直接翻資料查某個 feature 的支援度來決定能不能用，像是翻 Can I use... 或是翻 MDN。
就隨便看看吧... o_o
在網頁上看 arXiv 的論文
Hacker News Daily 上看到的服務「Arxiv Vanity – Read academic papers from Arxiv as web pages」：
Arxiv Vanity renders academic papers from Arxiv as responsive web pages so you don’t have to squint at a PDF.
不過實際測試發現只有有提供 TeX 格式原始檔才有辦法轉，沒提供的就不行了...
直接在網頁上使用 WebTorrent
看到 GitHub 上的「mikeal/webtorrent-component」這個專案，可以很方便直接嵌入 BitTorrent 的資源，像是這樣嵌：
<script src="https://cdn.jsdelivr.net/npm/webtorrent-component@latest/dist/webtorrent-component.min.js"></script> <web-torrent src="magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent" file="Sintel.mp4" />
如果拿來跟「Using BitTorrent with Amazon S3」用的話可以在量大的時候省一些頻寬，並且在量小的時候還是維持有 seed (透過 Amazon S3 的服務做)。
透過 NN (類神經網路) 訓練好的系統，直接把圖片轉成程式碼
這個禮拜被 AlphaGo 洗臉後，又看到來搶工作的東西了：「pix2code: Generating Code from a Graphical User Interface Screenshot」。
直接把 Mockup 圖檔丟進去，然後就把 iOS 或是 HTML 程式碼生出來：
不過「刻 UI」的確是工程師最討厭的事情啦，這部份能自動化要怎麼說呢... 好像也是不錯的事情啦 @_@