Mozilla Taiwan 正體中文在地化

WAI-ARIA 全名是 Accessible Rich Internet Applications Suite，是 WAI 正在制定中的規範之一，對象是網路應用程式，像是 gmail、各種 CMS 等，它在WAI 制定的各種規範中，是唯一縮寫名稱用 WAI- 開頭的，一直很好奇為什麼，前幾天寫信去問也得到了答覆：

Short answer: Because the acronym ARIA is used for other things, we use WAI-ARIA.

結果和 J長輩 猜的一樣是因為 A R I A 太常見了，所以加上 WAI- 。

稍早不久前（1/25 及 2/2 日），Mozilla 從 Firefox 附加元件網站中，移除了兩個內含 Windows 木馬的擴充套件「Sothink Web Video Downloader」及「Master Filer」。從此事件中，或許有些人會覺得疑慮，Mozilla Firefox 是不是已經不再安全了？我們以較為安全的理由來推廣 Firefox，是不是已經失去其說服力？更甚之：Firefox 的安全神話是否已經破滅？

對我而言，答案是否定的。相較於市面上最普遍的 IE 而言，Firefox 的安全性仍然遠遠超出其之外，也不輸給其餘網路瀏覽器。我的兩點理由如下：

一、較高的漏洞修補率：上個月駭客透過 IE 漏洞入侵 Google 及其餘公司，導致 多國政府呼籲改用它種瀏覽器 的事件至今仍未落幕；而 Firefox 在 Secunia 公司弱點資料庫的修補率，包含 Firefox 3.0、3.5、3.6 皆為 100%（Opera 10 與 Google Chrome 4 亦同 ）在此同時，IE6、IE7、IE8 則為 83%、74%、56%。微軟已承認，此次事件中被使用的 IE 漏洞早在去年九月已發現，修補時程卻排到今年二月，此等疏忽令人無法相信。

二、原始碼受大眾檢視：Firefox 的開放原始碼開發模式，使得程式中每一行指令都能公開在陽光底下讓人檢視，漏洞與弱點更容易被發現，沒有一絲容許作惡指令的空間存在。相較於封閉原始碼的 IE 及 Opera 而言，我更相信其安全性。

Firefox 最大的特色是透過擴充套件，提供各式各樣五花八門的新功能，如此的自由同時也伴隨著極大的風險而來。如果套件作者心存惡意，不但有能力把 Firefox 搞壞、偷得瀏覽器中你的私人資訊、甚至還能直接破壞電腦中的其餘檔案。

這同時也是使用其餘瀏覽器時，最令人擔憂的地方。試想，要是你用 IE 上網（KKman、PCMan 等使用 IE 核心的瀏覽器亦同），到某個你常去的網站，此時跳出「你必須更新瀏覽器元件，才能繼續瀏覽本網站：確定」，你會直接按下確定安裝嗎？這個訊息是真的嗎？其中被偽造的風險有多大？

在套件所帶來的這個問題上，Mozilla 透過了附加元件網站的驗證與人工的審核，來替大家把關。

當套件作者上傳新的套件或者新版本時，Firefox 附加元件網站會自動進行 12 項測試，包含了一般驗證、在地化測試與兩組安全性測試，包含：不安全 JavaScript 測試、不安全設定測試、遠端 JavaScript 測試、常見函式庫 Checksum 測試、標記程式碼片段、Geolocation 檢查、Conduit 工具列檢查等安全性方面的測試。如果套件中夾帶了已知的有害程式碼、或者因為作者的疏忽導致程式有一些已知的不安全問題，在這一步就會被阻擋下來。（測試過程如下圖，詳細的說明在此）

當上傳的檔案通過這些自動測試後，才能完成上傳動作，成為元件網站的「實驗中套件」。您在安裝這些實驗中套件時，都需要先勾選「讓我安裝這個實驗中的套件」，意義即表示：雖然這個套件已經通過自動測試，但是仍未經過人工檢查程式碼；你最好確定套件作者足以信任。

