WEB语言转义总结

2020-11-22 18:27

阅读：518

标签：style blog class code java ext javascript width color strong int

后台字符串嵌入前台语言输出

web语言分为后台和前台，如果后台语言嵌入方式将字符串输出到前台语言中，需要按照前台语言的要求进行转义。

因为前台各个语言都有自身的保留字符，用于规定自身的语法格式，如果后台字符串直接输出则可能会跟前台的语言的保留字符冲突。

具体分为以下三种：

1、向HTML中输出，作为HTML标签对中的内容或者属性值字符串的内容输出，

　　如果输出的内容想原样展示，为了避免被HTML语言翻译错误，需要使用后台语言接口进行转义，

　　一般名字叫 encodeHTML，

　　将 HTML语法使用字符翻译为 HTML 实体：

例如将 & 翻译为

input value="">==>

input value=" ">

2、向Javascript语言中输出，作为Javascript字符串的内容，

　　对应字符串"XXX"中的XXX的全部或者部分内容，需要使用后台语言接口进行转义，

　　一般名字叫encodeJS，将后台字符串中的每一个字符转义为Javascript转义形式，

例如将 " 翻译为 \"

var name = “”;==>
var name = "\"";

3、向XML数据格式中输出，需要类似HTML转义的接口，使用也相同。

　　一般取名为 encodeXML

负责如下XML常用字符转义：

字符	转义字符	描述
&	&	和
	<	小于号
>	>	大于号
"	"	双引号
‘	'	单引号

DOM API （text & HTML）

在前台语言中，主要是HTML 和 JS之间：

1、如果使用JS在DOM节点中，原样显示文本内容，需要将此字符串设置到DOM节点的innerText 或者 textContent （firefox）；

2、字符串包括合法html标签，并且作者就是想使用这些字符串改变DOM的内容，需要将此字符串设置到DOM节点的innerHTML属性。

两者使用场景需要明确，不能误用。

不能将需要原样输出的使用innerHTML属性设置，否则，对于用户可修改的参数，万一其被修改为合法的HTML语言，则页面展示为HTML元素，此为XSS攻击提供了漏洞。

也不能将需要按照HTML染显示的字符串，使用文本节点属性设置，给用户显示显示HTML代码是显然的不合理的，程序员例外（例如博客园的代码展示区）。

上面所说的两种DOM API，对应JQuery的html() 和 text()。

Javascript操作HTML DOM也牵扯到HTML转义事情，例如想组织一个字符串输出到html接口，

此字符串中含有需要原样输出的内容，还包括需要按照HTML渲染显示的字符串，

可以使用JQuery接口组合使用来完成，实现功能类似后台语言中的encodeHTML, 如下代码例子：

html>
head>
script type="text/javascript" src="./jquery/jquery-1.9.1.js">script>
head>
body>
div id="test">div>
div id="test1">div>
input type="text" id="inputText">
script>
$("#test").text("aa")
$("#test1").html($("#test").html() + "OOOOO")
$("#inputText").val($("#test").html());
script>
body>
html>

JS反向decodeHTML操作，与上面操作相反：

var decoded = $("
").html(encodedStr).text();

html>
head>
script type="text/javascript" src="./jquery/jquery-1.9.1.js">script>
head>
body>
div id="test">div>
input type="text" id="inputText">
script>
$("#test").html("<f")
$("#inputText").val($("#test").html()); //html arg
$("#inputText").val($("#test").text()); // text in html DOM
script>
body>
html>

原始的JS封装的 HTMLEncode 和 HTMLDecode 实现接口：

WEB语言转义总结,搜素材,soscw.com

WEB语言转义总结

标签：style blog class code java ext javascript width color strong int

原文地址：http://www.cnblogs.com/lightsong/p/3702612.html

上一篇：python-使用正则快速解析QQ群聊记录

下一篇：JavaScript encodeURI() 函数

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：WEB语言转义总结
文章链接：http://soscw.com/index.php/essay/22103.html

亲，登录后才可以留言！

WEB语言转义总结

后台字符串嵌入前台语言输出

DOM API （text & HTML）

评论

热门文章

推荐文章

最新文章

置顶文章