[F10_WebHack] Lab1 內容與繳交注意事項

Submitted by azraelen on 五, 2010-10-15 13:44

以下為本次Lab內容：

Firefox是目前市占率排名第二的瀏覽器，更是身為網頁開發者不能沒有用過的瀏覽器，網路上已經有屬不清的推廣、介紹文章，所以對於其優點和安裝步驟不再贅述。Firefox最令人喜愛的功能之一，就是有大量的附加元件(Add-ons)可以為瀏覽器提供更方便的操作介面和更強大的功能。本次Web攻防技術課程Lab1中，助教幫同學們選出了10種和Web安全相關或是能夠幫助開發的附加元件讓同學使用，除了體驗Firefox和其附加元件的強大功能外，也幫同學複習各種Web基礎原理、學習利用工具輔助Web應用開發和各種資訊安全相關知識。每一個附加元件都可以在https://addons.mozilla.org/zh-TW/firefox/ 搜尋到並安裝，請同學先參考Lab1說明後，把所需要的背景知識補足然後再嘗試使用，最後寫下背景知識的學習心得和附加元件的使用心得。各種附加元件除了簡短說明外，在最後有附上參考網頁，但是參考網頁僅供簡單參考，如果對於背景知識建立或是問題思考上遇到困難，請同學自行上網查詢更多資料並且於宅學習網頁上與其他同學分享。

Lab目標：
1. 從助教推薦的四組附加元件(Add-ons)中各至少挑選一種安裝
2. 補足各種附加元件所需要的背景知識
3. 使用並且寫下心得貼在課程社群中，並且選擇Lab1的分類，發文標題格式：〔F10_WebHack〕 Lab1 學號（後面自定

A組：HttpFox、Tampar Data

B組：NoScript、RefControl、Add N Edit Cookies

C組：FoxyProxy、TorButton

D組：Firebug、Web Developer、Greasemonkey

Bonus:請找尋 Chrome 上相對應同樣功能的 Extensions後安裝並撰寫心得與比較。

-------------------------------------------------------------------------------------------------

以下為各Add-ons說明：

* HttpFox:這是一套可以側錄監視HTTP Request和Response的工具，也方便使用者觀察瀏覽器所送出的Request和所收到的Response。

背景知識：

     1. 什麼是HTTP Request
     2. 常見Request methods(GET, POST)
     3. GET, POST參數傳遞方式
     4. 重要的Request欄位意義(Host, User-Agent, Referer, Cookie… etc)

問題思考：

     1. 如何利用HttpFox的功能來進行網頁的Debug？
     2. 有什麼情境是使用HttpFox的好時機？
     3. 為什麼有時候接收到的Response是看的懂的HTML，有時候卻是看不懂的亂碼呢？
     4. 試比較HttpFox和Tampar Data的異同，並描述其使用情境，是否有所不同。

可參考網頁：

http://wpveda.com/httpfox-a-helpful-firefox-add-on-for-debugging/

* Tampar Data: 這是一套可以攔截HTTP Request的工具，攔截後可以將Request修改後送出或是丟棄，也方便使用者觀察瀏覽器所送出的Request Header和所收到的Response Header。

背景知識：

     1. 什麼是HTTP Request
     2. 常見Request methods(GET, POST)
     3. GET, POST參數傳遞方式
     4. 重要的Request欄位意義(Host, User-Agent, Referer, Cookie… etc)

問題思考：

     1.    如果不使用Tampar Data，可以如何修改HTTP Request送出的參數？
     2.    如果某個網站只使用JavaScript限制使用者的輸入，卻沒有在接收到使用者傳送的參數後再次檢查就使用，會有什麼後果？
     3.    還有什麼情境是使用Tampar Data的好時機？

可參考網頁：

http://www.w3.org/Protocols/HTTP/HTTP2.html
http://zoukejian.blog.51cto.com/131276/62057

* RefControl:可以為各別網頁或是網站設定所使用的HTTP Referer。

