JQuery选择器转义说明

浏览数：57 / 时间：2015年06月09日

JQuery选择器

JQuery选择器规则，借用了css1-3的规则（css选择器规则），因为css本身也需要一套规则来索引DOM元素，进而进行样式渲染，例如div.blue 表示目标DOM为 class属性值为blue的div元素。

同时JQuery添加了一些自己的规则，例如按照查询连接元素 $("[href]")。

这样就衍生出，一套元字符，用于表达选择器合法格式，故对于其他部分例如属性值在选择器中的情况，例如查询href为 www.baidu.com的链接，则为 $("[href=‘www.baidu.com’]") 其中.就需要转义，否则跟div.blue中作为格式的点冲突，应该写为 $("[href=‘www\\.baidu\\.com’]")。

需要转义的字符，包括 !"#$%&‘()*+,./:;<=>?@[\]^`{|}~

详情见官网描述：

http://api.jquery.com/category/selectors/

Borrowing from CSS 1–3, and then adding its own, jQuery offers a powerful set of tools for matching a set of elements in a document.

To use any of the meta-characters ( such as !"#$%&‘()*+,./:;<=>?@[\]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \\. For example, an element with id="foo.bar", can use the selector $("#foo\\.bar"). The W3C CSS specification contains the complete set of rules regarding valid CSS selectors. Also useful is the blog entry by Mathias Bynens on CSS character escape sequences for identifiers.

CSS 转义

根据上文描述给出的 W3C CSS规范，包括了关于合法css选择器规则的全部集合。

http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier

其中说明， ID中字符转义效果，转义的反斜杠总被认为是 ID的一部分：

Note: Backslash escapes are always considered to be part of an identifier or a string (i.e., "\7B" is not punctuation, even though "{" is, and "\32" is allowed at the start of a class name, even though "2" is not).

The identifier "te\st" is exactly the same identifier as "test".

css转义owasp建议：

https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet#RULE_.234_-_CSS_Escape_And_Strictly_Validate_Before_Inserting_Untrusted_Data_into_HTML_Style_Property_Values

Except for alphanumeric characters, escape all characters with ASCII values less than 256 with the \HH escaping format. DO NOT use any escaping shortcuts like \" because the quote character may be matched by the HTML attribute parser which runs first. These escaping shortcuts are also susceptible to "escape-the-escape" attacks where the attacker sends \" and the vulnerable code turns that into \\" which enables the quote.

HTML5中的选择器函数

HTML4没有选择器函数， JQuery提供封装接口，提供选择器规则，包含了css定位规则，

技术在革新，HTML5最终提供了js原生接口：

见：

HTML5中类jQuery选择器querySelector的使用 http://m.oschina.net/blog/282816

JQuery选择器敏感字符转义函数

jQuery的id选择器不支持特殊字符，需要转义(引入jqSelector()函数)

http://maijunjin.github.io/jquery/2013/10/11/jqueyr-id%E9%80%89%E6%8B%A9%E5%99%A8%E4%B8%8D%E6%94%AF%E6%8C%81%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6%EF%BC%8C%E9%9C%80%E8%A6%81%E8%BD%AC%E4%B9%89.html

// Escapes special characters and returns a valid jQuery selector
function jqSelector(str)
{
    return str.replace(/([;&,\.\+\*\~‘:"\!\^#$%@\[\]\(\)=>\|])/g, ‘\\$1‘);
}

The HTML

<div id="id.with,special#characters" class="testElem[1]"></div>

The javascript

// ID selector
$(‘#‘+jqSelector(‘id.with,special#characters‘)).text(‘My Selected Element‘);

// Class selector
$(‘.‘+jqSelector(‘testElem[1]‘)).text(‘My Selected Element‘);

测试代码

<html>
<head> 
    <script type="text/javascript" src="./jquery-1.11.1.js" />
</head> 
<body>
    <script>alert("aaa");</script>
    <input id="test" type="text" value="vt+\范" />
    <script>
        function stringToHex(str)
        {
            var val="";
            
            for(var i = 0; i < str.length; i++)
            {
                val = val+ "\\"+"\\"+"\\x" + str.charCodeAt(i).toString(16);
        　　}
       
            return val;
        }

        var afs = "‘\"][vt+";
        console.log("afs="+afs);
        var b = stringToHex(afs); 
        console.log("stringToHex afs="+b);
        b = eval("\""+b+"\"");
        console.log("eval stringToHex afs="+b);
        //b = eval("\""+b+"\"");
        //console.log("eval eval stringToHex afs="+b);
        
        //alert($("input[value=‘"+b+"‘]").length); //length==1 FOUND
        //alert($("input[value=‘\\v\\t\\+范‘]").length); //length==1 FOUND
        //alert($("input[value=‘vt+\\\\范‘]").length); //length==1 FOUND
        alert($("\in\put\[value=‘\\v\\t\+\\\\范‘]").length); //length==1 FOUND
        
        function stringToHex2(str)
        {
            var val="";
            
            for(var i = 0; i < str.length; i++)
            {
                var charCode = str.charCodeAt(i);
                var chari = str.charAt(i);
                if ( charCode <= 127 )
                    val = val+ "\\"+ eval("\"" + "\\x" + str.charCodeAt(i).toString(16) + "\"");
                else
                    val = val + chari;
        　　}
       
            return val;
        }
        
        var afs = "vt+\\范";
        console.log("afs="+afs);
        var b = stringToHex2(afs); 
        console.log("stringToHex2 afs="+b);
        //alert($("input[value=‘"+b+"‘]").length); //length==1 FOUND
        //alert($("#te\s\\t").length); //length==1 FOUND The identifier "te\st" is exactly the same identifier as "test".
        
        function addSlash(srcStr)
        {
            var str = "";
            var ch = "";
            /*入参str为非string类型直接返回*/
            if (typeof(srcStr) != "string")
            {
                return srcStr;
            }
            for(var i = 0; i < srcStr.length; i++)
            {
                ch = srcStr.substr(i, 1);
                if( "\\" == ch )
                {
                    ch = "\\\\";
                }
                else if( "\‘" == ch )
                {
                    ch = "\\\‘";
                }
                else if( "\"" == ch )
                {
                    ch = "\\\"";
                }

                str = str + ch;
            }

            return str;
        }
        //alert($("input[value=‘"+addSlash("vt+\\范")+"‘]").length); //length==1 FOUND
     
     
     //alert("input[value=‘\\\x27‘]");
     //alert("input[value=‘"+b+"‘]");
     </script>
</body>
</html>