Fatal编程技术网
  • javascript/
  • Javascript 为什么浏览器会修改包含&；的HTML元素的ID#x？

Javascript 为什么浏览器会修改包含&；的HTML元素的ID#x？

javascript html encoding

Javascript 为什么浏览器会修改包含&；的HTML元素的ID#x？,javascript,html,encoding,Javascript,Html,Encoding,假设我有这个HTML页面： <html> <head> <script type="text/javascript"> function echoValue(){ var e = document.getElementById("/path/&#x24;whatever"); if(e) { alert(e.innerHTML); } else

假设我有这个HTML页面：

<html>
  <head>
    <script type="text/javascript">
      function echoValue(){
        var e = document.getElementById("/path/&#x24;whatever");
        if(e) {
          alert(e.innerHTML);
        }
        else {
          alert("not found\n");
        }
      }
    </script>
  </head>
  <body>
    <p id="/path/&#x24;whatever">The Value</p>
    <button onclick="echoValue()">Tell me</button>
  </body>
</html>


函数echoValue（）{
var e=document.getElementById（“/path/$；随便什么”）；
如果（e）{
警报（e.innerHTML）；
}
否则{
警报（“未找到”）；
}
}

值

告诉我
我假设浏览器处理ID字符串
/path/$；无论什么
都是简单的字符串。实际上，它转换
$到它的渲染表示（
$
）

但是，javascript代码使用文本字符串
$
以搜索元素。因此，调用
document.getElementById
失败，我从来没有得到过段落的值

有没有办法强迫浏览器直接使用给定的ID字符串



编辑：

当然，我知道我不必逃避
$
。但是网页被生成，生成器进行转义。因此，我必须应付我所拥有的。
在
中，
&x24序列被解释为
$
，因为它出现在属性中并被视为HTML实体。所有其他元素属性也是如此

在
元素中，HTML实体根本不会被解释，因此它会按字面意思显示。
在
中，
&x24序列被解释为
$
，因为它出现在属性中并被视为HTML实体。所有其他元素属性也是如此


在
元素中，HTML实体根本不会被解释，因此它会逐字显示。
我建议您在javascript代码中解码HTML实体：


<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
      function echoValue(){
        var decoded_string = $('<div />').html("/path/&#x24;whatever").text();
        var e = document.getElementById(decoded_string);
        if(e) {
          alert(e.innerHTML);
        }
        else {
          alert("not found\n");
        }
      }
    </script>
  </head>
  <body>
    <p id="/path/&#x24;whatever">The Value</p>
    <button onclick="echoValue()">Tell me</button>
  </body>
</html>




函数echoValue（）{
var decoded_string=$（''）.html（“/path/$；任意”）.text（）；
var e=document.getElementById（解码的字符串）；
如果（e）{
警报（e.innerHTML）；
}
否则{
警报（“未找到”）；
}
}

值

告诉我

我建议您解码javascript代码中的HTML实体：


<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
      function echoValue(){
        var decoded_string = $('<div />').html("/path/&#x24;whatever").text();
        var e = document.getElementById(decoded_string);
        if(e) {
          alert(e.innerHTML);
        }
        else {
          alert("not found\n");
        }
      }
    </script>
  </head>
  <body>
    <p id="/path/&#x24;whatever">The Value</p>
    <button onclick="echoValue()">Tell me</button>
  </body>
</html>




函数echoValue（）{
var decoded_string=$（''）.html（“/path/$；任意”）.text（）；
var e=document.getElementById（解码的字符串）；
如果（e）{
警报（e.innerHTML）；
}
否则{
警报（“未找到”）；
}
}

值

告诉我

您可以尝试在不使用jQuery的情况下解码javascript文本：