背景知識：

     1.    什麼是HTTP Request
     2.    常見Request methods(GET, POST)
     3.    HTTP Request中Referer欄位的意義

問題思考：

     1.    為什麼朋友傳給我的圖片連結點下去後時常看不到呢？
     2.    網站開發者是如何知道我從哪裡連過來的？
     3.    如果不使用RefControl，可以如何修改Referer的值？
     4.    如果網站開發者開發管理介面時，只參考Referer值來做連結現制會造成什麼後果？
     5.    Referer這個單字是不是拼錯了？

可參考網頁：

http://blog.soft.idv.tw/?p=314
http://www.w3.org/Protocols/HTTP/HTTP2.html

* Add N Edit Cookies:這是一套可以讓使用者輕易修改伺服器所儲存的Cookies的擴充元件，操作十分簡單，只要安裝完擴充元件後即可在工具選單內找到這項功能，打開後便可對不同網站所存放的Cookies做修改。

背景知識：

     1.    什麼是HTTP Request
     2.    常見Request methods(GET, POST)
     3.    Cookies與Session的相關知識

問題思考：

     1.    Cookies與Session的功能與差異？
     2.    使用者是否可以拒絕網站儲存Cookies？如果可以，拒絕網站儲存Cookie會對瀏覽網站造成何種影響？
     3.    使用者是否可以拒絕網站儲存Session？如果可以，拒絕網站儲存Session會對瀏覽網站造成何種影響？
     4.    如果開發者將網站會員的身分儲存於Cookies中會有何種風險？
     5.    開發者應該如何利用Cookies的便利性、適合存放何種資料？

可參考網頁：

http://sls.weco.net/node/12967
http://knowledge.twisc.ntust.edu.tw/doku.php?id=3%E4%BC%BA%E6%9C%8D%E7%A...

* Firebug: 這是一套可以擷取更改頁面的CSS、JavaScript、HTML DOM等的工具，更可以進一步的編輯刪改網頁，此外也能觀察網頁的HTTP Request、了解該網站流量等等，是個非常多功能的附加元件。此外，Firebug可以自行擴充延伸的附加元件，也就是Firebug本身可以再加裝附加原件來擴充Firebug的功能。

背景知識：

      1.    常見HTTP Request methods(GET, POST)與GET, POST參數傳遞方式
     2.    JavaScript基本開發能力
     3.    HTML和CSS以及DOM的基本認知

問題思考：

     1.    如何利用Firebug來輔助JavaScript程式設計時的除錯？
     2.    請額外安裝一種Firebug的附加元件，測試使用後描述該Firebug附加元件功能。
     3.    如何利用Firebug來檢測網頁瀏覽速度？
    (請已依實際網站為例子，擷取除錯畫面，並標明自行更改處與附上該網站網址)

參考網頁：

     http://briian.com/?p=5526
     http://abgne.tw/computer-tips/firefox-firebug.html
     http://caterpillar.onlyfun.net/Gossip/AjaxGossip/FireBug.html
     http://blog.yslifes.com/archives/699
     http://www.evotech.net/blog/2007/06/introduction-to-firebug/

* NoScript: 這是一套著名的安全附加元件，NoScript可以阻擋網頁裡的各種暗地裡執行的Script程式，對如JavaScript, Java, Flash, Sliverlight以及其它Plugins和指令碼內容基於白名單被選擇性的執行，對於網頁瀏覽安全來說，NoScript提供了比防毒軟體或防火牆更第一線的防護。

背景知識：

1. JavaScript與AJAX等基本運作方式認知
2. Http與Https的基本認知

問題思考：

     1.    JavaScript在現代網頁中扮演和種角色？
     2.    如果瀏覽器禁止所有網頁使用JavaScript會造成何種影響？
     3.    什麼是Clickjacking？NoScript如何防止Clickjacking？
     4.    什麼是XSS？NoScript如何防止XSS？

可參考網頁