此次被抓到的兩個惡意套件，從 Google 頁面存檔看來（一、二），就都還是實驗中套件。雖然它們躲過了自動檢查程式，而上到 Firefox 元件網站，但這個檢查程序的弱點，附加元件網站已經完成修正，提昇掃描的能力，也針對網站上的所有套件重新進行了完整測試。

在 Firefox 3.5 新增的附加元件管理員中，可以直接搜索套件並安裝，但無法搜索到實驗中套件，理由也一樣，能避免使用者不慎安裝到可能有問題的套件。

當「實驗中套件」要提昇為正式套件時，套件作者必需先提出申請，接著會有審核者人工檢查其程式碼，確認是否符合公開的條件，包含：已經實驗一段時間、有得到使用者的意見回應、程式碼中無惡意或間諜程式、套件功能不違法、不涉及色情……等（詳細審核項目說明），當審核者確定套件的確是無害且安全無虞的，才會批准其申請，而這個過程每次上傳新版時，都要重新進行一遍。

我個人寫的套件 PlacesCleaner 收藏庫清潔工，第一版從申請到成為正式套件大概花了兩個月，最近幾個更新也都需時一兩個禮拜，每次的審核者都有所不同，也同時確保了審核的品質。

因此，我敢如此說明：如果你從 Firefox 附加元件網站 或附加元件管理員中安裝（非實驗中）套件，都是安全無虞的，也不會有遇到此次這種惡意套件的機會。除非你是從其他網站（論壇、套件作者個人網站）手動下載並安裝套件，才會有危險性。我認為這種從非官方網站安裝套件的動作，能免則免！

Firefox 3.6 中新增了一項功能，在更新時會檢查常見的瀏覽器元件（Plugin）版本，包含了 Flash、QuickTime、Silverlight、Java……等常見元件。如果所使用的版本過舊，檢查頁會顯示出來，建議你下載更新。這些 Plugin 為非 Mozilla 的其他廠商所寫，雖能增添 Firefox 的影音支援等功能，但也常常包含了不少安全性漏洞與錯誤，有時也會造成 Firefox 的當機等問題。例如 Flash 9 釋出至今三年多，也已修正了數十個漏洞，因此隨時保持 Plugin 更新，也是維持上網安全重要的一環。（前往 Firefox Plugin Check 頁面）

針對此次 Firefox 有害套件事件，我所提出的建議是：使用 Firefox 本身的附加元件管理員，或者在 Firefox 附加元件網站 安裝套件；除非您信任該作者，否則請不要輕易安裝實驗中套件；除了 Firefox 附加元件網站及管理員外，不要透過任何其餘網站手動下載並安裝套件（包含 MozTW 的論壇），如此即可享受各式各樣 Firefox 套件的功能，同時將擴充套件伴隨的風險降到最低。

下載與安裝 Firefox 時，請認明 Mozilla 官方網站、MozTW 或 抓火狐網站。除非確認安全，請避免使用各式非官方版的 Firefox。雖然我們推薦大家升級到最新的 Firefox 3.6，Mozilla 仍會持續提供 Firefox 3.5 及 3.0 的安全性更新。Firefox 3.0 以下版本已經進入停止支援狀態，請儘速升級到 3.0 以上版本。

使用者上網瀏覽時的安全性，是 Mozilla 最重視的一環（另一環是開放標準）。每次 Firefox 的更新都會針對安全性進行提昇：Firefox 2.0 的詐騙網站偵測、3.0 的「海關男」網站識別資訊、3.5 的隱私瀏覽模式、3.6 的過期 Plugin 偵測等，在在都強化了安全性並提昇隱私保護。

針對 Firefox 本身的漏洞與弱點，Mozilla 公司與全球的程式設計師，都會在發現的第一時間儘速修補、並釋出安全性更新。因此我敢以 Mozilla 全球社群的一份子、MozTW (Mozilla Taiwan) 成員、Firefox 擁護者及開源軟體愛好者的身份向您保證：使用 Firefox 上網的安全性，仍是毋庸置疑的！

