TML转义字符：xss攻击与HTML字符的转义和反转义

xss与转义符

xss简单来说：

• XSS 攻击是页面被注入了恶意的代码

• XSS 漏洞是 可以让攻击者注入恶意代码可执行的漏洞

具体参看之前写的：

• web开发前端安全问题总结——web前端安全问题汇总 https://www.zhoulujun.cn/html/webfront/SGML/web/2017_0503_8004.html

• 前端安全配置xss预防针Content-Security-Policy(csp)配置详解 https://www.zhoulujun.cn/html/webfront/SGML/web/2017_0503_8004.html

• script新属性integrity与web安全，再谈xss https://www.zhoulujun.cn/html/webfront/ECMAScript/js6/2018_0521_8115.html

为了xss，常见的转义符

字符	转义后的字符
&	&
<	&lt;
>	&gt;
"	&quot;
'	'
/	/

转义只是防止xss攻击的一种手段之一，更多请查看：《web开发前端安全问题总结——web前端安全问题汇总》

html转义与反转义方法

html转义

lodashjs

lodashjs作为常用，集成了escape 方法

https://www.lodashjs.com/docs/lodash.escape

DOM API

转义方法

let textNode = document.createTextNode(`<script src='https://www.zhoulujun.cn/xxs.js'></script>`);
let div = document.createElement('div')
div.append(textNode);
console.log(div.innerHTML);

反转义方法