<html>
  <head>
    <script type="text/javascript">
      function decodeEntity(text){
        text = text.replace(/<(.*?)>/g,''); // strip out all HTML tags, to prevent possible XSS
        var div = document.createElement('div');
        div.innerHTML = text;
        return div.textContent?div.textContent:div.innerText;
      }
      function echoValue(){
        var e = document.getElementById(decodeEntity("/path/&#x24;whatever"));
        if(e) {
          alert(e.innerHTML);
        }
        else {
          alert("not found\n");
        }
      }
    </script>
  </head>
  <body>
    <p id="/path/&#x24;whatever">The Value</p>
    <button onclick="echoValue()">Tell me</button>
  </body>
</html>




函数实体（文本）{
text=text.replace（//g'，）；//去掉所有HTML标记，以防止可能的XSS
var div=document.createElement（'div'）；
div.innerHTML=文本；
返回div.textContent？div.textContent:div.innerText；
}
函数echoValue（）{
var e=document.getElementById（decodeEntity（“/path/$；任意”）；
如果（e）{
警报（e.innerHTML）；
}
否则{
警报（“未找到”）；
}
}

值

告诉我



jsiddle:
您可以尝试在不使用jQuery的情况下解码javascript文本：


<html>
  <head>
    <script type="text/javascript">
      function decodeEntity(text){
        text = text.replace(/<(.*?)>/g,''); // strip out all HTML tags, to prevent possible XSS
        var div = document.createElement('div');
        div.innerHTML = text;
        return div.textContent?div.textContent:div.innerText;
      }
      function echoValue(){
        var e = document.getElementById(decodeEntity("/path/&#x24;whatever"));
        if(e) {
          alert(e.innerHTML);
        }
        else {
          alert("not found\n");
        }
      }
    </script>
  </head>
  <body>
    <p id="/path/&#x24;whatever">The Value</p>
    <button onclick="echoValue()">Tell me</button>
  </body>
</html>




函数实体（文本）{
text=text.replace（//g'，）；//去掉所有HTML标记，以防止可能的XSS
var div=document.createElement（'div'）；
div.innerHTML=文本；
返回div.textContent？div.textContent:div.innerText；
}
函数echoValue（）{
var e=document.getElementById（decodeEntity（“/path/$；任意”）；
如果（e）{
警报（e.innerHTML）；
}
否则{
警报（“未找到”）；
}
}

值

告诉我



jsiddle:
您可以只使用
$
-它不需要作为实体转义。或者，如果确实需要转义实体，则双重转义HTML版本-
/path/&#x24；无论如何
，我很感兴趣的是，为什么在脚本节点和id属性中对实体的处理不同。您确实不应该在
id
属性中使用
$
字符，因为这是不允许的，因此会导致无效的HTML。您可以只使用
$
-它不需要作为实体转义。或者，如果确实需要转义该实体，请双重转义HTML版本-
/path/&#x24；无论如何
，我很感兴趣的是，为什么在脚本节点和id属性中对实体进行不同的处理。你真的不应该在
id
属性中使用
$
字符，因为这是不允许的，因此会导致无效的HTML。加载整个jQuery库似乎有点困难，因为你可以在三年内完成一些事情没有它的线，你是对的。我总是使用jQuery，所以我倾向于认为它已经被加载了：-）加载整个jQuery库似乎有点过分，因为没有它，你可以在三行中完成一些事情。你是对的。我总是使用jQuery，所以我倾向于认为它已经加载了：-），这取决于您解码的值来自哪里。我添加了一行代码来去除所有HTML标记，以帮助保护结果。还请注意，生成的
DIV
元素从未添加到DOM中，因此可能不会运行任何恶意代码，但我不会完全相信这一点。我正在解码的值是动态内容。为了避免XSS问题，故意对其进行转义。不希望通过解码再次受到攻击。唯一的XSS危险是添加到DIV的文本实际上包含可能运行的危险HTML代码。但是，我们去掉了HTML标记以防止这种情况发生，而且您的文本是预先编码的，所以我们可能甚至不会得到任何HTML