請安心使用，並祝瀏覽愉快。

Security Issue on AMO « Mozilla Add-ons Blog
ZDNet Taiwan - Mozilla 示警 移除有毒外掛
iThome online : 不肖人士利用 Firefox 散播廣告程式及木馬
Mozilla Links 正體中文版: 世界各國相繼建議別用危險的 IE，你換了嗎？！
T客邦 | IE有漏洞事件讓 Firefox 和 Opera 下載量大增

隨著 Firefox 3.6 釋出，Mozilla 修好了兩個 Firefox 3.5 在 Mac OS X 10.6 中討厭的 bug：

第一個是「眼睛」bug，如同上圖所示，雪豹中的 Firefox 3.5，只要使用蘋果儷中黑字體，在任何網頁上遇到「睛」這個字，就會前後文疊在一起。原因是雪豹的 ATSUI 遇到本來就有問題的蘋果儷中黑字體，因此就爆炸了，在 Bug 532346 中有更詳細的說明，如果想知道你的 Firefox 還有沒有這個問題，可以開啟 測試頁 看看。

經過測試發現，目前網址列、搜索列及網頁文字框中，還是不能正常打出「睛」（Bug 543782），Firefox 3.5.7 也還沒解決文中顯示睛的問題。

據我觀察，似乎還有一些中文字也會引起這種狀況，但是目前還沒有辦法鎖定有哪幾個字，如果有朋友發現，希望能夠幫忙回報一下。

第二個修好的 bug 是 Bug 532346，無法指定「黑體-繁」作為預設字型，也不能透過 CSS 使用它。雖然我不知道有誰會想要這麼做。這看起來像是個天諭，冥冥之中告訴大家 黑體-繁是個多糟糕的字體，連火狐大萌神都不爽讓他上身，但是 Mozilla 的程式設計師們還是含淚把他處理好了。

發生的原因是蘋果在黑體繁這個字體中用了新的 encoding ID，我不知道這是啥，總之已經修好了，但是還是饒了小狐，不要這樣用吧！同樣的，可以開啟 這個測試頁 測試看看。

Firefox 目前還有個跟中文等寬字有關的 Bug 530419，有興趣的朋友可以繼續關注相關資訊。

前幾天在測試 each 和 for 迴圈的效率時，意外的一直得到 each 效率比較好的奇怪現象，搞了兩天才找到原因。

each 這種方法效率會比 for 迴圈還要低主要是因為它是把要做的事情用 function 傳進去，多了一個 function call 和一層 function scope，要對變數作存取時會多了到不同層 scope 尋找的差，所以理論上它會比 for 迴圈還要慢。除此之外，DOM 本身就很慢了，當然 DOM NodeList 的操作和存取也不會快到哪去，所以像 Sizzle 引擎就會把 DOM NodeList 轉成陣列再傳回來，而我測試 each 和 for 兩者的效率時，也就是這個部分產生了非預想的結果，根據測試結果 Google V8 和 Firefox 3.6 的 Tracemonkey 這兩個會編譯 JS 的引擎，第二次對同樣內容的 DOM collection 轉陣列的動作時會比第一次還要快，而且大約是兩倍快，測試的基準是第一次用 getElementsByTagName 抓 <span> ，第二次用 jQuery，內部也是一樣用 getElementsByTagName ，並且小修改過 DOM 結構後再做一樣的事情也是會比第一次還快，並且，不管是用 slice 還是 for 迴圈一個元素一個元素推到陣列裡面都沒差很多，一開始因為測試都是對同樣的標籤作處理，結果先測的方法就佔了劣勢，就像是美食漫畫一樣，先上菜的都會輸一樣，不過我對編譯器的怎樣做最佳化的方法不熟，所以這兩個引擎是怎麼辦到的就不清楚了。

