Unicode转义字符&html实体符号

常用编码：blog.csdn.net/hibari_18/a...
前端转义防XSS的常见方法？blog.csdn.net/2501_904106...
unicode转义字符（\uxxx）的编码和解码 www.cnblogs.com/seesea125/a...
blog.csdn.net/weixin_4420...

一、Unicode转义字符（\uXXXX）的编码和解码

定义

Unicode简介：Unicode是计算机科学领域的一项业界标准，为每种语言中的每个字符设定统一且唯一的二进制编码。
转码方式 ：将字符转换为ASCII码后，前面添加\u进行Unicode编码。由于\u需要转义，因此使用\u表示。

Unicode编码，又称万国码、国际码、统一码，是为了解决传统的字符编码方案的局限而产生的，它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。Unicode 编码共有三种具体实现，分别为utf-8,utf-16,utf-32，其中utf-8占用一到四个字节，utf-16占用二或四个字节，utf-32占用四个字节。

UTF-8的特点是对不同范围的字符使用不同长度的编码。
UTF-16编码以16位无符号整数为单位。我们把Unicode编码记作U。前缀写为\u、%u。
UTF-32编码以32位无符号整数为单位。

Unicode编码与ASCII编码不兼容，但可以转换。

编码与解码

在涉及Web前端开发时, 有时会遇到\uXXXX格式表示的字符, 其中XXXX是16进制数字的字符串表示形式, 在js中这个叫Unicode转义字符 , 和\n \r同属于转义字符. 在其他语言中也有类似的, 可能还有其它变形的格式.多数时候遇到需要解码的情况多点。

（1）解码decode

解码方法（JS实现）

unescape是用来处理%uXXXX这样格式的字符串, 将\uXXXX替换成%uXXXX后unescape就可以处理了.

js 复制代码

function decode(s) {
    return unescape(s.replace(/\\(u[0-9a-fA-F]{4})/gm, '%$1'));
}

function decode2(s) {
    return decodeURIComponent(s.replace(/\\(u[0-9a-fA-F]{4})/gm, '%$1'));
}

eg1:

js 复制代码

   let a =  '\u003C\u0069\u0066\u0072\u0061\u006D\u0065\u0020\u0073\u0072\u0063\u003D\u006A\u0061\u0076\u0061\u0073\u0063\u0072\u0069\u0070\u0074\u003A\u0061\u006C\u0065\u0072\u0074\u0028\u0027\u0078\u0073\u0073\u0027\u0029\u003E\u003C\u002F\u0069\u0066\u0072\u0061\u006D\u0065\u003E';


console.log('2111', decode(a)); //  <iframe src=javascript:alert('xss')></iframe>

ge2:

js 复制代码

  let w =   '\u003C\u0069\u006D\u0067\u0020\u0073\u0072\u0063\u003D\u0022\u0068\u0074\u0074\u0070\u0073\u003A\u002F\u002F\u0031\u0037\u0032\u002E\u0032\u0036\u002E\u0036\u002E\u0031\u0033\u002F\u0073\u0079\u0073\u002F\u0074\u0072\u0061\u0064\u0065\u002F\u0073\u0074\u0061\u0074\u0069\u0063\u002F\u0069\u006D\u0067\u002F\u0072\u0065\u0067\u002D\u0074\u0079\u0070\u0065\u0033\u002E\u0064\u0035\u0063\u0039\u0034\u0066\u0036\u0030\u0063\u0036\u0032\u0063\u0066\u0035\u0039\u0030\u0034\u0065\u0031\u0062\u0038\u0039\u0039\u0062\u0062\u0064\u0063\u0066\u0031\u0030\u0031\u0065\u002E\u006A\u0070\u0067\u0022\u0020\u006F\u006E\u006C\u006F\u0061\u0064\u003D\u0022\u0070\u0072\u006F\u006D\u0070\u0074\u0028\u0031\u0029\u0022\u003E';
  
console.log('3111', decode2(w)); //  <img src="https://172.26.6.13/sys/trade/static/img/reg-type3.d5c94f60c62cf5904e1b899bbdcf101e.jpg" onload="prompt(1)">

（2）编码encode

编码实现（JS实现）

方法1：和解码中相对应, 使用escape编码, 然后将%uXXXX替换为\uXXXX, 因为escape还可能把一些字符编码成%XX的格式, 所以这些字符还需要使用unescape还原回来.

escape编码结果%uXXXX中的XXXX是大写的, 所以后面的replace只处理大写的A-F.

js 复制代码

function encode1(s) {
    return escape(s).replace(/%(u[0-9A-F]{4})|(%[0-9A-F]{2})/gm, function ($0, $1, $2) {
      return ($1 && '\\' + $1.toLowerCase()) || unescape($2);
    });
}

