0

我有这个 JS 代码，它在 a 中添加了一些 HTML tbody：

    thestring='<tr><td><input type="text" name="entry-'+s+'-api" value="'+getItem('entry-'+s+'-api')+' /></td><td><input type="text" name="entry-'+s+'-talk" value="'+getItem('entry-'+s+'-talk')+' /></td><td><input type="text" name="entry-'+s+'-url" value="'+getItem('entry-'+s+'-url')+' /></td></tr>';

    document.getElementById('table').innerHTML+=thestring;

有点长的线，我知道...

因此，当我运行它时，thestring会对此进行正确评估：

<input type="text" name="entry-0-api" value="http%3A%2F%2Flego.wikia.com%2Fapi.php /><<input type="text" name="entry-0-talk" value="User_talk%3AUltrasonicNXT /><input type="text" name="entry-0-url" value="http%3A%2F%2Flego.wikia.com%2Fwiki%2FUser_talk%3AUltrasonicNXT />

但是，这是添加的内容：

<tr><td></td></tr>

那么剩下的去哪儿了？

这是相关的 HTML：

<form action="change.js" method="GET">
   <table>
      <tbody id="table">
      </tbody>
   </table>
</form>
4

2 回答 2

2 
value="'+getItem('entry-'+s+'-api')+' />

不正确的标记。属性值没有结束引号。Chrome 正在尽最大努力清理错误。

但是，无论如何，您不应该以这种方式构建标记字符串。如果值中有任何 HTML 特殊字符getItem，那么它们将能够泄漏到标记中。如果其中任何内容来自不受信任的第三方，则这种 HTML 注入不仅是一个错误，而且是一个安全漏洞。

document.getElementById('table').innerHTML+=thestring;

永远不要这样做。这会将表的整个当前 DOM 转换为 HTML 标记，添加到该字符串，并将其全部解析为新对象，替换旧对象。这很慢并且会丢失任何不序列化为 HTML 的信息（例如事件处理程序或表单字段值）。

直接更改文档的活动 DOM 节点比乱用 HTML 标记要可靠得多。这解决了这两个问题。例如。：

var row= document.getElementById('table').insertRow(-1);
['api', 'talk', 'url'].forEach(function(prop) {
    var name= 'entry-'+s+'-'+prop;
    var input= document.createElement('input');
    input.type= 'text';
    input.name= name;
    input.value= getItem(name);
    row.insertCell(-1).appendChild(input);
});
于 2012-09-22T12:06:39.030 回答
1

<input type="text" name="entry-0-api" value="http%3A%2F%2Flego.wikia.com%2Fapi.php /><是不正确的。你错过了<tr><td>（这是一个症状或疏忽），但你也有一个未封闭的value属性（似乎是原因）和一个额外的<（它再次看起来像一个症状，因为它是不一致的）。格式错误的数据会导致一些问题。

于 2012-09-22T12:02:50.560 回答