let str = `<script src='let doc = new DOMParser().parseFromString(str, 'text/html'); 
console.log(doc.documentElement.textContent);

字符串替换处理 转义与反转义

就是正则替换，这里想不讲了，能用库太多了，去看一下源码就好了

HTML常用转义字符对照表

最常用的字符实体 Character Entities

显示	说明	实体名称	实体编号
	半方大的空白	 
	全方大的空白	 
	不断行的空白格	 
<	小于	&lt;	<
>	大于	&gt;	>
&	&符号	&amp;	&
"	双引号	&quot;	"
	版权	&copy;
	已注册商标	&reg;
	商标（美国）
×	乘号	&times;	×
÷	除号	&divide;	÷

ISO 8859-1 (Latin-1)字符集

HTML 4.01 支持 ISO 8859-1 (Latin-1) 字符集。

备注：为了方便起见，以下表格中，“实体名称”简称为“名称”，“实体编号”简称为“编号”

显示	名称	编号	显示	名称	编号	显示	名称	编号	显示	名称	编号	显示	名称	编号
	 		¡	¡	¡	¢	¢	¢	£	£	£	¤	¤	¤
¥	¥	¥	¦	¦	¦	§	§	§	¨	¨	¨		©
ª	ª	ª	«	«	«	¬	¬	¬		­			®
¯	¯	¯	°	°	°	±	±	±	²	²	²	³	³	³
´	´	´	µ	µ	µ	¶	¶	¶	·	·	·	¸	¸	¸
¹	¹	¹	º	º	º	»	»	»	¼	¼	¼	½	½	½
¾	¾	¾	¿	¿	¿	À	À	À	Á	Á	Á	Â	Â	Â
Ã	Ã	Ã	Ä	Ä	Ä	Å	Å	Å	Æ	Æ	Æ	Ç	Ç	Ç
È	È	È	É	É	É	Ê	Ê	Ê	Ë	Ë	Ë	Ì	Ì	Ì
Í	Í	Í	Î	Î	Î	Ï	Ï	Ï	Ð	Ð	Ð	Ñ	Ñ	Ñ
Ò	Ò	Ò	Ó	Ó	Ó	Ô	Ô	Ô	Õ	Õ	Õ	Ö	Ö	Ö
×	×	×	Ø	Ø	Ø	Ù	Ù	Ù	Ú	Ú	Ú	Û	Û	Û
Ü	Ü	Ü	Ý	Ý	Ý	Þ	Þ	Þ	ß	ß	ß	à	à	à
á	á	á	â	â	â	ã	ã	ã	ä	ä	ä	å	å	å
æ	æ	æ	ç	ç	ç	è	è	è	é	é	é	ê	ê	ê
ë	ë	ë	ì	ì	ì	í	í	í	î	î	î	ï	ï	ï
ð	ð	ð	ñ	ñ	ñ	ò	ò	ò	ó	ó	ó	ô	ô	ô
õ	õ	õ	ö	ö	ö	÷	÷	÷	ø	ø	ø	ù	ù	ù
ú	ú	ú	û	û	û	ü	ü	ü	ý	ý	ý	þ	þ	þ
ÿ	ÿ	ÿ

数学和希腊字母标志
symbols, mathematical symbols, and Greek letters

显示	名称	编号	显示	名称	编号	显示	名称	编号	显示	名称	编号	显示	名称	编号
ƒ	ƒ	ƒ	Α	Α	Α	Β	Β	Β	Γ	Γ	Γ	Δ	Δ	Δ
Ε	Ε	Ε	Ζ	Ζ	Ζ	Η	Η	Η	Θ	Θ	Θ	Ι	Ι	Ι
Κ	Κ	Κ	Λ	Λ	Λ	Μ	Μ	Μ	Ν	Ν	Ν	Ξ	Ξ	Ξ
Ο	Ο	Ο	Π	Π	Π	Ρ	Ρ	Ρ	Σ	Σ	Σ	Τ	Τ	Τ
Υ	Υ	Υ	Φ	Φ	Φ	Χ	Χ	Χ	Ψ	Ψ	Ψ	Ω	Ω	Ω
α	α	α	β	β	β	γ	γ	γ	δ	δ	δ	ε	ε	ε
ζ	ζ	ζ	η	η	η	θ	θ	θ	ι	ι	ι	κ	κ	κ
λ	λ	λ	μ	μ	μ	ν	ν	ν	ξ	ξ	ξ	ο	ο	ο
π	π	π	ρ	ρ	ρ	ς	ς	ς	σ	σ	σ	τ	τ	τ
υ	υ	υ	φ	φ	φ	χ	χ	χ	ψ	ψ	ψ	ω	ω	ω
?	ϑ	ϑ	?	ϒ	ϒ	?	ϖ	ϖ	•	•	•	…	…	…
′	′	′	″	″	″	‾	‾	‾	⁄	⁄	⁄	℘	℘	℘
ℑ	ℑ	ℑ	ℜ	ℜ	ℜ		™		ℵ	ℵ	ℵ	←	←	←
↑	↑	↑	→	→	→	↓	↓	↓		↔		↵	↵	↵
⇐	⇐	⇐	⇑	⇑	⇑	⇒	⇒	⇒	⇓	⇓	⇓	⇔	⇔	⇔
∀	∀	∀	∂	∂	∂	∃	∃	∃	∅	∅	∅	∇	∇	∇
∈	∈	∈	∉	∉	∉	∋	∋	∋	∏	∏	∏	∑	∑	∑
−	−	−	∗	∗	∗	√	√	√	∝	∝	∝	∞	∞	∞
∠	∠	∠	∧	∧	∧	∨	∨	∨	∩	∩	∩	∪	∪	∪
∫	∫	∫	∴	∴	∴	∼	∼	∼	∝	≅	≅	≈	≈	≈
≠	≠	≠	≡	≡	≡	≤	≤	≤	≥	≥	≥	⊂	⊂	⊂
⊃	⊃	⊃	⊄	⊄	⊄	⊆	⊆	⊆	⊇	⊇	⊇	⊕	⊕	⊕
⊗	⊗	⊗	⊥	⊥	⊥	⋅	⋅	⋅	?	⌈	⌈	?	⌉	⌉
?	⌊	⌊	?	⌋	⌋	?	⟨	⟨	?	⟩	⟩	◊	◊	◊
	♠			♣			♥			♦

重要的国际标记
markup-significant and internationalization characters

显示	名称	编号	显示	名称	编号	显示	名称	编号	显示	名称	编号	显示	名称	编号
"	&quot;	"	&	&amp;	&	<	&lt;	<	>	&gt;	>	Œ	&OElig;	Œ
œ	&oelig;	œ	Š	&Scaron;	Š	š	&scaron;	š	Ÿ	&Yuml;	Ÿ	ˆ	&circ;	ˆ
˜	&tilde;	˜		&ensp;			&emsp;			&thinsp;		‌	&zwnj;	‌
‍	&zwj;	‍	‎	&lrm;	‎	‏	&rlm;	‏	–	&ndash;	–	—	&mdash;	—
‘	&lsquo;	‘	’	&rsquo;	’	‚	&sbquo;	‚	“	&ldquo;	“	”	&rdquo;	”
„	&bdquo;	„	†	&dagger;	†	‡	&Dagger;	‡	‰	&permil;	‰	‹	&lsaquo;	‹
›	&rsaquo;	›	€	&euro;	€

---

JavaScript转义符

转义序列	字符
\b	退格
\f	走纸换页
\n	换行
\r	回车
\t	横向跳格 (Ctrl-I)
\'	单引号
\"	双引号
\\	反斜杠

富文本通用转义字符

字符	十进制	转义字符	描述
@	&#64	&commat	at 符号
	&#169	&copy	版权符号
!	&#33	&excl	感叹号
¡	&#161	&iexcl	倒置感叹号
:	&#58	&colon	冒号
,	&#44	&comma	逗号
·	&#183	&middot	中间点
‘	&#39	&apos	撇号
‘	&#8216	&lsquo	左单引号
“	&#8220	&ldquo	左双引号
(	&#40	&lpar	左括号
[	&#91	&lsqb	左方括号
{	&#123	&lcub	左花括号
§	&#167	&sect	分节符号
_	&#95	&lowbar	单下划线
|	&#124	&verbar	竖线
‖	&#8214	&Verbar	双竖线
∠	&#8736	&ang	角
#	&#35	&num	数字标志
$	&#36	&dollar	美元符号
%	&#37	&percnt	百分号
‰	&#8240	&permil	千分号
‱	&#8241	pertenk	万分号
*	&#42	&ast	星号
/	&#47	&sol	斜线符号
+	&#43	&add	加号
×	&#215	&times	乘号
=	&#61	&equal	等于号
≈	&#8776	&asymp	约等于
<	&#60	&lt	小于号
≤	&#8804	&le	小于等于
¹	&#185	&sup1	上标 1
²	&#178	&sup2	上标 2
³	&#179	&sup3	上标 3
&	&#38	&amp	and 符号
	&#174	&reg	注册商标符
?	&#63	&quest	问号
¿	&#191	&iquest	倒置问号
;	&#59	&semi	分号
.	&#46	&period	句号
•	&#8226	&bull	加重号
“	&#34	&quot	引号
’	&#8217	&rsquo	右单引号
”	&#8221	&rdquo	右双引号
)	&#41	&rpar	右括号
]	&#93	&rsqb	右方括号
}	&#125	&rcub	右花括号
¶	&#182	&para	段落符号
__	&#818	&UnderBar	双下划线
¦	&#166	&brvbar	间断竖线
…	&#8230	&hellip	三点省略号
^	&#94	&Hat	hat符号
π	&#961	&pi	圆周率
¥	&#165	&yen	元符号
°	&#176	&deg	度符号
√	&#8730	&radic	平方根
∞	&#8734	&infin	正无穷
±	&#177	&plusmn	加减符号
	&#92	&bsol	反斜线符号
–	&#8211	&ndash	减号
÷	&#247	&divide	除号
≠	&#8800	&ne	不等于
≡	&#8801	&equiv	相当于
>	&#62	&gt	大于号
≥	&#8805	&ge	大于等于
¼	&#188	&frac14	四分之一
½	&#189	&frac12	二分之一
¾	&#190	&frac34	四分之三

HTML特殊转义字符对照表

HTML特殊转义字符对照表

字符	十进制	转义字符	字符	十进制	转义字符	字符	十进制	转义字符
?	¡	¡	Á	Á	Á	á	á	á
￠	¢	¢	Â	Â	ˆ	â	&#226	â
￡	£	£	Ã	Ã	Ã	ã	ã	ã
¤	¤	¤	Ä	Ä	&Auml	ä	ä	ä
￥	¥	¥	Å	Å	˚	å	å	å
|	¦	¦	Æ	Æ	Æ	æ	æ	æ
§	§	§	Ç	Ç	Ç	ç	ç	ç
¨	¨	¨	È	È	È	è	è	è
	©	©	É	É	É	é	é	é
a	ª	ª	Ê	Ê	Ê	ê	ê	ê
?	«	«	Ë	Ë	Ë	ë	ë	ë
?	¬	¬	Ì	Ì	Ì	ì	ì	ì
/x7f	­	­	Í	Í	Í	í	í	í
	®	®	Î	Î	Î	î	î	î
ˉ	¯	¯	Ï	Ï	Ï	ï	ï	ï
°	°	°	Ð	Ð	Ð	ð	ð	&ieth;
±	±	±	Ñ	Ñ	Ñ	ñ	ñ	ñ
2	²	²	Ò	Ò	Ò	ò	ò	ò
3	³	³	Ó	Ó	Ó	ó	ó	ó
′	´	´	Ô	Ô	Ô	ô	ô	ô
μ	µ	µ	Õ	Õ	Õ	õ	õ	õ
?	¶	¶	Ö	Ö	Ö	ö	ö	ö
·	·	·	×	×	×	÷	÷	÷
?	¸	¸	Ø	Ø	Ø	ø	ø	ø
1	¹	¹	Ù	Ù	Ù	ù	ù	ù
o	º	º	Ú	Ú	Ú	ú	ú	ú
?	»	»	Û	Û	Û	û	û	û
?	¼	¼	Ü	Ü	Ü	ü	ü	ü
?	½	½	Ý	Ý	Ý	ý	ý	ý
?	¾	¾	Þ	Þ	Þ	þ	þ	þ
?	¿	¿	ß	ß	ß	ÿ	ÿ	ÿ
À	À	À	à	à	à

参考文章：

巧用DOM API实现HTML字符的转义和反转义 https://www.zhangxinxu.com/wordpress/2021/01/dom-api-html-encode-decode/

java转换 HTML字符实体，java特殊字符转义字符串 https://blog.51cto.com/xionggeclub/3768494

转载本站文章《HTML转义字符：xss攻击与HTML字符的转义和反转义》,
请注明出处：https://www.zhoulujun.cn/html/webfront/SGML/htmlBase/2022_0617_8846.html