方法2：不使用正则和escape，遍历字符串中的字符, 那些charCode大于256的会转换成16进制字符串c.toString(16), 如果不足4位则左边补0pad.substr(0, 4 - c.length). 结尾将遍历的结果合并成字符串返回.

js 复制代码

  function encode2(s) {
    var i,
      c,
      ret = [],
      pad = '000';
    for (i = 0; i < s.length; i++) {
      c = s.charCodeAt(i);
      if (c > 256) {
        c = c.toString(16);
        ret[i] = '\\u' + pad.substr(0, 4 - c.length) + c;
      } else {
        ret[i] = s[i];
      }
    }
    return ret.join('');
  }

二、html实体符号编码解析

实体编号的组成

和号（&）
井号（#）
编号（数字）
封号（;）

实体符号的组成

和号（&）
字符（字母）
封号（;）

实体名称是区分大小写的

eg: 一般来说，在编辑HTML文档时，浏览器会自动删除空格。不管你按空格键，加入多少空格，一部分浏览器处理文档时，都看成一个空格。比如你在两个字符之间加上了10个空格，HTML会截去9个空格，只保留一个。为了在网页中，使用空格这个特殊字符，我们便可以使用实体字符或者是实体编码来转义成空格

在html文档中表示为：或者是

由于'不能在HTML处理器中一致的安全使用，实际上仅有", &, <, and >4个字符实体可以在所有处理环境下通用。所以，尽量使用实体编号来转义字符避免部分字符无法转义。

, 　　　　, ,

‐ - . 　　　　. . / 　　　　/ / : 　　　　: : ; 　　　　; ; < 　　　　< < = 　　　　= =

> > ? 　　　　? ? @ 　　　　@ @ [ 　　　　[ [ \ 　　　　\ \ ] 　　　　] ] ^ 　　　　ˆ ^ _ 　　　　_ _ ` 　　　　` ` { 　　　　{ { | 　　　　| | } 　　　　} } ~ 　　　　˜ ~ ©

常见HTML实体字符转义表

Character	Entity Name	Entity Number(十进制)
	` `	` `
!	`&excl;`	`!`
"	`"`	`"`
#	`&num;`	`#`
$	`&dollar;`	`$`
%	`&percnt;`	`%`
&	`&`	`&`
'	`'`	`'`
(	`(`	`(`
)	`)`	`)`
*	`&ast;`	`*`
+	`+`	`+`

防止XSS攻击：在动态生成HTML时，必须对用户输入进行转义。

js 复制代码

function escapeHTML(str) {
    return str.replace(
        /[&<>'"]/g,
        tag =>
        ({
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            "'": '&#39;',
            '"': '&quot;',
            "(": '&#40;',
            ")": '&#41;',
            "*": '&#42;',
            "+": '&#43;',
            ",": '&#44;',
            "-": '&#45;',
            ".": '&#46;',
            "/": '&#47;',
            ":": '&#58;',
            ";": '&#59;',
            "_": '&#95;',
        }[tag] || tag)
    );
}

三、内容安全策略CSP

实施内容安全策略（CSP）可以进一步减少XSS攻击的风险。CSP是一种额外的安全层，可以帮助检测和减少某些类型的攻击，包括XSS和数据劫持等。通过设置HTTP头部中的CSP策略，你可以限制资源只能从指定的来源加载。

js 复制代码

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com;

Character	Entity Name	Entity Number(十进制)
	` `	` `
!	`&excl;`	`!`
"	`"`	`"`
#	`&num;`	`#`
$	`&dollar;`	`$`
%	`&percnt;`	`%`
&	`&`	`&`
'	`'`	`'`
(	`(`	`(`
)	`)`	`)`
*	`&ast;`	`*`
+	`+`	`+`

Character	Entity Name	Entity Number(十进制)
	` `	` `
!	`&excl;`	`!`
"	`"`	`"`
#	`&num;`	`#`
$	`&dollar;`	`$`
%	`&percnt;`	`%`
&	`&`	`&`
'	`'`	`'`
(	`(`	`(`
)	`)`	`)`
*	`&ast;`	`*`
+	`+`	`+`

Character	Entity Name	Entity Number(十进制)
	` `	` `
!	`&excl;`	`!`
"	`"`	`"`
#	`&num;`	`#`
$	`&dollar;`	`$`
%	`&percnt;`	`%`
&	`&`	`&`
'	`'`	`'`
(	`(`	`(`
)	`)`	`)`
*	`&ast;`	`*`
+	`+`	`+`