首页 > 代码库 > WEB语言转义总结
WEB语言转义总结
后台字符串嵌入前台语言输出
web语言分为后台和前台,如果后台语言嵌入方式将字符串输出到前台语言中,需要按照前台语言的要求进行转义。
因为前台各个语言都有自身的保留字符, 用于规定自身的语法格式,如果后台字符串直接输出则可能会跟前台的语言的保留字符冲突。
具体分为以下三种:
1、 向HTML中输出,作为HTML标签对中的内容 或者 属性值字符串的内容输出,
如果输出的内容想原样展示,为了避免被HTML语言翻译错误,需要使用后台语言接口进行转义,
一般名字叫 encodeHTML,
将 HTML语法使用字符翻译为 HTML 实体:
例如 将 & 翻译为
<input value="<%=encodeHTML(name)%>">
==>
<input value=" "> <!-- 控件值显示为 一个 & -->
2、 向Javascript语言中输出,作为Javascript字符串的内容,
对应字符串"XXX"中的XXX的全部或者部分内容,需要使用后台语言接口进行转义,
一般名字叫encodeJS, 将后台字符串中的每一个字符转义为Javascript转义形式,
例如 将 " 翻译为 \"
var name = “<%=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("<div>aa<</div>") $("#test1").html($("#test").html() + "<div>OOOOO</div>") $("#inputText").val($("#test").html()); </script> </body> </html>
JS反向decodeHTML操作,与上面操作相反:
var decoded = $("<div/>").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("<<div>f</div>") $("#inputText").val($("#test").html()); //html arg $("#inputText").val($("#test").text()); // text in html DOM </script> </body> </html>
原始的JS封装的 HTMLEncode 和 HTMLDecode 实现接口:
<script type=”text/javascript”> function HTMLEncode(html) { var temp = document.createElement (“div”); (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html); var output = temp.innerHTML; temp = null; return output; } function HTMLDecode(text) { var temp = document.createElement(“div”); temp.innerHTML = text; var output = temp.innerText || temp.textContent; temp = null; return output; } var html = “<br>dffdfqqqqq”; var encodeHTML = HTMLEncode(html); alert(“方法一:” +encodeHTML); var decodeHTML = HTMLDecode(encodeHTML); alert(“方法一:” +decodeHTML); </script>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。