除了這點之外，還有一些不算小發現的小發現，第一個就是 Firefox 3.6 還是好慢，詳細數據我忘了，不過和 V8、Safari 比起來差距還是不小，然後就是 IE 超．級．慢！！第二是 each 真的比較慢，不過在現在 JS 引擎普遍暴力的情況下差距其實不明顯（不過 NodeList 和陣列的差距還是有）。第三是前面已經講過的 Sizzle 回傳的是陣列而不是 NodeList ，雖然實際上想要自己組合 NodeList 似乎也是不可能的。最後是 jQeury 可以用 $("span")[0] 這種寫法來直接存取 DOM 節點，不過它並不是陣列，要轉成純陣列可以用 $("span").get() ，只是測試過後發現沒有比較快，因為還要重新轉一次陣列，這裡損失的時間也不會比直接存取來的少。

So what should you do if you decided to ditch SWFUpload and embrace HTML5 solution for ajax file upload? In honor of the releases of Firefox 3.6 (with File API), I decided to just that in the GFX Firefox promotion site. (sounds perfectly reasonable to use Fx-only technology on such site, right?) Firefox now gives us the bricks (File API, binary XHR, and File drag-drop), but to build a house it still takes some work. The Mozilla Hacks demo works great but to work with the existing site I need:

1. To create a SWFUpload-like button that opens file selection dialog instead of HTML form file input.
2. To send the file as a ordinary file upload form – no need to change php backend to handle raw post
3. Send the file by jQuery.ajax, firing global callbacks

I came up with these methods to solve them:

SWFUpload-like button

From the JavaScript almighty ppk we know that file input from control is almost impossible to style. The solution outlined on that page only tell us how to replace the control with images using opacity: 0 trick. In order to fit the clickable area into my 65×65-px button, I have to enlarge the control and confine it into a <div> with overflow: hidden.

The actual hard part is how to enlarge the control. It turns out in Firefox it ignores CSS specified height and width; the only thing left for you to set is font-size propriety.

Another CSS properity it ignores is the cursor. Firefox puts the “browse” button at the very right, so you might what to make sure the arrow cursor, instead of text-input cursor, shows.

Simulate form upload

On Mozilla Hacks demo, the file is sent as raw HTTP POST/PUT data. To process such input, one must craft the server-side script all over, without any upload-handling library that I’ve known of. So we go back to client-side solution: the question now effectively becomes how to implement RFC 1867 format to your (raw) post data. I’ll simply post my code snippet below – turn out to be quite self-explanatory. ^*

var bd = 'gfx-xhrupload-'
	+ parseInt(Math.random()*(2 << 16));
var data = '--' + bd + '\n'
	+ 'content-disposition: form-data; name="Filedata";'
	+ ' filename="' + files[0].name + '"\n'
	+ 'Content-Type: ' + files[0].type + '\n\n'
	+ ev.target.result + '\n\n'
	+ '--' + bd + '--';

Where ev.target.result is the binary string represent the file, access using FileReader object, and files is the FileList object.

Send the file via jQuery.ajax

Update: Just found an easy way to do this right instead below: overwrite xhr.send with xhr.sendAsBinary since it’s seems all right to send text data in binary mode.

if (window.XMLHttpRequest && (new XMLHttpRequest()).sendAsBinary)) {
	XMLHttpRequest.prototype.send = function (data) {
		return this.sendAsBinary(data);
	};
}

You might think this is the easiest part, but in reality the normal $.ajax won’t work even if you set the correct Content-Type, which, according to RFC 1867, is 'multipart/form-data, boundary=' + bd.

What went wrong? The problem is jQuery hard-coded xhr.send(data) in it’s function, and it does not send binary data. I resolved the problem by actually copying jQuery code, “patch” it, and overwrite the original $.ajax function. I added a “binary” option for the purpose; the function would switch to xhr.sendAsBinary(data) if the option is set to true.

Bonus: File drag and drop

