html实体编码遇上js代码

简介: 在js中单、双引号引起来的是字符串,如果我们要在字符串中使用单、双引号,需要反斜杠进行转义。而如果字符串出现在html标签中,我们需要做转义处理。

单双引号

在js代码中

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

let str='user\'s name';
// or
let str=" user's name";
// or
let 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中输出预留符号,可以使用字符实体转义的形式,这里有简单介绍:http://www.w3school.com.cn/html/html_entities.asp。即想输出一个双引号可以使用&quot;的形式,

<input name="user&quot;name" />

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

<body>
  a<!--直接输出-->
  &#97;<!--十进制输出-->
  &#x61;<!--十六进制输出-->
</body>

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

<input name='user&#39;name' /><!--十进制-->
<input name='user&#x27;name' /><!--十六进制-->

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

<input name="user&quot;name" /><!--实体-->
<input name="user&#34;name" /><!--十进制-->
<input name="user&#x22;name" /><!--十六进制-->

当js代码遇上实体编码

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

<body onclick="alert('hello')">
click here
</body>

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

<body onclick="alert('&quot;')"><!--这里用十进制或十六进制都可以-->
click here
</body>

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

<body onclick="alert(&#34;&#39;&#34;)"><!--&#34;单引号  &#39;双引号-->
click here
</body>

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

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

<body onclick="alert(''')"><!--这样html中是合法的,但js中并不合法,因为在js中,中间的单引号并没有转义-->
click here
</body>

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

<body onclick="alert('&#34;')"><!--这样可以吗-->
click here
</body>

这样仍然是不可以的

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

<body onclick="alert('\'')"><!--转义后可正确弹出-->
click here
</body>

<body onclick="alert('\&#34;')"><!--转义后可正确弹出-->
click here
</body>

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

动态输出

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

<body onclick="alert('${msg}')">
click here
</body>

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

我们要对msg中的双引号转成&quot;&#34;&#x22;,并对msg中单引号的前面加上一个反斜杠\ ?

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

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

<body onclick='alert("${msg}")'>
click here
</body>

?

这种情况我们要对msg中的单引号转成&#39&#x27,并对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:'&#34;'})">click here</button>
<!-- or-->
<button mx-click="showName({name:'\&#34;'})">click here</button>

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

相关链接:

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

目录
相关文章
|
14天前
|
消息中间件 JavaScript 中间件
函数计算产品使用问题之WebIDE编写的Node.js代码是否会自动进行打包部署
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
15天前
|
JavaScript 前端开发 编译器
解锁JavaScript模块化编程新纪元:从CommonJS的基石到ES Modules的飞跃,探索代码组织的艺术与科学
【8月更文挑战第27天】随着Web应用复杂度的提升,JavaScript模块化编程变得至关重要,它能有效降低代码耦合度并提高项目可维护性及扩展性。从CommonJS到ES Modules,模块化标准经历了显著的发展。CommonJS最初专为服务器端设计,通过`require()`同步加载模块。而ES Modules作为官方标准,支持异步加载,更适合浏览器环境,并且能够进行静态分析以优化性能。这两种标准各有特色,但ES Modules凭借其更广泛的跨平台兼容性和现代语法逐渐成为主流。这一演进不仅标志着JavaScript模块化的成熟,也反映了整个JavaScript生态系统的不断完善。
33 3
|
6天前
网站维护更新简易单页404页html代码
一个简约风格的单页html页面,可用于网站维护中或更新网站时挂个首页使用,如果不喜欢现在的颜色请F12修改设置既可。
7 1
网站维护更新简易单页404页html代码
|
2天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
3天前
|
移动开发 JavaScript 安全
总有一款适合您分享78个JS相册代码
本文分享了78款JS相册代码,包括3D相册旋转木马、图片悬浮效果、倾斜图片幻灯片切换等特效,适用于各种图片展示场景。无论您需要哪种样式,都能在这里找到满意的解决方案。快来挑选吧!参考链接:[点击这里](https://www.vipwb.com/sitemap.xml)。
19 4
|
4天前
|
JavaScript
分享一款520表白节JS代码
今天给大家分享一款JS表白源码 js会随 随机颜色心形跟随鼠标互动520表白节女神表白利器! 修改的话就搜索:LOVEh 就能找到这个英文了。
5 0
分享一款520表白节JS代码
|
11天前
|
JSON JavaScript 前端开发
如何使用代码注释:关于JavaScript与TypeScript
TSDoc是一种标准化TypeScript代码文档注释的规范,使不同工具能无干扰地提取内容。它包括多种标记,如@alpha、@beta等发布阶段标记;@decorator、@deprecated等功能标记;@defaultValue、@eventProperty等描述标记;@example、@experimental等示例与实验性标记;@inheritDoc、@internal等引用与内部标记;@label、@link等链接标记;@override、@sealed等修饰符标记;以及@packageDocumentation、@param、
22 5
|
13天前
|
JavaScript 前端开发 UED
JavaScript代码技巧大分享,在数组中去重元素
本文介绍了一系列实用的JavaScript函数,包括将内容复制到剪贴板、获取鼠标选中内容、打乱数组顺序、颜色值转换(RGBA与十六进制)、计算平均值、判断奇偶数、数组去重、检查空对象、反转字符串、计算日期间隔、首字母大写、生成随机字符串和随机数等,帮助提升网站的用户体验和功能丰富性。
19 4
|
13天前
|
JavaScript 前端开发 测试技术
如何写高质量的JavaScript代码
在现代Web开发中,JavaScript扮演着至关重要的角色。本文介绍了提升JavaScript代码质量的关键技巧:采用语义化命名增强代码可读性;通过模块化设计提升代码的可维护性和复用性;利用恰当的注释与文档说明代码功能;合理管理全局变量避免命名冲突;实施有效的异常处理增加程序稳定性;并借助工具和框架提高开发效率和代码质量。这些实践共同助力打造高效、可维护的Web应用。代码示例和效果参见相关链接。
17 3
|
13天前
|
JavaScript 前端开发 iOS开发
学习强大的JavaScript一行代码,能够节省你的时间和代码量
这段内容介绍了25个实用的JavaScript一行代码技巧,涵盖复制内容到剪贴板、打乱数组、颜色值转换、计算平均值、检查数字奇偶性、数组去重、对象为空检测、字符串反转、日期计算、首字母大写、生成随机字符串、四舍五入、清除Cookie、检测暗黑模式等,帮助开发者提高效率并简化代码。
16 2