-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2018-06-08
来源 ：
阅读 1683
评论 0
摘要：当js代码遇上Html实体编码，我们可以通过dom节点提供的事件写上调用js的代码，希望阅读本篇文章以后大家有所收获，帮助大家对HTML+CSS的理解更加深入。
单双引号
在js代码中
在js中单、双引号引起来的是字符串，如果我们要在字符串中使用单、双引号，需要反斜杠进行转义
let str='user\'s name';// orlet str=" user's name";// orlet str="she said:\"...\".";
如果在字符串中输出反斜杠，仍然是用反斜杠转义，即2个反斜杠输出1个反斜杠
在html代码中
html标签中，属性值通常用双引号引起来，也可以使用单引号或不用引号。
<input name=user /><input name="user" /><input name='user' />
这3种写法都正确，不过通常我们是选择用双引号引起来。
如果我们要在属性值中使用单、双绰号，我们不能直接写成下面这样
<input name=user'name /><input name="user"name" /><input name='user'name' />
这些全部是错误的。我们要像在js中对单、双引号转义一样，对属性中的单、双引号转义
在html中输出预留符号，可以使用字符实体转义的形式，这里有简单介绍：//www.w3school.com.cn/html/html_entities.asp。即想输出一个双引号可以使用"的形式，
<input name="user"name" />
除此之外，html还支持十进制与十六进制编码的形式输出字符，如我们知道字符a的ascii码的十进制是97 十六进制是61
所以我们在页面body中输出一个字符a，有以下3种形式
<body>
a<!--直接输出-->
a<!--十进制输出-->
a<!--十六进制输出--></body>
同样，单双引号也有十进制(单：39，双：34)与十六进制（单：27，双：22），所以我们在属性中输出一个单引号有2种选择，十进制与十六进制
<input name='user'name' /><!--十进制--><input name='user'name' /><!--十六进制-->
而输出一个双引号则有3种选择
<input name="user"name" /><!--实体--><input name="user"name" /><!--十进制--><input name="user"name" /><!--十六进制-->
当js代码遇上实体编码
我们可以通过dom节点提供的事件写上调用js的代码，如点击body弹出hello这个字符串，我们可以写成
<body onclick="alert('hello')">
click here</body>
如果我们的需求是就弹出一个双引号呢？
根据前述规则，我们要写成：
<body onclick="alert('"')"><!--这里用十进制或十六进制都可以-->
click here</body>
当然，alert里的单引号也可以使用十进制或十六进制编码
<body onclick="alert("'")"><!--"单引号 '双引号-->
click here</body>
这样也是可以的。
是不是有点xss的感觉
如果我们把弹双引号的需求改成单引号呢？
<body onclick="alert(''')"><!--这样html中是合法的，但js中并不合法，因为在js中，中间的单引号并没有转义-->
click here</body>
如果我们用十进制或十六进制编码呢？
<body onclick="alert('"')"><!--这样可以吗-->
click here</body>
这样仍然是不可以的
我们要对js字符串中的单引号进行转义，如
<body onclick="alert('\'')"><!--转义后可正确弹出-->
click here</body>
或
<body onclick="alert('\"')"><!--转义后可正确弹出-->
click here</body>
前面的onclick="alert('\'')"看起来还正常，后面的这个onclick="alert('\"')"就有点不直观了。因为后面这个看上去反斜杠像在转义&这1个字符，而&在js的字符串中并不需要转义的。
动态输出
如前述的alert弹出的消息，如果是一个变量控制，动态输出呢？
<body onclick="alert('${msg}')">
click here</body>
那我们这个msg字符串就得注意了，从这个示例来看，这个动态的msg即出现在属性onclick中，也出现在alert的单引号开始的字符串中。
我们要对msg中的双引号转成"或"或"，并对msg中单引号的前面加上一个反斜杠\
题外话：对msg中的反斜杠需要做double处理，因为反斜杠在html属性中并不是特殊的，但在js的字符串中是特殊的。因此正确的做法是对反斜杠及单引号前面各加上一个反斜杠
然而，你并不能保证属性是用双引号，alert中的字符串用的是单引号，因为可以写成下面这样
<body onclick='alert("${msg}")'>
click here</body>
这种情况我们要对msg中的单引号转成'或'，并对msg中双引号前面加上一个反斜杠\
题外话：同上
看上去要根据不同的情况做不同的处理，其实也不需要
我们只需要对单、双引号前面加上一个反斜杠\然后再对单、双引号实体编码即可。
在js中如果反斜杠后面跟的不需要反斜杠转义的字符，那么这个反斜杠是被丢弃的，因此像
var str="user\'s name";
单引号前面多加一个反斜杠也不要紧的。
自动化处理与识别提醒
在magix项目中，由于magix-combine的支持，可识别出属性中js代码的部分，并自动化处理，如
<button mx-click="showName({name:'<%=name%>'})">click here</button>
name这个变量可包含任意的单、双引号及反斜杠。工具自动识别并处理，开发者不需要做任何事情。
而对于这样的写法：
<button mx-click="showName({name:'"'})">click here</button><!-- or--><button mx-click="showName({name:'\"'})">click here</button>
第一种写法其实并不正确，但第二种情况看上去又怪怪的。magix-combine工具能识别出来是否需要添加反斜杠，并自动添加处理。
第一种需要添加反斜杠，工具会自动加上，并提醒开发者这里的写法是不正确的。
第二种说明开发者意识到了问题所在，自己处理了，工具就不再处理也不再提醒开发者。
本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
