zoukankan      html  css  js  c++  java
  • WEB语言转义总结

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

     
    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;
    }
     
     
     
     
     
  • 相关阅读:
    2017 多校联合训练 8 题解
    2017 多校联合训练 7 题解
    2017 多校联合训练 6 题解
    2017 多校联合训练 5 题解
    2017 多校联合训练 4 题解
    windows 安装python
    pygame 使用
    python 发布
    面向对象的思维方法
    python 基础
  • 原文地址:https://www.cnblogs.com/lightsong/p/3702612.html
Copyright © 2011-2022 走看看