WEB语言转义总结

时间：2022-09-08 14:26:01

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

 
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. &lbrack;label&rsqb;&lbrack;转载&rsqb;&lbrack;paypal&rsqb;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. &lbrack;HeadFrist-HTMLCSS学习笔记&rsqb;&lbrack;第一章Web语言：开始了解HTML&rsqb;

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

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

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

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

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

  9. 【web开发 &vert; 移动APP开发】 Web 移动开发指南（2017&period;01&period;05更新）

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

随机推荐

  1. Ubuntu 12&period;10 安装 jdk-7u10-linux-x64&period;tar&period;gz&lpar;转载&rpar;

    在Ubuntu 12.10下安装 jdk-7u10-linux-x64.tar.gz 总的原则:将jdk-7u10-linux-x64.tar.gz压缩包解压至/usr/lib/jdk,设置jdk环境 ...

  2. BLOB二进制对象&lpar;blob&period;c&sol;h&rpar;

    BLOB二进制对象(blob.c/h) 数据结构 struct blob_attr { uint32_t id_len; /** 高1位为extend标志,高7位存储id, * 低24位存储data的 ...

  3. dzz使用总结（添加云盘，好用的Web文件管理器，网络播放器）

    dzz添加云盘: http://www.lebook.me/book/22822#fid_3990471 呆萌http://pan.diemoe.net/s/GcdFI4 网络播放器 mediaele ...

  4. Razor Pages with ASP&period;NET Core 2

    With ASP.NET Core 2 we get another way of building web applications. It’s one of those new things th ...

  5. Mac could not read from remote repository

    IDE clone数据的时候要使用SSH,不使用HTTPS,就解决了问题

  6. Python之 ---成员修饰符

    一:成员修饰符:分为共有成员和私有成员: 私有成员:__通过两个下滑线:无法直接访问,要访问只能间接访问: 如下我们定义了一个对象,里面有两个共有的成员变量,成员变量是共有的时候我们可以外部访问,如果 ...

  7. innerText兼容处理

    转载自:https://www.cnblogs.com/leejersey/p/3520497.html:稍微改了一下和加了一些注释: IE.Safari.Opera和Chrome支持innerTex ...

  8. Phonegap 原生控件&lpar;Android&rpar;与html混合

    1. 用命令创建cordova项目 cordova coreate hello com.example.hello hello 2.打开MainActivity 在onCreate方法中加入 setC ...

  9. POJ 1222 EXTENDED LIGHTS OUT（反转）

    EXTENDED LIGHTS OUT Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 12616   Accepted: 8 ...

  10. springmvc 下载excel

    jsp: controller:

相关文章