http://playpcesor.blogspot.com/2007/03/noscriptlocationbar.html
http://zh.wikipedia.org/zh-tw/NoScript

* Greasemonkey: Greasemonkey透過許多開發者自行撰寫的 JavaScript 腳本，可以改變特定網站的行為與操作模式，如改善特定網頁版面、增添附加功能等等。

背景知識：
1. HTML、JavaScript等基本網頁開發能力與認知

問題思考：

     1.    既然Firefox可以讓開發者自行開發擴充元件，為何還需要Greasemonkey？
     2.    除了Firefox之外，還有哪些瀏覽器支援Greasemonkey？
     3.    Greasemonkey的強大自訂能力讓許多使用者愛不釋手，但過去Google曾對Greasemonkey提出警告。請試著以網站經營者立場分析對Greasemonkey的想法，贊成抑或反對？
     4.    請任選以下一個Script安裝使用後描述其功用、Script撰寫方式與心得：AutoPagrize、Megaupload auto-fill captcha、Youtube Video Dounload、FacebookDeletes、Fluff Busting Purity、Gmail Favicon Alerts 3。
     5.    請試想任意安裝Greasemonkey的Script會不會對資訊安全問題造成影響，是的話，有那些問題？

可參考網頁

http://nelson.pixnet.net/blog/post/23046943
http://userscripts.org/

* Web Developer: 為網頁設計師量身訂做的套件，可以隨時關閉圖片、JavaScript、CSS 樣式等效果，也可以輕鬆檢閱別人寫的 JavaScript 與 CSS，還有更改網頁尺寸、標示區塊元素等功能。

背景知識：

1. JavaScript基本能力
2. HTML和CSS以及DOM的基本認知

問題思考：

1. 如何利用Web Developer來輔助CSS和JavaScript設計時的除錯？請已依實際網站為例子，擷取畫面並說明所使用的功能以及其為開發者所帶來的幫助。請至少使用三種功能。

可參考網頁

http://blog.yam.com/tad0616/article/10931563

* FoxyProxy: 代理伺服器(Proxy)在Web安全中扮演相當重要的角色，除了節省頻寬等傳統的好處之外，依照使用者的活用還可以用於跳板、監聽資料流等功能。FoxyProxy是一款可以讓使用者依據不同網站使用不同的代理伺服器(Proxy)的工具，十分的方便，免去了使用者不停的手動更改設定的困擾。

背景知識：

1. 什麼是代理伺服器(Proxy)

問題思考：

     1.    為何要使用代理伺服器，常用於何種狀況？
     2.    使用代理伺服器瀏覽網頁資料有什麼好處與壞處？
     3.    從資訊安全的角度出發，代理伺服器對攻擊者有何種好處？
     4.    SSH Tunnel是一種加密通道技術，被用來保障資料傳輸的安全，也常被用於突破網管封鎖以連到原本不能連的網站。使用瀏覽器通過SSH Tunnel瀏覽網頁時，本機的Proxy設定是十分重要的步驟，請利用系上提供給學生的主機建立起SSH Tunnel，並且搭配FoxyProxy設定，用Firefox經SSH Tunnel連接到其他網站。(此為加分題，請截圖並且單獨Post心得於宅學習個人部落格)

可參考網頁

http://moonpoet.com/foxyproxy.html

* TorButton: Tor是一個著名的匿名網路系統，可以讓使用者方便的在瀏覽網頁或是進行其他連線動作時隱藏自己的真實身分(IP位置)，而TorButton是搭配Tor使用的Firefox擴充元件，可以快速啟動Tor的功能。

背景知識：

1. 什麼是Tor
2. 什麼是代理伺服器(Proxy)

問題思考：

     1.    為何要使用Tor，常用於何種狀況？
     2.    隱匿真實IP有何好處？對攻擊者有什麼幫助？
     3.    Tor是利用什麼原理讓使用者隱匿真實IP位置？
     4.    經由Tor隱匿真實身份上網有何風險？

可參考網頁

http://www.torproject.org/