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

 
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 presentation

    对于双屏异显(lcd 和 hdmi 的双屏异显),android框架已经支持,但是底层接口功能还是要自己去实现,且需要底层驱动支持. 使用presentation 去画第二个display就好了. M ...

  2. 关于UIView的userInteractionEnabled属性

    关于UIView的userInteractionEnabled属性 如果父视图为ParentView包含一个Button,如果再ParentView上添加子视图ChildView,且ChildView ...

  3. Google测试分享-测试经理

    首先大家可以思考下,google的测试经理角色必须具备什么样的能力.据不完全统计,google的测试经理,超过一半之前都做过TE的角色(大家可以想想为啥):对于与被测产品相关的任何使用问题,测试经理都 ...

  4. AJAX-跨域解决之 JSONP

    (一)AJAX ajax 就是从某个文件中去找相关的数据,把数据拿过来以后,利用数据 分析数据 去做我们想做的事情    分两部分:拿数据                  用数据 oUsername ...

  5. Bouncy Castle内存溢出

    现象: 堆内存溢出,java.lang.OutOfMemoryError: Java heap space 用jmap查看,显示 num     #instances         #bytes   ...

  6. 20145330《Java程序设计》第四周学习总结

    20145330<Java程序设计>第四周学习总结 一周两章新知识的自学与理解真的是很考验和锻炼我们,也对前面几章我们的学习进行了检测,遇到忘记和不懂的知识就再复习前面的,如此巩固也让我对 ...

  7. Version=1.0.0.0, Culture=neutral, PublicKeyToken=null

    What it is saying is, it found the DLL, but it couldn't find a type named "namespace.User" ...

  8. 淘宝前端工程师:国内WEB前端开发十日谈

    一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是" ...

  9. github的git.exe的目录所在

    github的git.exe位于 C:\Users\[username]\AppData\Local\GitHub\PortableGit_25d850739bc178b2eb13c3e2a9faaf ...

  10. 存储过程: 存储过程(stored procedure)有时也称为sproc。存储过程存储于数据库中而不是在单独的文件中,有输入参数、输出参数以及返回值等。

    存储过程示例一: 执行存储过程方法一: 执行存储过程方法二: 存储过程可以定义返回值: 修改存储过程: 利用存储过程查找三个表内的信息: 练习:  超市管理系统:表一:门店仓库表   MenDian ...