Désinfection de la saisie de l'utilisateur avant de l'ajouter au DOM en Javascript

Jamais utilisation escape(). Il n'a rien à voir avec le HTML de codage. C'est plus comme URL de codage, mais c'est pas la même bien que. C'est bizarre de codage non standard disponible uniquement en JavaScript.

Si vous voulez un codeur HTML, vous devez écrire vous-même que JavaScript n'est pas de vous donner une. Par exemple:

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

Toutefois, si cela est suffisant pour mettre votre user_id dans des endroits comme le input value, il n'est pas assez pour id parce que les Id ne pouvez utiliser qu'un choix limité de caractères. (Et % n'est pas parmi eux, de sorte escape() ou même encodeURIComponent() n'est pas bon.)

Vous pourriez inventer votre propre schéma de codage pour mettre tous les caractères d'un IDENTIFIANT, par exemple:

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

Mais vous avez encore un problème si le même user_id se produit deux fois. Et pour être honnête, la chose à jeter dans les chaînes HTML est généralement une mauvaise idée. Utilisez les méthodes du DOM au lieu de cela, et de conserver JavaScript références pour chaque élément, de sorte que vous n'avez pas de continuer à l'appeler getElementById, ou s'inquiéter de la façon arbitraire les chaînes de caractères sont insérés dans Id.

par exemple.:

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;
}

Vous pouvez également utiliser une fonction de commodité ou JS cadre de couper vers le bas sur la lenteur de la créer-ensemble-ajoute les appels.

ETA:

J'utilise jQuery pour le moment comme un cadre

OK, puis envisager la jQuery 1.4 création de raccourcis, par exemple.:

var log= $('<div>', {className: 'log'});
var input= $('<input>', {readOnly: true, val: user_id});
...

Le problème que j'ai actuellement c'est que j'utilise JSONP ajouter des éléments et des événements à une page, et donc je ne peux pas savoir si les éléments existent déjà ou pas avant d'afficher un message.

Vous pouvez garder une recherche de user_id de nœuds d'élément (ou le papier d'emballage des objets) en JavaScript, pour éviter de mettre cette information dans les DOM, où les caractères qui peuvent aller dans un id sont limités.

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);
}

(Le _map_ préfixe est parce que les objets JavaScript n'est pas assez travail comme une cartographie de l'arbitraire des chaînes de caractères. La chaîne vide, et, dans IE, certains Object noms des membres, le confondre.)

Vous pouvez utiliser une expression régulière simple d'affirmer que l'id contient uniquement des caractères autorisés, comme suit:

if(id.match(/^[0-9a-zA-Z]{1,16}$/)){
    //The id is fine
}
else{
    //The id is illegal
}

Mon exemple permet de seuls les caractères alphanumériques et les chaînes de longueur 1 à 16, vous devez le modifier pour l'adapter au type d'identifiants que vous utilisez.

Par la façon dont, à la ligne 6, la valeur de la propriété est manquant d'une paire de guillemets, une erreur facile à faire lorsque l'on cite à deux niveaux.

Je ne peux pas voir votre flux de données selon le contexte, cette case ne doit pas être nécessaire, ou il peut ne pas être suffisant. Afin de faire un bon examen de la sécurité, nous aurions besoin de plus d'informations.

En général, construit en échapper ou de désinfecter les fonctions, de ne pas leur faire confiance aveuglément. Vous avez besoin de savoir exactement ce qu'ils font, et vous devez établir que c'est en fait ce dont vous avez besoin. Si ce n'est pas ce dont vous avez besoin, le code de votre propre, la plupart du temps une simple liste blanche des regex comme celui que je vous ai donné fonctionne très bien.

Vous devez prendre des précautions supplémentaires lors de l'utilisation de données fournies par les utilisateurs dans les attributs HTML. Parce que les attributs a beaucoup plus de vecteurs d'attaque de sortie à l'intérieur des balises HTML.

La seule façon d'éviter les attaques XSS est de coder tout, sauf de caractères alphanumériques. Échapper tous les caractères ASCII des valeurs de moins de 256 avec les &#xHH; format. Qui, malheureusement, peut causer des problèmes dans votre scénario, si vous utilisez des classes CSS et javascript pour récupérer ces éléments.

OWASP a une bonne description de la façon d'atténuer attribut HTML XSS:

http://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet#RULE_.233_-_JavaScript_Escape_Before_Inserting_untrusted_data_into_html_javascript_data_values