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

 
web语言分为后台和前台,如果后台语言嵌入方式将字符串输出到前台语言中,需要按照前台语言的要求进行转义。
因为前台各个语言都有自身的保留字符, 用于规定自身的语法格式,如果后台字符串直接输出则可能会跟前台的语言的保留字符冲突。
 
 
具体分为以下三种:
 
1、 向HTML中输出,作为HTML标签对中的内容 或者 属性值字符串的内容输出, 
  如果输出的内容想原样展示,为了避免被HTML语言翻译错误,需要使用后台语言接口进行转义,
  一般名字叫  encodeHTML,
  将 HTML语法使用字符翻译为 HTML 实体:
例如 将 & 翻译为  
<input value="<%=encodeHTML(name)%>">

==>

<input value="&nbsp;">  <!-- 控件值显示为 一个 & -->
 
2、 向Javascript语言中输出,作为Javascript字符串的内容,
  对应字符串"XXX"中的XXX的全部或者部分内容,需要使用后台语言接口进行转义,
  一般名字叫encodeJS, 将后台字符串中的每一个字符转义为Javascript转义形式,
    例如 将 " 翻译为 \"
var name = “<%=name%>”;

==>

var name = "\"";
3、 向XML数据格式中输出,需要类似HTML转义的接口,使用也相同。
  一般取名为 encodeXML 
负责如下XML常用字符转义:

字符

转义字符

描述

&

&amp;

<

&lt;

小于号

>

&gt;

大于号

"

&quot;

双引号

'

&apos;

单引号

 
 
 

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("&lt;<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>
 HTMLEnecode 还有只针对敏感参数转换的方法
http://www.cnblogs.com/ghd258/archive/2009/10/18/1274429.html
第二种方法,
但是此方法,改变的字符串的原始的编码的值,

下面补充一个,保持转换字符编码值的方法:

function HTMLEncode(str)
{
var transStr = "";
for (var i=0; i<str.length; i++)
{
var charCode = str.charCodeAt(i);
if ( charCode<127 )
transStr += "&#"+charCode+";";
else
transStr += str.charAt(i);
} return transStr;
}
 
 
 
 
 

WEB语言转义总结的更多相关文章

  1. WASM 成为 HTML、CSS 与 JS 之后的第 4 门 Web 语言

    大家都知道,万维网联盟 W3C 认证的 Web 语言有 HTML.CSS 与 JavaScript,而近日联盟正式宣布 WebAssembly 核心规范(WebAssembly Core Specif ...

  2. web语言发展史

    引用自CSDN,地址:https://blog.csdn.net/moshenglv/article/details/51590830 提到Web,不得不提一个词就是“互联网”.Web是World W ...

  3. [label][转载][paypal]paypal在线支付接口的WEB语言设置

    http://stephen830.iteye.com/blog/274072 ★★★ 本篇为原创,需要引用转载的朋友请注明:< http://stephen830.iteye.com/blog ...

  4. C语言转义字符相关知识

    在C语言里所有的ASCII码都可以用“\”加数字(一般是8进制数字)来表示.而C中定义了一些字母或数字前加"\"来表示常见的那些不能显示的ASCII字符,如\0,\t,\n等,就称 ...

  5. django模板语言转义处理

    模板变量的内容,如果含html的话,django的模板系统默认会对输出进行转义,比如把<p>转义成了<p> ,然后再显示出来的时候就如实地显示为<p>.要解决这个问 ...

  6. [HeadFrist-HTMLCSS学习笔记][第一章Web语言:开始了解HTML]

    head title body 元素= 开始标记 + 内容 +结束标记 还能给段落一个变量名 <p id="houseblend"> body </p> s ...

  7. 逐浪web无障碍与国际化以及全民族语言支持白皮书

    北京时间2019年5月10日,领先的门户网站与WEB内核服务厂商--上海Zoomla!逐浪CMS团队发布其年度重榜产品:逐浪CMS全民族语言与国际版,体验站点:http://demo2.z01.com ...

  8. C#不用union,而是有更好的方式实现 .net自定义错误页面实现 .net自定义错误页面实现升级篇 .net捕捉全局未处理异常的3种方式 一款很不错的FLASH时种插件 关于c#中委托使用小结 WEB网站常见受攻击方式及解决办法 判断URL是否存在 提升高并发量服务器性能解决思路

    C#不用union,而是有更好的方式实现   用过C/C++的人都知道有个union,特别好用,似乎char数组到short,int,float等的转换无所不能,也确实是能,并且用起来十分方便.那C# ...

  9. 【web开发 | 移动APP开发】 Web 移动开发指南(2017.01.05更新)

    版本记录 - 版本1.0 创建文章(2016.12.30) - 版本1.1 更正了hybird相关知识:增加了参考文章(2017.01.05): + Web APP更正为响应式移动站点与页面,简称响应 ...

随机推荐

  1. android 自定义 view 和 ViewGroup

    ---恢复内容开始--- ViewGroup的职能为:给childView计算出建议的宽和高和测量模式 :决定childView的位置:为什么只是建议的宽和高,而不是直接确定呢,别忘了childVie ...

  2. Leetcode Unique Paths

    A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...

  3. 51Nod 1021 石子合并 Label:Water DP

    N堆石子摆成一条线.现要将石子有次序地合并成一堆.规定每次只能选相邻的2堆石子合并成新的一堆,并将新的一堆石子数记为该次合并的代价.计算将N堆石子合并成一堆的最小代价.   例如: 1 2 3 4,有 ...

  4. NOIP提高组2004 合并果子题解

    NOIP提高组2004 合并果子题解 描述:在一个果园里,多多已经将所有的果子打了下来,而且按果子的不同种类分成了不同的堆.多多决定把所有的果子合成一堆. 每一次合并,多多可以把两堆果子合并到一起,消 ...

  5. UIView常见属性总结

    一 UIVIew 常见属性 .frame 位置和尺寸(以父控件的左上角为原点(,)) .center 中点 (以父控件的左上角为原点(,)) .bounds 位置和尺寸(以自己的左上角为原点 (,)) ...

  6. memcache 缓存失效问题(转)

    在大并发的场合,当cache失效时,大量并发同时取不到cache,会同一瞬间去访问db并回设cache,可能会给系统带来潜在的超负荷风险. 解决方法 方法一 在load db之前先add一个mutex ...

  7. SVN文本文件报二进制属性的问题

    2011-11-21 00:42 svn总出现二进制相关的烦人事 在使用svn add 时提示: A  (bin)  templates/translate/screen/selectTransLan ...

  8. CAS单点登录配置

    见http://download.csdn.net/detail/u010786672/6942715下载.

  9. [CareerCup] 16.6 Synchronized Method 同步方法

    16.6 You are given a class with synchronized method A and a normal method B. If you have two threads ...

  10. php循环删除文件目录及文件

    删除文件及目录: //循环删除目录和文件函数 function delDirAndFile( $dirName ) { if ( $handle = opendir( "$dirName&q ...