在将用户输入添加到DOM中之前,将其消除

概述我正在为我在空闲时间工作的聊天应用程序编写JS，我需要根据用户提交的数据来更改HTML标识符。这通常是一些概念上摇摇欲坠的东西，我甚至不会尝试，但是这次我看不到自己有很多选择。那么我需要做的就是转义HTML代码，以确保不允许XSS或破解HTML。 以下是代码： var user_id = escape(id)var txt = '<div class="chut">'+ 我正在为我在空闲时间工作的聊天应用程序编写Js，我需要根据用户提交的数据来更改HTML标识符。这通常是一些概念上摇摇欲坠的东西，我甚至不会尝试，但是这次我看不到自己有很多选择。那么我需要做的就是转义HTML代码，以确保不允许XSS或破解HTML。

以下是代码：

var user_ID = escape(ID)var txt = '<div >'+            '<div  ID="chut_'+user_ID+'"></div>'+            '<textarea ID="chut_'+user_ID+'_msg"></textarea>'+            '<label for="chut_'+user_ID+'_to">To:</label>'+            '<input type="text" ID="chut_'+user_ID+'_to" value='+user_ID+' Readonly="Readonly" />'+            '<input type="submit" ID="chut_'+user_ID+'_send" value="Message"/>'+          '</div>';

逃避ID的最好办法是避免上述任何一个问题？正如你所看到的，现在我正在使用内置的escape()函数，但我不知道这应该与其他替代方法进行比较。我主要用于在输入文本节点之前进行消毒，而不是ID本身。

解决方法 不要使用escape()。这与HTML编码无关。它更像是URL编码，但是甚至不正确。这是一个奇怪的非标准编码仅在JavaScript中可用。

如果你想要一个HTML编码器，你必须自己写，因为JavaScript不给你一个。例如：

function encodeHTML(s) {    return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/"/g,'&quot;');}

然而，尽管这足以将你的user_ID放在像输入值这样的地方，但是对于ID来说还不够，因为ID只能使用有限的字符选择。 (和％不在其中，所以escape()或甚至encodeURIComponent()不是很好。)

您可以创建自己的编码方案，将任何字符放在ID中，例如：

function encodeID(s) {    if (s==='') return '_';    return s.replace(/[^a-zA-Z0-9.-]/g,function(match) {        return '_'+match[0].charCodeAt(0).toString(16)+'_';    });}

但是如果同一个user_ID发生两次，您仍然有问题。说实话，扔在HTML字符串的整个事情通常是一个坏主意。使用DOM方法，并保留对每个元素的JavaScript引用，所以您不必继续调用getElementByID，或担心如何将任意字符串插入到ID中。

例如。：

function addChut(user_ID) {    var log= document.createElement('div');    log.classname= 'log';    var textarea= document.createElement('textarea');    var input= document.createElement('input');    input.value= user_ID;    input.Readonly= True;    var button= document.createElement('input');    button.type= 'button';    button.value= 'Message';    var chut= document.createElement('div');    chut.classname= 'chut';    chut.appendChild(log);    chut.appendChild(textarea);    chut.appendChild(input);    chut.appendChild(button);    document.getElementByID('chuts').appendChild(chut);    button.onclick= function() {        alert('Send '+textarea.value+' to '+user_ID);    };    return chut;}

您也可以使用方便的功能或Js框架来减少创建集追加调用的长度。

ETA：

I’m using jquery at the moment as a framework

好的，然后考虑jquery 1.4创建快捷方式，例如：

var log= $('<div>',{classname: 'log'});var input= $('<input>',{Readonly: true,val: user_ID});...

The problem I have right Now is that I use JsONP to add elements and events to a page,and so I can not kNow whether the elements already exist or not before showing a message.

您可以在JavaScript中查找user_ID到元素节点(或包装对象)，以将该信息保存在DOM本身中，其中可以进入ID的字符受到限制。

var chut_lookup= {};...function getChut(user_ID) {    var key= '_map_'+user_ID;    if (key in chut_lookup)        return chut_lookup[key];    return chut_lookup[key]= addChut(user_ID);}

(_map_前缀是因为JavaScript对象不能像任意字符串的映射一样工作，空字符串和IE中的一些Object成员名字混淆起来)。

总结

以上是内存溢出为你收集整理的在将用户输入添加到DOM中之前,将其消除全部内容，希望文章能够帮你解决在将用户输入添加到DOM中之前,将其消除所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。