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（ '标题'）+ '< / p>< / A>'）; 
  

非常感谢

解决方案

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

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

如果父级的 href 包含这个HTML上下文中特殊的字符，例如 ，或& ？最好你会得到无效的标记，可能会让浏览器跳起来;最坏的情况是，如果URL来自用户提交，则出现安全问题。

（OK， <和不太可能出现在网址中， code>& 的确很可能，你放在文本内容中的标题可能更容易受伤） p>



这是一个很大的和越来越多的问题。正如我们开始在服务器端（例如PHP用户忘记 htmlspecialchars（））修复来自模板的HTML注入错误的处理方法一样，我们现在正在使用 innerHTML 和jQuery的 html（）引入来自初始HTML黑客的新的客户端 XSS， 。

您可以手动将HTML插入到HTML文本中：

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

但真的，你最好使用直接的DOM风格的属性和方法，由于它们不涉及HTML解析，因此不需要任何转义，它们被称为DOM风格，因为这是原始DOM 1级HTML功能的工作原理（之前存在的方式） innerHTML 抚养其丑陋的头）：

  var a = document.createElement （'a'）; 
 a.href = this.parentNode.href; 
 a.appendChild（document.createTextNode（this.title））; 
  / pre> 
 
 
在jQuery中，您使用 attr（）和 text（）做同样的事情：
  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 的父母是什么？将$ code无效>< 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屋！