What SWFUpload doesn’t do is to make the control accepts files by droping them on it. With Firefox 3.6 you could to that, but you cannot hook the drop event on the <input> itself. Frankly speaking, the button would be to small to aim, so for the sake of better UX, a larger overlay, like the one in Mozilla Hacks demo, should be made. Do remember that hiding the overlay as soon as dragleave fires will stop drop event from firing though – took me a day to figure that out.

Also, keep in mind your transparent button will accept file dropping if the user had installed dragdropupload add-on.

Conclusion

With all these research, looks like it’s actually possible to write a SWFUpload.js without Flash. The library would support anything SWFUpload does, except cursor choices on the button. For my project, I didn’t craft a new XHRUpload() object to replace SWFUpload() because I don’t need that much of functionality, yet it’s something can be done.

It struck me that HTML 5 is practically involves around what Google want to do things w/o Flash. StreetView? We got WebGL. GMail attach. upload? Got File API.

HTML 5. Exciting new world.

For complete code on the implementation, stay tuned and check code here once it went live. For the site, we have not deliver English version yet, but feel free to play around with buttons and symbols – you should be able to understand it without reading any Chinese.

Note: According to the MIME spec, the filename should be encoded according to RFC 1522 (“quoted-printable”) if it contains characters other than US-ASCII. Personally I replace these characters with underlines instead – name = name.replace(/[^\x20-\x7E]/g, '_');.

dive into mark 在去年11月有一篇文章 Why do we have an IMG element? ，裡面翻出了很多當初 HTML 剛起步時的討論，當時就在針對網頁上的媒體內容要怎樣放進去作了不少爭論，過程有興趣的可以自己去看，結果還是先下手為強，先做出來的贏， mark 歸納出的幾點結論中有一點蠻有趣的：「HTML一直都是瀏覽器製造者、標準制定者、網頁製造者和其他想參與其中的人所討論而得的，而多數成功的標準都是 retro-specs （實作、制定標準同時，甚至先實作），有些人認為標準應該保持純潔，不要受到瀏覽器製造者或網頁製造者的影響，這完全是錯誤的。」HTML 5 也是一個 retro-specs ，新功能都是跟著網路的變化所產生，像是 拖拉 API 、 近端儲存系統 等，最近還多了 device 標籤 和 stream API ，這些都是現在大家需要的功能，而目前只能用其他方法弄起來，像是拖拉要去算位置、範圍，近端儲存要裝像 Google Gears 的外掛，要抓 webcam 畫面或是撥影片則要用 Flash 或是 Java，未來這些功能都會變成瀏覽器原生支援，甚至用顯示卡 加速畫 3D 圖形 都不是問題。

另外可以拿來作反例的我覺得是 XML Schema ，整個複雜過頭，還有難解的用詞，據之前修課時的老師說是語言學家制定的，結果造成沒有工具很難寫，就算寫了沒驗證過我看也不敢拿來用。

foo = foo || {};

這樣的寫法大家一定不陌生，如果 ab 有值的話就繼續用，不然就讓他成為空物件。通常會用到的地方有兩種，函式設定參數預設值，或是跨檔案的公用函式庫，這種時候會把變數放在 global scope 下，也就是全域變數，要宣告全域變數的話不用 var，直接變數名稱就可以了，就像上面那段 code，不過實際上，這樣寫是會出錯的，沒寫 var 的話，第二個 foo 會跑出 foo 尚未定義的錯誤，所以寫成標題那樣是比較沒問題的，不過有時候，程式碼會全部包在一個 function scope 裡面，避免安全的問題，但是在這個 scope 裡面用 var 宣告變數的話，變數又不會是全域的，這時其實加上 window 就可以了：

(function () {
foo = window.foo || {};
})();

也可以用 if 判斷：

(function () {
if (! window.foo ) { window.foo = {} }
})();

最後我還發現一件趣事，大家可以猜猜看下面的 code 會不會有錯誤：

(function () {
foo = undefined;
foo = foo || {};
})()