资讯专栏INFORMATION COLUMN

html实体编码遇上js代码

史占广 / 1847人阅读

摘要:我们要像在中对单双引号转义一样,对属性中的单双引号转义在中输出预留符号,可以使用字符实体转义的形式,这里有简单介绍。

单双引号 在js代码中

在js中单、双引号引起来的是字符串,如果我们要在字符串中使用单、双引号,需要反斜杠进行转义

let str="user"s name";
// or
let str=" user"s name";
// or
let str="she said:"...".";

如果在字符串中输出反斜杠,仍然是用反斜杠转义,即2个反斜杠输出1个反斜杠

在html代码中

html标签中,属性值通常用双引号引起来,也可以使用单引号或不用引号。



这3种写法都正确,不过通常我们是选择用双引号引起来。
如果我们要在属性值中使用单、双绰号,我们不能直接写成下面这样



这些全部是错误的。我们要像在js中对单、双引号转义一样,对属性中的单、双引号转义

在html中输出预留符号,可以使用字符实体转义的形式,这里有简单介绍:http://www.w3school.com.cn/html/html_entities.asp。即想输出一个双引号可以使用"的形式,

除此之外,html还支持十进制与十六进制编码的形式输出字符,如我们知道字符aascii码的十进制是97 十六进制是61
所以我们在页面body中输出一个字符a,有以下3种形式


  a
  a
  a

同样,单双引号也有十进制(单:39,双:34)与十六进制(单:27,双:22),所以我们在属性中输出一个单引号有2种选择,十进制与十六进制


而输出一个双引号则有3种选择



当js代码遇上实体编码

我们可以通过dom节点提供的事件写上调用js的代码,如点击body弹出hello这个字符串,我们可以写成


click here

如果我们的需求是就弹出一个双引号呢?
根据前述规则,我们要写成:


click here

当然,alert里的单引号也可以使用十进制或十六进制编码


click here

这样也是可以的。
是不是有点xss的感觉?

如果我们把弹双引号的需求改成单引号呢?


click here

如果我们用十进制或十六进制编码呢?


click here

这样仍然是不可以的

我们要对js字符串中的单引号进行转义,如


click here


click here

前面的onclick="alert(""")"看起来还正常,后面的这个onclick="alert(""")"就有点不直观了。因为后面这个看上去反斜杠像在转义&这1个字符,而&在js的字符串中并不需要转义的。

动态输出

如前述的alert弹出的消息,如果是一个变量控制,动态输出呢?


click here

那我们这个msg字符串就得注意了,从这个示例来看,这个动态的msg即出现在属性onclick中,也出现在alert的单引号开始的字符串中。

我们要对msg中的双引号转成""",并对msg中单引号的前面加上一个反斜杠 ?

题外话:对msg中的反斜杠需要做double处理,因为反斜杠在html属性中并不是特殊的,但在js的字符串中是特殊的。因此正确的做法是对反斜杠及单引号前面各加上一个反斜杠

然而,你并不能保证属性是用双引号,alert中的字符串用的是单引号,因为可以写成下面这样


click here

?

这种情况我们要对msg中的单引号转成'',并对msg中双引号前面加上一个反斜杠

题外话:同上

看上去要根据不同的情况做不同的处理,其实也不需要
我们只需要对单、双引号前面加上一个反斜杠然后再对单、双引号实体编码即可。

在js中如果反斜杠后面跟的不需要反斜杠转义的字符,那么这个反斜杠是被丢弃的,因此像

var str="user"s name";

单引号前面多加一个反斜杠也不要紧的。

自动化处理与识别提醒

在magix项目中,由于magix-combine的支持,可识别出属性中js代码的部分,并自动化处理,如

name这个变量可包含任意的单、双引号及反斜杠。工具自动识别并处理,开发者不需要做任何事情。

而对于这样的写法:



第一种写法其实并不正确,但第二种情况看上去又怪怪的。magix-combine工具能识别出来是否需要添加反斜杠,并自动添加处理。
第一种需要添加反斜杠,工具会自动加上,并提醒开发者这里的写法是不正确的。
第二种说明开发者意识到了问题所在,自己处理了,工具就不再处理也不再提醒开发者。

相关链接:

https://github.com/thx/magix
https://github.com/thx/magix-combine

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50974.html

相关文章

  • jshtml转义和反转义以及编码和解码

    摘要:或者另一个需求,对编辑器中的文本进行编码再传进数据库,或者从库中读取的数据需要进行解码才能渲染到网页上。这时候,我们常常就会使用到转义与反转义,编码和解码。 在项目开发过程中,我会有时候遇上这样的一个业务需求:对从数据库中读取出来的html数据进行反转义,才能在当前网页当前进行渲染。 或者另一个需求,对编辑器中的文本进行编码再传进数据库,或者从库中读取的数据需要进行解码才能渲染到网页上...

    skinner 评论0 收藏0
  • jshtml转义和反转义以及编码和解码

    摘要:或者另一个需求,对编辑器中的文本进行编码再传进数据库,或者从库中读取的数据需要进行解码才能渲染到网页上。这时候,我们常常就会使用到转义与反转义,编码和解码。 在项目开发过程中,我会有时候遇上这样的一个业务需求:对从数据库中读取出来的html数据进行反转义,才能在当前网页当前进行渲染。 或者另一个需求,对编辑器中的文本进行编码再传进数据库,或者从库中读取的数据需要进行解码才能渲染到网页上...

    _ipo 评论0 收藏0
  • Http请求中的Content-Type

    摘要:协议采用了请求响应模型。报头分为通用报头,请求报头,响应报头和实体报头。格式支持比键值对复杂得多的结构化数据,这一点也很有用。例如下面这段代码最终发送的请求是这种方案,可以方便的提交复杂的结构化数据,特别适合的接口。 一 前言 ----现在搞前端的不学好http有关的知识已经不行啦~笔者也是后知后觉,在搞node的时候意识到网络方面的薄弱,开始学起http相关知识。这一篇是非常基础的讲...

    Betta 评论0 收藏0
  • 前端开发中的字符编码

    摘要:当然,也可自己写一个转换函数,按照一定规则便行为编码的字节,如下例中国结果中国结果结果通过简单的函数,就可以完成编码到编码的转换,进而完成宽字节字符到编码的转换。 前端开发过程中会接触各种各样的编码,比较常见的主要是 UTF-8 和 HTML 实体编码,但是 web 前端的世界却不止这两种编码,而且编码的选择也会造成一定的问题,如前后端开发过程中不同编码的兼容、多字节编码可能会造成的 ...

    Rindia 评论0 收藏0

发表评论

0条评论

史占广

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<