HTML de codage perdu lors de la lecture d'attribut du champ de saisie
Je suis en utilisant JavaScript pour la traction d'une valeur d'un champ caché et l'afficher dans une textbox. La valeur du champ caché est codé.
Par exemple,
<input id='hiddenId' type='hidden' value='chalk & cheese' />
se tire dans
<input type='text' value='chalk & cheese' />
par le biais de certains de jQuery pour obtenir la valeur du champ caché (c'est à ce moment que je perds de l'encodage):
$('#hiddenId').attr('value')
Le problème est que lorsque j'ai lu chalk & cheese
du champ caché, JavaScript semble perdre de l'encodage. Je ne veux pas la valeur à chalk & cheese
. Je veux le littéral amp;
être conservé.
Est-il une bibliothèque JavaScript ou jQuery méthode HTML-encoder une chaîne de caractères?
- Pouvez-vous montrer le code Javascript que vous utilisez?
- avons ajouté la façon dont je reçois la valeur du champ caché
- debuggable.com/posts/...
- Ne PAS utiliser la méthode innerHTML (le jQuery .html() la méthode utilise innerHTML), comme sur certaines (je ne l'ai testé Chrome) des navigateurs, ce ne sera pas échapper les guillemets, donc si vous mettez votre valeur en une valeur d'attribut, vous vous retrouvez avec une vulnérabilité XSS.
- dans quel contexte est
chalk
etcheese
jamais utilisés ensemble 0_o - lors de la comparaison de deux éléments. exemple. ils sont aussi différents que la craie et le fromage 😉
Vous devez vous connecter pour publier un commentaire.
EDIT: Cette réponse a été posté il y a longtemps, et le
htmlDecode
fonction introduit une vulnérabilité XSS. Il a été modifié, la modification de la temporaire de l'élément à partir d'undiv
à untextarea
réduire le XSS chance. Mais aujourd'hui, je voudrais vous encourager à utiliser le DOMParser API comme suggéré dans d'autres anwswer.- Je utiliser ces fonctions:
Fondamentalement un élément div est créé dans la mémoire, mais il n'est jamais jointe au document.
Sur le
htmlEncode
fonction que j'ai mis leinnerText
de l'élément, et de récupérer la codéesinnerHTML
; sur lehtmlDecode
fonction que j'ai mis leinnerHTML
valeur de l'élément et de lainnerText
est extrait.Vérifier l'exécution d'un exemple ici.
white-space
de la propriété, ce qui suggère comment les espaces dans le code HTML contenu doit être traitée. La présence de la propery implique que "c'est préformaté, les espaces et les sauts de ligne doivent être préservés". Cela rompt avec la séparation de style et de contenu, parce que si vous essayez de reformater le code HTML afin d'être "jolie" ou vous aller-retour à travers un codage/décodage cycle comme cela, puis exécute des espaces et les sauts sont réduits, et le codeur a aucun moyen de savoir si c'était OK pour le faire, car il n'est pas conscient de lawhite-space:pre-*;
indicateur dans un fichier CSS externe!<br />
devient<br />
. Ce que vous voulez, c'est l'une des fonctions javascript appeléescape()
ouencodeURI()
. w3schools.com/jsref/jsref_escape.asp et w3schools.com/jsref/jsref_encodeuri.asp"
, j'ai essayé$('<div/>').text('"').html();
mais qui me donne juste"
.Le jQuery, le truc de ne pas encoder les guillemets et dans IE it bande de vos espaces.
Basé sur la échapper templatetag dans Django, qui je pense est largement utilisé/testé déjà, j'ai fait une fonction qui fait ce qui est nécessaire.
C'est sans doute plus simple (et peut-être plus rapidement) que l'une des solutions pour les espaces de décapage de problème - et il encode les guillemets, ce qui est essentiel si vous allez utiliser le résultat à l'intérieur de la valeur d'un attribut par exemple.
Mise à jour 2013-06-17:
Dans la recherche de la manière la plus rapide s'échapper, j'ai trouvé cette mise en œuvre d'un
replaceAll
méthode:http://dumpsite.com/forum/index.php?topic=4.msg29#msg29
(également référencé ici: Méthode la plus rapide pour remplacer toutes les occurrences d'un caractère dans une chaîne)
Certains des résultats de performance ici:
http://jsperf.com/htmlencoderegex/25
Il donne identiques chaîne de résultat pour le groupe builtin
replace
chaînes 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 sont en utilisant exactement la méthode ci-dessus:
https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js#L435
Ils ajouter quelques raffinements - ils semblent être de la manipulation d'un obscur Unicode problème ainsi que la conversion de tous les caractères non-alphanumériques à des entités. J'étais sous l'impression que le dernier n'était pas nécessaire tant que vous avez un charset UTF8 spécifié pour votre document.
Je note que (4 ans plus tard) Django encore de ne pas faire l'une de ces choses, donc je ne suis pas sûr de savoir comment ils sont importants:
https://github.com/django/django/blob/1.8b1/django/utils/html.py#L44
Mise à jour 2016-04-06:
Vous pouvez aussi vous souhaitez échapper à barre oblique
/
. Ce n'est pas nécessaire pour corriger le codage HTML, mais il est recommandé par l'OWASP comme un anti-XSS mesure de sécurité. (merci à @FNJ pour ce qui suggère que cela dans les commentaires)'
au lieu de'
'
n'est pas valide en entité HTML.'
comme ' un (mauvais) vs ' (bonne) est une question distincte de celle de savoir si la fonction code guillemets (l'intelligent jquery truc qui ne marche pas). Si vous encodez les guillemets que la chaîne résultante est sûr à utiliser n'importe où dans un document html (même à l'intérieur de la valeur d'un attribut)./g
,.replace()
ne remplacera le premier match./
. OWASP sur le sujetif (str === null || typeof str === 'undefined') return '';
à la htmlEscape méthode...String
et donc il va déclencher une erreur si mauvais type d'objet est passé en. La Validation ou le casting devrait se produire en dehors de cette fonction, depuis la définition de "corriger" le comportement de ces cas dépendra du contexte.'
maintenant en 2016?'
est que ce n'est pas un fonctionnaire HTML 4 de l'entité. Mais c'est en HTML 5 maintenant.Except for alphanumeric characters, escape all characters with ASCII values less than 256 with the &#xHH; format [...] to prevent switching out of the attribute. The reason this rule is so broad is that developers frequently leave attributes unquoted.
non cotées attributs peuvent être divisés en nombreuses façons.Voici un non-jQuery version qui est beaucoup plus rapide que celle de l'jQuery
.html()
de la version et de 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:
De sortie:
Script:
HTML:
.replace()
version récemment suggéré par @SEoF s'avère être massivement plus rapide: jsperf.com/htmlencoderegex/22/g
,.replace()
ne fait que le premier match.replace('a', 'b', 'g')
qui fonctionne de la même commereplace(/a/g, 'b')
...la vitesse est identique trop bienreplaceAll
méthode jsperf.com/htmlencoderegex/25.replace()
..replace()
, mais l'indice de référence est configuré de manière incorrecte en ce qu'elle n'utilisez pas précompilé les expressions régulières et les construit à la volée à chaque fois..createElement()
?html
est un contenu d'un<pre>
balise puis ses espaces blancs seront effacéesJe sais que c'est un ancien, mais je voulais poster une variation de la accepté de répondre à qui fonctionne dans IE sans enlever les lignes:
Trait de soulignement fournit
_.escape()
et_.ne pas encoder()
méthodes qui font cela.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 est de modifier la fonction pour vérifier une valeur réelle:
jQuery('<div/>').text(value || '').html()
value
avec unif
évite d'avoir à créer un DIV à la volée et de saisir la valeur. Cela peut être beaucoup plus performant sihtmlEncode
est appelé beaucoup de choses ET s'il est probable quevalue
sera vide.?:
🙂Pour ceux qui préfèrent la plaine javascript, voici la méthode que j'ai utilisé avec succès:
FWIW, l'encodage n'est pas perdue. L'encodage utilisé par le balisage de l'analyseur (navigateur) pendant le chargement de la page. Une fois que la source est lu et interprété, et que le navigateur a le DOM chargé en mémoire, le codage a été analysée en ce qu'il représente. Donc, le temps que votre JS est d'exécuter de lire le contenu de la mémoire, le char c'est ce que l'encodage représentés.
J'ai peut-être d'exploitation strictement sémantique ici, mais je voulais vous faire comprendre le but de l'encodage. Le mot "perdu" le fait ressembler à quelque chose ne fonctionne pas comme il le devrait.
Prototype a intégré le Classe String. Donc, si vous utilisez/plan de l'utilisation du Prototype, il fait quelque chose comme:
.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
assez Facile.Plus vite sans Jquery. Vous pouvez coder chaque caractère dans votre chaîne:
Ou tout simplement cibler les principaux personnages à s'inquiéter (&, inebreaks, <, >, "et") telles que:
JS:
HTML:
Ici est une simple solution d'activer javascript. Il s'étend de la Chaîne de l'objet avec une méthode "HTMLEncode" qui peut être utilisé sur un objet sans paramètre, ou avec un paramètre.
J'ai fait un résumé "HTMLEncode méthode pour javascript".
Basé sur angulaire de la désinfecter... (es6 module syntaxe)
if (value === null | value === undefined) return '';
une faute de frappe ou une fonction? Si oui, pourquoi l'utiliser et non pas la commune||
? Merci!!!!!== null
?undefined
est la seule chose à avoir l'équivalence avecnull
, de sorte que deux triple-est égal n'est pas nécessaire de toute façonnull
et0
sont à la fois falsy, oui, donc tu ne peux pas juste faire!value
, mais le point de l'ensemble de==
est de rendre certaines choses plus facile.0 == null
est faux.undefined == null
est vrai. il vous suffit de fairevalue == null
autant que je sache, il n'est pas tout droit vers l'avant HTML de codage/Décodage des méthodes en javascript.
Cependant, ce que vous pouvez faire, est d'utiliser JS pour créer un élément arbitraire, il l'intérieure de texte, puis de le lire en utilisant innerHTML.
dire, avec jQuery, cela devrait fonctionner:
ou quelque chose le long de ces lignes de
Vous ne devriez pas avoir à s'échapper/coder les valeurs dans le but de faire la navette d'un champ de saisie à l'autre.
JS ne va pas à l'insertion de code HTML brut ou quoi que ce soit; il indique simplement le DOM pour définir la
value
de propriété (ou de l'attribut; pas sûr). De toute façon, le DOM traite tous les problèmes d'encodage pour vous. Sauf si vous faites quelque chose de bizarre, comme l'utilisation dedocument.write
oueval
, HTML de codage sera effectivement transparent.Si vous parlez de la génération d'une nouvelle zone de texte pour contenir le résultat...c'est toujours aussi facile. Il suffit de passer la partie statique du code HTML de jQuery, et ensuite mis le reste des propriétés/attributs de l'objet auquel il renvoie.
J'ai eu le même problème et de le résoudre à l'aide de la fonction
encodeURIComponent
à partir de JavaScript (la documentation)Par exemple, dans votre cas, si vous utilisez:
et
vous obtiendrez
chalk%20%26%20cheese
. Même les espaces sont conservés.Dans mon cas, j'ai dû coder une barre oblique inverse et que ce code fonctionne parfaitement
et j'ai eu
name%2Fsurname
Mon pur-JS fonction:
Si vous souhaitez utiliser jQuery. J'ai trouvé ceci:
http://www.jquerysdk.com/api/jQuery.htmlspecialchars
(partie de jquery.chaîne de plugin proposé par jQuery SDK)
Le problème avec le Prototype, je crois, c'est qu'elle s'étend de la base d'objets en JavaScript et sera incompatible avec toute jQuery que vous avez utilisée. Bien sûr, si vous êtes déjà à l'aide de Prototype et pas de jQuery, il ne sera pas un problème.
EDIT: il y a Aussi ceci, qui est un port de Prototype de la chaîne d'utilitaires pour jQuery:
http://stilldesigning.com/dotstring/
C'est à partir de ExtJS code source.
Sera de sortie:
<script>alert("I hack your site")</script>
.htmlEncode() sera accessible sur toutes les chaînes, une fois défini.
HtmlEncodes la valeur donnée
J'ai rencontré quelques problèmes avec la barre oblique inverse dans mon Domaine\Utilisateur de la chaîne.
J'ai ajouté ceci à l'autre s'échappe de Anentropic la réponse de
Que j'ai trouvé ici:
Comment échapper à la barre oblique inverse en JavaScript?
Ici est un peu ce qui émule le
Server.HTMLEncode
fonction à partir de Microsoft ASP, écrite en pur JavaScript:JS:
Le résultat ne pas encoder les apostrophes, mais le code HTML promos et n'importe quel caractère à l'extérieur de la 0x20-0x7e gamme.
La cueillette de ce
escapeHTML()
est fait dans le prototype.jsL'ajout de ce script vous permet de escapeHTML:
maintenant, vous pouvez appeler escapeHTML méthode sur des chaînes dans votre script, comme par exemple:
Espère que cela aide ceux qui cherchent une solution simple sans avoir à inclure l'ensemble de la prototype.js
À l'aide de certaines autres réponses ici j'ai fait une version qui remplace tous les caractères en une seule passe, quel que soit le nombre de différents caractères codés (un seul appel à la
replace()
) sera plus rapide pour les grandes chaînes.Il ne repose pas sur l'API DOM pour exister ou sur d'autres bibliothèques.
Ayant couru qu'une fois, vous pouvez maintenant appeler
Pour obtenir
<>&"'
JS: