J'utilise JavaScript pour extraire une valeur d'un champ masqué et l'afficher dans une zone de texte. La valeur dans le champ caché est codée.
Par exemple,
<input id='hiddenId' type='hidden' value='chalk & cheese' />
se fait entraîner
<input type='text' value='chalk & cheese' />
via certains jQuery pour obtenir la valeur du champ caché (c'est à ce stade que je perds l'encodage):
$('#hiddenId').attr('value')
Le problème est que lorsque je lis chalk & cheese
dans le champ caché, JavaScript semble perdre l'encodage. Je ne veux pas que la valeur soit chalk & cheese
. Je veux que le littéral amp;
soit conservé.
Existe-t-il une bibliothèque JavaScript ou une méthode jQuery qui codera en HTML une chaîne?
chalk
et est- ellecheese
jamais utilisée ensemble 0_oRéponses:
EDIT: Cette réponse a été publiée il y a longtemps, et la
htmlDecode
fonction a introduit une vulnérabilité XSS. Il a été modifié en changeant l'élément temporaire de adiv
en unetextarea
réduction des chances XSS. Mais de nos jours, je vous encourage à utiliser l'API DOMParser comme suggéré dans d' autres réponses .J'utilise ces fonctions:
Fondamentalement, un élément de zone de texte est créé en mémoire, mais il n'est jamais ajouté au document.
Sur la
htmlEncode
fonction, j'ai défini l'innerText
élément de l'élément et récupéré l'encodéinnerHTML
; sur lahtmlDecode
fonction j'ai mis lainnerHTML
valeur de l'élément et leinnerText
est récupéré.Consultez un exemple en cours d'exécution ici .
la source
white-space
propriété, ce qui suggère comment les espaces dans le contenu HTML doivent être traités. La présence de la propriété implique que "ceci est préformaté, les espaces et les sauts de ligne doivent être préservés". Cela rompt la séparation du style et du contenu, car si vous essayez de reformater le HTML pour qu'il soit "joli" ou que vous le contourniez à travers un cycle d'encodage / décodage comme celui-ci, les séries d'espaces / sauts sont réduites et l'encodeur n'a pas façon de savoir si c'était correct de le faire, car il n'a pas connaissance de l'white-space:pre-*;
indicateur dans un fichier CSS externe!L'astuce jQuery ne code pas les guillemets et dans IE, elle supprimera votre espace.
Sur la base du templatetag d' échappement dans Django, qui je suppose est déjà largement utilisé / testé, j'ai créé cette fonction qui fait ce qui est nécessaire.
Il est sans doute plus simple (et peut-être plus rapide) que toutes les solutions de contournement pour le problème de suppression des espaces - et il code les guillemets, ce qui est essentiel si vous allez utiliser le résultat dans une valeur d'attribut par exemple.
Mise à jour 2013-06-17:
Dans la recherche de l'échappement le plus rapide, j'ai trouvé cette implémentation d'une
replaceAll
méthode:http://dumpsite.com/forum/index.php?topic=4.msg29#msg29
(également référencé ici: Fastest méthode pour remplacer toutes les instances d'un caractère dans une chaîne )
Quelques résultats de performances ici:
http://jsperf.com/htmlencoderegex/25
Il donne une chaîne de résultat identique aux
replace
chaînes intégrées ci-dessus. Je serais très heureux si quelqu'un pouvait expliquer pourquoi c'est plus rapide!?Mise à jour 2015-03-04:
Je viens de remarquer que AngularJS utilise exactement la méthode ci-dessus:
https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js#L435
Ils ajoutent quelques améliorations - ils semblent gérer un problème Unicode obscur ainsi que convertir tous les caractères non alphanumériques en entités. J'avais l'impression que ce dernier n'était pas nécessaire tant que vous disposez d'un jeu de caractères UTF8 spécifié pour votre document.
Je noterai que (4 ans plus tard) Django ne fait toujours aucune de ces choses, donc je ne sais pas à quel point elles sont importantes:
https://github.com/django/django/blob/1.8b1/django/utils /html.py#L44
Mise à jour 2016-04-06:
Vous pouvez également souhaiter échapper à la barre oblique
/
. Ceci n'est pas requis pour un encodage HTML correct, mais il est recommandé par OWASP comme mesure de sécurité anti-XSS. (merci à @JNF de l'avoir suggéré dans les commentaires)la source
'
au lieu de'
'
n'était pas une entité HTML valide./g
,.replace()
ne remplacera que le premier match.Voici une version non jQuery qui est considérablement plus rapide que la
.html()
version jQuery et la.replace()
version. Cela préserve tous les espaces, mais comme la version jQuery, ne gère pas les guillemets.Vitesse: http://jsperf.com/htmlencoderegex/17
Démo:
Production:
Scénario:
HTML:
la source
.replace()
version non regex récemment suggérée par @SEoF s'avère être beaucoup plus rapide: jsperf.com/htmlencoderegex/22/g
,.replace()
ne fait que le premier match.replace('a', 'b', 'g')
ce qui fonctionne de la même manière quereplace(/a/g, 'b')
... la vitesse est également identiqueJe sais que c'est une ancienne, mais je voulais publier une variante de la réponse acceptée qui fonctionnera dans IE sans supprimer les lignes:
la source
Underscore fournit
_.escape()
et_.unescape()
méthodes qui le font.la source
Bonne réponse. Notez que si la valeur à coder est
undefined
ounull
avec jQuery 1.4.2, vous pouvez obtenir des erreurs telles que:jQuery("<div/>").text(value).html is not a function
OU
Uncaught TypeError: Object has no method 'html'
La solution consiste à modifier la fonction pour vérifier une valeur réelle:
la source
jQuery('<div/>').text(value || '').html()
value
avec unif
enregistre d'avoir à créer un DIV à la volée et à saisir sa valeur. Cela peut être beaucoup plus performant sihtmlEncode
on l'appelle beaucoup ET s'il est probable que cevalue
sera vide.Pour ceux qui préfèrent le javascript simple, voici la méthode que j'ai utilisée avec succès:
la source
FWIW, l'encodage n'est pas perdu. L'encodage est utilisé par l'analyseur de balisage (navigateur) pendant le chargement de la page. Une fois la source lue et analysée et le navigateur chargé du DOM en mémoire, l'encodage a été analysé dans ce qu'il représente. Donc, au moment où votre JS est exécuté pour lire quoi que ce soit en mémoire, le caractère qu'il obtient est ce que l'encodage représentait.
Je travaille peut-être strictement sur la sémantique ici, mais je voulais que vous compreniez le but de l'encodage. Le mot «perdu» donne l'impression que quelque chose ne fonctionne pas comme il se doit.
la source
Plus rapide sans Jquery. Vous pouvez encoder chaque caractère de votre chaîne:
Ou ciblez simplement les personnages principaux à craindre (&, inebreaks, <,>, "et ') comme:
la source
Prototype l' a intégré dans la classe String . Donc, si vous utilisez / prévoyez d'utiliser Prototype, cela fait quelque chose comme:
la source
.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
Assez facile.Voici une solution javascript simple. Il étend l'objet String avec une méthode "HTMLEncode" qui peut être utilisée sur un objet sans paramètre, ou avec un paramètre.
J'ai fait un résumé "Méthode HTMLEncode pour javascript" .
la source
Basé sur angular's sanitize ... (syntaxe du module es6)
la source
if (value === null | value === undefined) return '';
une faute de frappe ou en fait une fonctionnalité? Si oui, pourquoi utiliser celui-ci et non le commun||
? Je vous remercie!!== null
?undefined
est la seule chose à avoir une équivalencenull
, donc deux triples égaux ne sont pas nécessaires de toute façonnull
et0
sont à la fois faux, oui, donc vous ne pouvez pas le faire!value
, mais le but==
est de rendre certaines choses plus faciles.0 == null
c'est faux.undefined == null
est vrai. vous pouvez juste fairevalue == null
Pour autant que je sache, il n'y a pas de méthode HTML Encode / Decode simple en javascript.
Cependant, ce que vous pouvez faire, c'est d'utiliser JS pour créer un élément arbitraire, définir son texte interne, puis le lire en utilisant innerHTML.
Disons qu'avec jQuery, cela devrait fonctionner:
Ou quelque chose dans ce sens.
la source
Vous ne devriez pas avoir à échapper / encoder des valeurs pour les transférer d'un champ de saisie à un autre.
JS ne va pas insérer du HTML brut ou quoi que ce soit; il indique simplement au DOM de définir la
value
propriété (ou l'attribut; pas sûr). Quoi qu'il en soit, le DOM gère tous les problèmes d'encodage pour vous. Sauf si vous faites quelque chose d'étrange comme l'utilisation dedocument.write
oueval
, l'encodage HTML sera effectivement transparent.Si vous parlez de générer une nouvelle zone de texte pour contenir le résultat ... c'est toujours aussi simple. Passez simplement la partie statique du code HTML à jQuery, puis définissez le reste des propriétés / attributs sur l'objet qu'il vous renvoie.
la source
J'ai eu un problème similaire et le résoudre en utilisant la fonction
encodeURIComponent
de JavaScript ( documentation )Par exemple, dans votre cas si vous utilisez:
et
tu auras
chalk%20%26%20cheese
. Même les espaces sont conservés.Dans mon cas, j'ai dû encoder une barre oblique inverse et ce code fonctionne parfaitement
et j'ai
name%2Fsurname
la source
Voici un petit peu qui émule la
Server.HTMLEncode
fonction de l'ASP de Microsoft, écrit en JavaScript pur:Le résultat n'encode pas les apostrophes, mais encode les autres spéciaux HTML et tout caractère en dehors de la plage 0x20-0x7e.
la source
Ma fonction pure-JS:
la source
Si vous souhaitez utiliser jQuery. J'ai trouvé ça:
http://www.jquerysdk.com/api/jQuery.htmlspecialchars
(partie du plugin jquery.string offerte par le kit de développement logiciel jQuery)
Le problème avec le prototype, je crois, c'est qu'il étend les objets de base en JavaScript et sera incompatible avec tout jQuery que vous pourriez avoir utilisé. Bien sûr, si vous utilisez déjà Prototype et non jQuery, ce ne sera pas un problème.
EDIT: Il y a aussi ceci, qui est un port des utilitaires de chaîne de Prototype pour jQuery:
http://stilldesigning.com/dotstring/
la source
Ceci provient du code source ExtJS.
la source
Sortira:
<script>alert("I hack your site")</script>
.htmlEncode () sera accessible sur toutes les chaînes une fois définies.
la source
HtmlEncode la valeur donnée
la source
J'ai rencontré des problèmes avec la barre oblique inverse dans ma chaîne Domaine \ Utilisateur.
J'ai ajouté ceci aux autres échappées de la réponse d'Anentropic
Ce que j'ai trouvé ici: Comment échapper à la barre oblique inverse en JavaScript?
la source
Choisir ce qui
escapeHTML()
se passe dans le prototype.jsL'ajout de ce script vous aide à échapper au HTML:
vous pouvez maintenant appeler la méthode escapeHTML sur les chaînes de votre script, comme:
J'espère que cela aidera toute personne à la recherche d'une solution simple sans avoir à inclure l'intégralité du prototype.js
la source
En utilisant certaines des autres réponses ici, j'ai fait une version qui remplace tous les caractères pertinents en une seule passe quel que soit le nombre de caractères codés distincts (un seul appel à
replace()
), ce sera donc plus rapide pour les chaînes plus grandes.Il ne dépend pas de l'API DOM pour exister ou d'autres bibliothèques.
Après l'avoir exécuté une fois, vous pouvez maintenant appeler
Obtenir
<>&"'
la source
la source