分析現在還有多少不安全的 JavaScript Library 被使用

在「Thou shalt not depend on me: analysing the use of outdated JavaScript libraries on the web」這邊看到對 JavaScript Library 的研究。

jQuery 沒有什麼疑問的還是最大宗,查了一下應該是 CVE-2011-4969 的影響,對 jQuery 1.6、1.6.1、1.6.2 三個版本有影響。

另外也提到了 hosting 的部份,可以看到 Google Hosted Libraries 還是佔有最高的比率。

簡易的 jQuery CSS Selector 替代品

在追 refined-twitter 程式碼的時候,在「refined-twitter/extension/content.js」這邊看到:

const $ = document.querySelector.bind(document);

這樣就可以拿 CSS Selector 掃出元件,程式變得比較好讀... 當然,這個方式不是 fluent interface,沒辦法再依樣串下去。

Google 查了一些資料,看起來至少從 2013 年就有這個技巧了。

jQuery 2.2 與 1.12 釋出

jQuery 放出 2.2 與 1.12,預定是 3.0 前的最後一個 major release,之後不會加 feature 了:「jQuery 2.2 and 1.12 Released」。

主要的效能改善來自一年前對 Sizzle 的 patch:「Check existing selector cache and skip matchesSelector when possible · Issue #315 · jquery/sizzle」,針對 :visible:hidden 的效能改善,速度大約是原來的 17 倍:

Performance of the selector engine has improved thanks to a shortcut path that immediately uses precompiled Sizzle selectors when the selector cannot be processed by the native querySelectorAll or matchesSelector methods. This results in a significant speedup in some real-world cases.

距離上次出版 2.1.4 與 1.11.3 好久了 (2015 年 4 月的事情):「jQuery 1.11.3 and 2.1.4 Released – iOS Fail-Safe Edition」。

用 jQuery Audit 在 Google Chrome 的 Developer Tools 看到 jQuery 的資料

在「jQuery Audit lets you analyze jQuery from Chrome Developer Tools」這邊看到 jQuery Audit 這個 Google Chrome 的套件。這個套件讓你在 Developer Tools 裡看到 jQuery 的資料:

在大家都用 jQuery 操作的情境下,這個套件超好用...

Usability 測試的 bookmarklet

在「Usability: Don't Make Me Think and a Bookmarklet」這篇文章裡作者在讀了「Don’t Make Me Think, Revisited」之後有所啟發,寫了一小段 javascript code,可以將網頁上所有文字都變成同樣長度的亂碼,藉以測試許多 usability 特性。

我把程式碼丟進 yui-compressor 後變成這樣,比較容易貼到 bookmarklet 上使用:

javascript:(function(){var a=" ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";$("*:not(iframe)").contents().filter(function(){return this.nodeType==Node.TEXT_NODE&&this.nodeValue.trim()!=""}).each(function(){var c="";for(var b=0;b<this.nodeValue.trim().length;b++){c+=a.charAt(Math.floor(Math.random()*a.length))}this.nodeValue=c})})();

不過這段程式碼假定頁面上有 $ 這個 object (i.e. jQuery),所以我把程式碼改成吃 jQuery 這個 object,這樣確保 jQuery.noConflict() 後的網站還是可以動:

javascript:(function(){var a=" ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";jQuery("*:not(iframe)").contents().filter(function(){return this.nodeType==Node.TEXT_NODE&&this.nodeValue.trim()!=""}).each(function(){var c="";for(var b=0;b<this.nodeValue.trim().length;b++){c+=a.charAt(Math.floor(Math.random()*a.length))}this.nodeValue=c})})();

效果如下,還蠻有趣的:

關閉 Plurk 的 embed thumb 功能

Plurk 上的 embed thumb 功能 (我不知道怎麼稱呼比較好) 讓我沒辦法用 Ctrl 加上滑鼠左鍵一路把圖片點開,所以就想寫個 Greasemonkey script 搞定他...

最一開始的想法是把事件幹掉 (也就是 .pictureservices, .videoservices, .ogvideo, .iframeembed, .plink 這串),所以第一版的時候是直接用 unsafeWindow.jQuery 把事件 off() 掉,但後來想一想這樣有幾個問題:

  • 網站改版時動到這邊的 class name 會失效,即使是只有增加...
  • 安全性問題,unsafeWindow.jQuery 不保證是原版的 jQuery,在 Greasemonkey 有不少權限,雖然後來有被 @grant 強化過,不過能避免還是想避免。

所以就改成現在這個版本,直接在 body 上攔截,擋下對這五個 class 的 click event:「Disable Plurk multimedia thumb functuion」。

也許改寫 thumb function 本身會更好,不過先這樣吧 XD

jQuery 官方在 2014 年的概況

在「jQuery Foundation 2014 Annual Report」這篇裡面有提到了 jQuery 在 2014 年的情況,其中 code.jquery.com 使用的頻寬這段還蠻有趣的:

If you need evidence that jQuery Foundation projects are used everywhere, look no further than our Content Delivery Network (CDN) powered by MaxCDN. The 290 billion requests in 2014 transferred nearly 11 petabytes of data. That, of course, does not include the requests for locally hosted copies of jQuery and to other CDNs such as Google, Microsoft, or CDNJS. No doubt the overall number of requests is in the trillions.

光是 code.jquery.com 每天的量平均就是 30TB,也就是平均流量 3Gbps?如果考慮到 Google 提供的平台更普及...

jQuery 1.11.2 與 2.1.3 修正 iOS 8 上 Safari 7.1/8 的嚴重 bug

看到 jQuery 官方放出一個特別更新,專門為了 iOS 8 + Safari 7.1/8 的修正:「jQuery 1.11.2 and 2.1.3 Released – Safari Fail-Safe Edition」。

依據「Test failure on iOS 8: child and adjacent -> p#firstp + p」的說明,死在 document.querySelectorAll("p#firstp + p") 這邊,另外以下的 selector 也都掛掉:

p#a + p
p#a ~ p
.b#a ~ [id]
[style]#a ~ p

由於這個用法太基本,讓 jQuery 官方決定在 library 放 workaround 修正這個問題...