看電影學資安-CSI Cyber S01E10 - 資安

喜歡CSI-Cyber的朋友大家好

我們是ISDA(台灣資訊安全聯合發展協會)

為了要讓更多人了解資訊安全，除了基礎資訊安全教育訓練以外

我們將針對CSI-Cyber 系列裡面會提到的技術作一系列的資訊安
也歡迎認同我們的朋友給我們一
到我們的ＦＢ粉絲頁按個讚加分享
https://www.facebook.com/ISDA.

---------------------------廢話分隔線-------------------------
圖文好讀版
https://www.isda.org.tw/index.php/2018/07/13/csi-cyber-s01e10/

[撰文/Leaf]

前情提要：
故事發生在俄亥俄州的一間小咖啡店，一位中年男子買完咖啡過馬路時，神
智開始有點不清，霎那間被急駛而過的車子撞上。警方調查後發現，死者在
醫療網站購買到偽藥，同時網站上也發現被嵌入了假廣告，這些疑點讓FBI推
測，某個犯罪組織利用惡意廣告，讓民眾點擊進入釣魚網站購買他們製造的
偽藥。

哈囉！大家好...首先小編在這裡先跟大家道歉，過那麼久時間才將這篇文章
生出來，這段時間我在幹嘛呢？


CSI Cyber影片中的確有許多地方為了劇情和張力，填充了大量的戲劇效果，
有些科技...小弟我真的孤陋寡聞沒有看過，不過影片中這個先進技術我可是
常常看到。

......在鋼鐵人系列電影中XD

(圖/鋼鐵人)

撇開這些電影效果來看，裡頭還是有許多技術細節和情境值得學習及思考，
挺有趣的！


大家聽過ClickJacking(點擊劫持)嗎？我先帶大家了解一下瀏覽器的原理吧
！

1. 探索網頁的嬰兒模樣

首先網頁架構分為前端跟後端，瀏覽器能看到的地方就叫前端，負責將後端
程式傳過來的網頁原始碼，形成漂亮華麗的介面，大家可以按右鍵點選網頁
原始碼，看看網頁的真實面貌究竟長怎樣，它與你認知的有所差別喔！

有些網站會不小心將敏感資訊，暴露在網頁原始碼裏頭。

後端的組成有兩個，一個是網頁伺服器，也就是下圖中的Apache Server，另
一個就是架在伺服器上的php程式碼，當瀏覽器(Browser)向Apache Server請
求網頁時，這時後端程式(hello.php)，可以去資料庫(Database)抓資料做處
理，也可以將使用者要的網頁傳回給瀏覽器。

(圖/Html and JavaScript Mumbo Jumbo Part 2)

Web安全領域也能依照前後端做區分，我們今天要談到的都會是前端安全的部
分。

延伸閱讀：
[1] 撰寫第一個 HTML 網頁範例 - Wibibi
[2] 製作一個釣魚網站到底有多簡單？ | 電腦故我在
[3] 國稅局網站出大包，資安專家戲稱「Hacker Friendly」


簡單談完網頁和瀏覽器的關係，接下來我們來聊聊ClickJacking吧！

2. 讓人不知不覺的ClickJacking

劇中犯罪組織為了販售偽藥，將惡意廣告嵌入醫療網站上，當受害者被誘使
點擊進偽造的網站，後果不堪設想，受害者甚至不知道自己已經被釣魚了，
現實中的攻擊手法有過之而無不及，更讓人難以察覺。

正常情況來說，瀏覽器顯示的網頁，應該是可以信任的，不被信任的情況有
兩種：

全是假的，眼睛業障重
網頁遭到駭客攻擊，被竄改了

我們來看看這個網頁，看起來很正常，畫面非常乾淨，對吧？！

那......這個呢？

看出來了吧！我將iframe嵌入的網頁透明了，當你點擊了Button，實際上會
點到iframe頁面中的某個特定地方，眼睛業障真重啊。

要防禦這類攻擊的話，只需要設定X-Frame-Options就可以了。


延伸閱讀：
[1] 淺談IFrame式Clickjacking攻擊與防護 - 黑暗執行緒
[2] X-Frame-Options 回應標頭 - HTTP | MDN
[3] 白帽子講Web安全 - 第五章：點擊劫持(ClickJacking)


3. HTML注入竄改任意網站

小時候看新聞，常常聽到什麼網頁遭到駭客竄改，會覺得挺酷的，現在來看
，會覺得如果只是惡作劇那還好，但如果是有心的利用，那就很恐怖了，譬
如說滑FB滑到一半，突然出現個假的登入視窗，或者像劇中插入一個假的廣
告圖片，這些都是有可能發生的。

除了直接攻破對方伺服器外，還有一個攻擊手法可以做到，就是影片中提到
的HTML注入，也就是OWASP Top 10中的XSS Injection，兩個其實是類似的東
西。

我們以PentesterLab做為測試平台，大家可以去官網下載ISO檔來自己架設，
現實中最容易發生此漏洞的是留言板功能的網頁，下圖中透過設定name參數
的值，來決定顯示的字串為何。

你可以輸入Javascript語法或者HTML語法來注入，我們以HTML的方式來展示
劇中類似的結果。
在<a>標籤中，設定href屬性，讓受騙者點擊圖片後進入釣魚網站，<img>標
籤中，設定style屬性，決定圖片要顯示的位置及大小。

position: absolute; 讓圖片能夠以絕對位置定位到要覆蓋的項目上。
width: 100px; height: 100px; 將圖片調整成和要覆蓋的圖片大小一樣。
top: 0px; left: 0px; 設定圖片放置的位置。


更進階一點的話，就是目標網站做了一些防護，我們可以用怎樣的方式繞過
，我們這次以Javascript語法作為例子，注入後可以發現，<script>標籤被
過濾掉了，Javascript語法無法奏效對攻擊者來說是一個很大的困擾，因為
能做的事情就少了。

我們猜測目標網站可能只做一次的過濾，所以我們將<script>標籤裏頭再包
一個，就像大腸包小腸一樣，這是我注入的語法：
<scri<script>pt>alert(1)</sc</script>ript>，當<script>和</script>被
過濾掉後，外面還有一層，如此一來就能成功構造一段合法的Javascript語
法。

延伸閱讀：
[1] 注入html源碼到瀏覽器的幾種方式 - CSDN博客
[2] 淺談html轉義及防止javascript注入攻擊 - CSDN博客
[3] HTML注入 - 簡書


最後這一期的看電影學資安就到這邊啦！本篇從最基本的網頁原理開始談起
，再談到web客戶端安全，盡可能呈現一個比較完整的內容給大家，希望閱讀
此篇的人都能了解更多關於web安全的資安知識。

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

我們是ISDA(台灣資訊安全聯合發展協會)。

為了要讓更多人了解資訊安全，除了基礎資訊安全教育訓練以外，我們將針
對影集裡面會提到的技術作一系列的資訊安全解說。歡迎認同我們的朋友給
我們一點鼓勵，到我們的FB粉絲頁按個讚加分享。

https://www.facebook.com/ISDA.tw/

有任何活動相關訊息，我們也會第一時間張貼在ISDA粉絲團喔！

--