html標簽
（1）detail標簽
<details>標簽用來折疊內容，瀏覽器會折疊顯示該標簽的內容。
<1> 含義：
<details>
這是一段解釋文本。
</details>用戶點擊這段文本，折疊的文本就會展開，顯示詳細內容。
▼ 詳細信息
這是一段解釋文本。<2> 例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- on：js事件 -->
<details ontoggle="alert(1)">
<!-- 標簽進行切換時，會出發(fā)某個函數(shù) -->
這是一個details標簽
</details>
<p>hello</p>
<!-- 等同于html的實體編碼 -->
<p>hello</p>
<!-- <和> === <> html將<>的編碼解析，在頁面展現(xiàn)。因為<>被html編碼，所以無法執(zhí)行-->
<script> alert(1); </script>
</body>
</html>
（2）iframe標簽
<iframe>標簽用于在網頁里面嵌入其他網頁。
<1> 基本用法
<iframe>標簽生成一個指定區(qū)域，在該區(qū)域中嵌入其他網頁。它是一個容器元素，如果瀏覽器不支持<iframe>，就會顯示內部的子元素。
例：iframe嵌入bilibili
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iframe</title>
</head>
<body>
<iframe src="http://www.bilibili.com" width="500" height="500" frameborder="0" allowfullscreen sandbox>
<!-- 功能：將其他網頁嵌入到本網頁 -->
<!-- sandbox：沙箱模式。 -->
<p><a >點擊打開嵌入頁面</a></p>
</iframe>
</body>
</html>
<2> sandbox屬性
允許設置嵌入的網頁的權限，等同于提供了一個隔離層，即“沙箱”。
【1】使用方法
[1] 可當布爾類型使用，打開所有限制
<iframe src="https://www.example.com" sandbox>
</iframe>[2] 設置具體值，表示打開某項限制，未設置表示無此權限
原則：最小權限原則
【2】例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iframe</title>
</head>
<body>
<iframe src="./img.html" width="500" height="500" frameborder="0" allowfullscreen sandbox="allow-modals allow-scripts">
<!-- 功能：將其他網頁嵌入到本網頁 -->
<!-- sandbox：沙箱模式。 -->
<p><a href="./img.html">點擊打開嵌入頁面</a></p>
</iframe>
</body>
</html>
編碼
（1）ASCII碼
ASCII 碼一共規(guī)定了128個字符的編碼，比如空格
SPACE是32（二進制00100000），大寫的字母A是65（二進制01000001）。這128個符號（包括32個不能打印出來的控制符號），只占用了一個字節(jié)的后面7位，最前面的一位統(tǒng)一規(guī)定為0。
（2）unicode編碼
一種所有符號的編碼，規(guī)?？梢匀菁{100多萬個符號
存在問題：
- 如何區(qū)別 unicode 和 ASCII 碼？
- 英文字母是一個字節(jié)，別的字符 2-3 字節(jié)，若規(guī)定用 3-4 個字節(jié)表示，英文字母會存儲浪費
結果：1) 出現(xiàn)許多種不同的存儲方式；2) 無法推廣
（3）UTF-8
UTF-8 就是在互聯(lián)網上使用最廣的一種 Unicode 的實現(xiàn)方式。其他實現(xiàn)方式還包括 UTF-16（字符用兩個字節(jié)或四個字節(jié)表示）和 UTF-32（字符用四個字節(jié)表示）
<1> 特點
變長的編碼方式，使用 1-4 個字節(jié)表示一個符號，根據(jù)不同符號變化字節(jié)長度
<2> 規(guī)則
- 對于單字節(jié)的符號，字節(jié)的第一位設為
0，后面7位為這個符號的 Unicode 碼。因此對于英語字母，UTF-8 編碼和 ASCII 碼是相同的。 - 對于
n字節(jié)的符號（n > 1），第一個字節(jié)的前n位都設為1，第n + 1位設為0，后面字節(jié)的前兩位一律設為10。剩下的沒有提及的二進制位，全部為這個符號的 Unicode 碼
Unicode符號范圍 | UTF-8編碼方式
(十六進制) | （二進制）
----------------------+---------------------------------------------
0000 0000-0000 007F | 0xxxxxxx
0-127
0000 0080-0000 07FF | 110xxxxx 10xxxxxx
128-2047
0000 0800-0000 FFFF | 1110xxxx 10xxxxxx 10xxxxxx
2048-65535
0001 0000-0010 FFFF | 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx<3> 例
漢字`中`為例，展現(xiàn)UTF-8編碼
ord("中") --- 3個字節(jié)
20013
bin(20013)
'0b 100 111000 101101'
1110 0100 10 111000 10 101101
1110 xxxx 10 xxxxxx 10 xxxxxx
hex(0b11100100)
'0xe4'
hex(0b10111000)
'0xb8'
hex(0b10101101)
'0xad'
e4b8ad（4）html實體編碼
<1> 實體表示法
實體的寫法是
&name;，其中的name是字符對應的實體。
<p>hello</p>
<!-- 等同于 -->
十進制
<p>hello</p>
ord('h') -> 114(在ascii表中，h對應104這個數(shù)字)
<!-- 等同于 -->
十六進制
<p>hello</p>
hex(104) -> 68(x代表16進制,16進制下，104 == x68)<2> 常用特殊字符
- <：<
- >：>
- 空格：
（5）urlcode編碼
<1> URL
URL 是“統(tǒng)一資源定位符”（Uniform Resource Locator），表示各種資源的互聯(lián)網地址。
出現(xiàn)位置：url地址欄
URL 字符轉義的方法是，字符的十六進制 ASCII 碼前面加上百分號（%）
【1】 網址的組成部分
https://www.example.com/path/index.html協(xié)議：常用（http、https）。ftp、telnet
對應端口：
http -- 80
https -- 443
ftp -- 20 21
telnet -- 23
ssh -- 22
DNS -- 53
dhcp -- 67? 68
smtp -- 25（郵件協(xié)議）
pop3 -- 110（郵件協(xié)議）
ladp -- 389（域控制器）
mysql -- 3306
sqlserver -- 1433（C#語言用得多）
oracle -- 1521
windows遠程連接端口 -- 3389
redis（nosql數(shù)據(jù)庫） -- 6379
【2】狀態(tài)碼
- request是代表Http請求信息的對象
- response對象是代表Http響應信息的對象（返回含有狀態(tài)碼）
2開頭：訪問成功
200 OK：請求成功，服務器正常響應。
3開頭：重定向（較多用于登錄）
300 Multiple Choices：客戶端請求的資源有多個可供選擇，需要進一步確定。
301 Moved Permanently：被請求的資源已永久移動到新的URL，客戶端應該使用新的URL發(fā)起請求。（永久轉移）
302 Found：被請求的資源已暫時移動到新的URL，客戶端應該繼續(xù)使用原始URL。（臨時轉移）
303 See Other：客戶端應該使用另一個URL來獲取資源。
304 Not Modified：客戶端的緩存資源仍然有效，可以直接使用緩存的副本。
307 Temporary Redirect：請求的資源暫時移動到其他URL，客戶端應該繼續(xù)使用原始URL。（與302基本一致）
308 Permanent Redirect：請求的資源永久移動到其他URL，客戶端應該使用新URL。
4開頭：
400 Bad Request：請求錯誤，服務器無法理解或處理請求。
401 Unauthorized：未授權，需要進行身份驗證或登錄。
403 Forbidden：禁止訪問，服務器拒絕請求。
404 Not Found：資源未找到，服務器無法找到請求的資源。
5開頭：
500 Internal Server Error：服務器內部錯誤，無法完成請求。<2> 編碼表示（英文字母不解析）
-
!：%21 -
#：%23（相當于注釋） -
$：%24 -
&：%26 -
'：%27 -
(：%28 -
)：%29 -
*：%2A -
+：%2B -
,：%2C -
/：%2F -
:：%3A -
;：%3B -
=：%3D -
?：%3F -
@：%40 -
[：%5B -
]：%5D -
空格：%20
例：在url地址欄輸入?id=1' order by 3 --+
url地址欄會將其解析為:?id=1%27%20order%20by%203%20--+
附：
- ord() --- unicode編碼
- hex() --- 16進制
- oct() --- 8進制
- int() --- 10進制
- bin() --- 二進制
img標簽實現(xiàn)繞過
基本用法
<img>標簽用于插入圖片。它是單獨使用的，沒有閉合標簽。
?<img src="foo.jpg">例：
[1] img標簽加載圖片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>img</title>
</head>
<body>
<img src="1111" alt="圖片加載失敗" width="300px" height="300px" onerror="alert(1)">
<!-- 加載失敗，觸發(fā)onerror事件 -->
</body>
</html>
圖片加載出現(xiàn)錯誤
[2] php文件
<?php
header('X-XSS-Protection:0');//通過php代碼關閉瀏覽器的防御措施
$xss = isset($_GET['xss'])? $_GET['xss'] : '';// 三元運算符
$xss = str_replace(array("(",")","&","\\","<",">","'"),'',$xss);// replace函數(shù)，替換()<>'&\\,全部替換為''
// 過濾大小括號，使其無法執(zhí)行函數(shù)
// &:防止使用html實體編碼
// \:防止使用\u，unicode編碼
// <>:防止使用標簽
echo "<img src=\"{$xss}\">";//打印
?>1) 反引號實現(xiàn)繞過：http:127.0.0.1/php/xss.php?xss=1" οnerrοr="alert`1`
2) 過濾反引號后，進行繞過
【1】實驗：將（）在urlcode編碼中，寫為：%28和%29。xss=1"?οnerrοr="alert%281%29
【2】實驗：在urlcode編碼中，%25為%。xss=1 οnerrοr="alert%25281%2529
由于js中無法編碼符號，所以顯示為直接輸出，過濾失敗
【3】實驗：使用location。xss=1" οnerrοr="javascript:alert%25281%2529
js中有個好用的特性：location這個函數(shù)，可以把右邊所有的東西變?yōu)橐粋€變量值，對于變量而言，js可以隨意編碼，最終實現(xiàn)繞過。文章來源：http://www.zghlxwxcb.cn/news/detail-621383.html
<a href="javascript:alert(1)"></a>
文章來源地址http://www.zghlxwxcb.cn/news/detail-621383.html
到了這里，關于安全基礎 --- html標簽 + 編碼（01）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
