---
# System prepended metadata

title: DOM型xss

---

# DOM型xss
- [DOM](https://www.w3schools.com/js/js_htmldom.asp#:~:text=The%20HTML%20DOM%20is%20a,to%20access%20all%20HTML%20elements)
- ### DOM (Document Object Model) 文件物件模型
	- 在瀏覽器中使用的介面
	- 將文檔視為一個樹狀結構，其中每個節點都代表文檔中的一個元素、屬性或其他結構
		- interface
			- 定義可以執行的操作
			- 使用程式（通常是JavaScript）來動態地操控文檔的結構、風格和內容
		- event model
			- 使用它來處理使用者的操作，例如點擊、鍵盤輸入等
	- HTML DOM 樹
		- ![1626243054_60ee7fee8d8202f68053b.png!small](https://image.3001.net/images/20210714/1626243054_60ee7fee8d8202f68053b.png!small)
		- 可以將DOM理解為一個訪問HTML的標準的接口。DOM是一個前端的接口，並沒有和後端做任何的交互。
		- 定義
			- 作為物件的 HTML 元素
			- 所有 HTML 元素的屬性
			- 訪問所有 HTML 元素的方法
			- 所有 HTML 元素的事件
			- --> 換句話說 HTML DOM 是如何獲取、更改、添加或刪除 HTML 元素的標準。
- page source
	- 在留言板輸入 ``hello``
		![image](https://hackmd.io/_uploads/rJVQ62AL6.png)

	- 輸入 ``'"<>?&666``
		- 沒有全部輸出到連結上
		![image](https://hackmd.io/_uploads/HJhXp20I6.png)

	- 可以看到script 的function那邊
		- ```javascript
		  <div id="xssd_main">
		                  <script>
		                      function domxss(){
		                          var str = document.getElementById("text").value;
		                          document.getElementById("dom").innerHTML = "<a href='"+str+"'>what do you see?</a>";
		                      }
		                      //试试：'><img src="#" onmouseover="alert('xss')">
		                      //试试：' onclick="alert('xss')">,闭合掉就行
		                  </script>
		                  <!--<a href="" onclick=('xss')>-->
		                  <input id="text" name="text" type="text"  value="" />
		                  <input id="button" type="button" value="click me!" onclick="domxss()" />
		                  <div id="dom"></div>
		              </div>
		  ```
			- 通過 `getElementById` 獲取了標籤 id 為 text 的內容，並將其賦值給了變數 `str`
			- 通過字符串拼接的方式，將 `str` 的內容寫入了 `<a>` 標籤的 [[href]] 屬性中
			- 這個 `<a>` 標籤將被插入到 id 為 dom 的 `<div>` 標籤中
			- 可做修改的內容
				- ```javascript
				  "<a href='"+str+"'>
				  ```
	- 下面看到如何輸出
		- ```javascript
		  <div id="dom">
		    <a href=payload>what do you see?</a>
		  </div>
		  ```
			- 利用DOM將字串連接
			- 並把值給a標籤的[[href]]
			- 並輸出 what do you see?
	- payload建構要有: 字符 + 閉合 + JS語法
	  
		- ```
		  ' onclick="alert('xss')">
		  ```
		![image](https://hackmd.io/_uploads/ByQHa3AI6.png)

