跨站指令碼攻擊（XSS）是用戶端指令碼安全的頭號大敵。本文章深入探討 XSS 攻擊原理，下一章（XSS 攻擊進階）將深入討論 XSS 進階攻擊方式。
本系列將持續更新。
XSS 簡介XSS（Cross Site Script），全稱跨站指令碼攻擊，為了與 CSS（Cascading Style Sheet） 有所區別，所以在安全領域稱為 XSS。
XSS 攻擊，通常指駭客通過 HTML 注入 篡改網頁，插入惡意指令碼，從而在使用者瀏覽網頁時，控制使用者瀏覽器的一種攻擊行為。在這種行為最初出現之時，所有的示範案例全是跨域行為，所以叫做 "跨站指令碼" 。時至今日，隨著Web 端功能的複雜化，應用化，是否跨站已經不重要了，但 XSS 這個名字卻一直保留下來。
隨著 Web 發展迅速發展，JavaScript 通吃前後端，甚至還可以開發APP，所以在產生的應用情境越來越多，越來越複雜的情況下， XSS 愈來愈難統一針對，現在業內達成的共識就是，針對不同的情境而產生的不同 XSS ，需要區分對待。可即便如此，複雜應用仍然是 XSS 滋生的溫床，尤其是很多企業實行迅捷開發，一周一版本，兩周一大版本的情況下，忽略了安全這一重要屬性，一旦遭到攻擊，後果將不堪設想。
那什麼是 XSS 呢？我們看下面一個例子。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>XSS</title></head><body> <div id="t"></div> <input id="s" type="button" value="擷取資料" onclick="test()"></body><script> function test() { // 假設從後台取出的資料如下 const arr = ['1', '2', '3', '<img src="11" onerror="alert(\'我被攻擊了\')" />'] const t = document.querySelector('#t') arr.forEach(item => { const p = document.createElement('p') p.innerHTML = item t.append(p) }) }</script></html>這個時候我們在頁面上點擊 擷取資料 按鈕時，頁面上會出現如下資訊：
你會發現，本應該作為資料展示在介面上的內容居然執行了，這顯然是開發人員不希望看到的。
XSS 攻擊類型XSS 根據效果的不同可以分為如下幾類：
反射型 XSS簡單來說，反射型 XSS 只是將使用者輸入的資料展現到瀏覽器上（從哪裡來到哪裡去），即需要一個發起人（使用者）來觸發駭客布下的一個陷阱（例如一個連結，一個按鈕等），才能攻擊成功，一般容易出現在搜尋網頁面、留言板塊。這種反射型 XSS 也叫做 非持久型 XSS（No-persistent XSS） 。
例如：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <div id="t"></div> <input id="s" type="button" value="擷取資料" onclick="test()"></body><script> function test() { const arr = ['1', '2', '3', '<img src="11" onerror="console.log(window.localStorage)" />'] const t = document.querySelector('#t') arr.forEach(item => { const p = document.createElement('p') p.innerHTML = item t.append(p) }) }</script></html>假設這是一個留言板塊，載入到這一頁時，頁面會輸出：
駭客可以輕易盜取儲存在你本地瀏覽器的各種資訊，進而類比登陸資訊，黑入賬戶，進行各種操作。
儲存型 XSS儲存型 XSS 會把使用者輸入的資料 儲存 在伺服器端，這種 XSS 十分穩定，十分有效，效果持久。儲存型 XSS 通常叫做 "持久型 XSS（Persistent XSS）"，即存在時間比較長。
比較常見的情境就是，駭客寫下一篇包含惡意代碼的文章，文章發表後，所有訪問該部落格文章的使用者都會執行這一段代碼，進行惡意攻擊。
例如：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <div id="t"> 這是我寫的一篇文章 </div></body><script> console.log(navigator.userAgent)</script></html>直接輸出了瀏覽器資訊，駭客可以擷取到這些資訊後，發送到自己的伺服器，隨意操作。
DOM Based XSS實際上，這種類型的 XSS 與是否儲存在伺服器端無關，從效果上來說也是反射型 XSS，單獨劃分出來是因為此類 XSS 形成的原因比較特殊。
簡單來說，通過修改頁面 DOM 節點形成的 XSS，稱之為 DOM Based XSS。
例子如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>XSS</title></head><body> <div id="t"></div> <input type="text" id="text" value=""> <input type="button" id="s" value="search" onclick="test()"></body><script>function test() { const str = document.querySelector('#text').value document.querySelector('#t').innerHTML = '<a href="' + str + '" >尋找結果</a>'}</script></html>該頁面的作用是，在輸入框內輸入一個內容，跳出尋找結果能直接跳轉，效果如下：
點擊尋找結果後，頁面會自動跳到百度（毒）頁面，但是細心的我們會發現，這字串拼接有可乘之機啊，輸入" onclick=alert(/XSS/) //：
果然，頁面執行了我們輸入的東西，上面的內容是，第一個雙引號閉合掉href的第一個雙引號，然後插入onclick事件，最後注釋符 //注釋掉第二個雙引號，點擊跳轉連結，指令碼就被執行了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
