jQuery DOM元素创建vs innerHTML [英] jQuery DOM element creation vs innerHTML

问题描述

在回答我的问题时， cletus在创建jQuery元素时，最好使用 直接DOM元素创建 ，而不是 innerHTML 。我试图谷歌搜索，但我不能找到一个好的文章与比较。

我已经提供了这个代码作为例子，我想知道是否有人可以帮助我重写它在直接DOM元素创建表单希望我也将学习

  var img = $（this）; 
 img.append（'< p class =cap>< a href ='+ img.parent（）。attr（'href'）+'>'+ 
 img.attr（'title'）+'< / p>< / a>'）; 
  

非常感谢。

方案

是的，避免HTML字符串摆动。你给自己的错误和潜在的跨站点脚本安全漏洞。例如：

 '< a href ='+ img.parent（）。attr（'href'）+ > 
  

如果父项的 href 包含此HTML上下文中特殊的字符，例如< ，或& ？最多可以得到无效的标记，可能会使浏览器崩溃;最糟糕的是，如果网址来自用户提交，一个安全问题。

（OK，< 和不太可能出现在URL中， code>& 是很有可能的。 title 你放在文本内容可能更容易受到攻击。 p>

这是一个庞大且日益严重的问题。正如我们开始处理修复来自服务器端模板的HTML注入错误（例如PHP用户忘记了 htmlspecialchars（））时，我们现在正在使用 innerHTML 和jQuery的 html（）来引入新的客户端 XSS。 。避免。

您可以手动插入HTML的转义文字：

  function encodeHTML（s）{
 return s.replace（/& / g，'& amp;'）。replace（/< / g，'& lt;'）。replace（// g，'& quot;'）; 
} 
 
'< a href ='+ encodeHTML（img.parent attr（'href'））+'>'
  

使用直接DOM风格的属性和方法，因为它们不涉及HTML解析，所以不需要任何转义，它们被称为DOM风格，因为这是原来的DOM Level 1 HTML特性的工作方式 innerHTML 丑陋的头）：

  var a = document.createElement （'a'）; 
 a.href = this.parentNode.href; 
 a.appendChild（document.createTextNode（this.title））; 
  / pre> 
 
 
在jQuery中，您使用 attr（）和 text c $ c>也可以这样做：
  var a = $（'< a>< / a>'） ; 
 a.attr（'href'，$（this）.parent（）。attr（'href'）; 
 a.text（$（this）.attr（'title'））; 
  
在jQuery 1.4中，你可以使用元素创建快捷方式最方便的使用：
  $（this）.append（
 $（'< p class =cap>< / p>'） .append（
 $（'< a>< / a>'，{
 href：$（this）.parent（）。attr（'href'），
 text： $（this）.attr（'title'）
}）
）
）; 
  
这仍然看起来有点问题，但是你得到 href 的父类是什么？它不能把< p> 或链接内的其他链接。
 
While having one of my questions answered, cletus mentioned that when creating elements in jQuery it's better to use direct DOM element creation, instead of innerHTML. I tried googling it but I wasn't able to find a good article with comparisons. 

I've provided this code bellow as an example and I was wondering if someone could help me rewrite it in direct DOM element creation form in hope that i would also learn the difference afterwards.
var img = $(this);
img.append('<p class="cap"><a href="'+img.parent().attr('href')+'">'+
img.attr('title')+'</p></a>');
Thanks so much.
解决方案
Yeah, avoid HTML string-slinging. You're giving yourself bugs and potentially cross-site scripting security holes. For example:
'<a href="'+img.parent().attr('href')+'">'
what if the URL in the parent's href contains characters that are special in this HTML context, like <, " or &? At best you'll get invalid markup that might trip the browser up; at worst, if the URL comes from user submission, a security problem.

(OK, < and " are unlikely to appear in a URL, but & is very likely indeed. The title you're putting in the text content may be more vulnerable.)

This is a large and increasing problem. Just as we're starting to get a handle on fixing the HTML-injection bugs coming from templating on the server-side (eg. PHP users forgetting to htmlspecialchars()), we're now introducing loads of new client-side XSS from naïve HTML-hacking with innerHTML and jQuery's html(). Avoid.

You can escape text you're inserting into HTML manually:
function encodeHTML(s) {
    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
}

'<a href="'+encodeHTML(img.parent().attr('href'))+'">'
but really, you're better off using the direct DOM-style properties and methods, which, since they involve no HTML parsing, don't require any escaping. They're called DOM-style because that's the way the original DOM Level 1 HTML features work (which existed back before innerHTML reared its ugly head):
var a= document.createElement('a');
a.href= this.parentNode.href;
a.appendChild(document.createTextNode(this.title));
In jQuery you use attr() and text() to do the same:
var a= $('<a></a>');
a.attr('href', $(this).parent().attr('href');
a.text($(this).attr('title'));
And in jQuery 1.4, you can do it most conveniently using an element creation shortcut:
$(this).append(
    $('<p class="cap"></p>').append(
        $('<a></a>', {
            href: $(this).parent().attr('href'),
            text: $(this).attr('title')
        })
    )
);
This still looks a bit questionable though, what's the parent that you're getting the href from? It's invalid to put a <p>, or another link, inside a link.

                        
这篇关于jQuery DOM元素创建vs innerHTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！