619 votes

S’échappant des chaînes HTML avec jQuery

<p>Quelqu'un sait-il d’une manière simple d’échappement HTML de chaînes dans <a href="http://jquery.com/">jQuery</a>? J’ai besoin pouvoir passer une chaîne arbitraire et faites-le correctement échappé à afficher dans une page HTML (prévenir les attaques par injection de JavaScript/HTML). Je suis sûr il est possible d’étendre de jQuery pour ce faire, mais je ne sais pas assez sur le cadre pour le moment d’y parvenir.</p>

611voto

Tom Gruner Points 3570
<p>Il y a aussi la solution de mustache.js<p><a href="https://github.com/janl/mustache.js/blob/master/mustache.js#L82">https://github.com/janl/Mustache.js/BLOB/Master/Mustache.js#L82</a></p><pre><code></code></pre></p>

452voto

travis Points 14676
<p>Puisque vous utilisez jQuery, vous pouvez simplement définir de l’élément <code></code> propriété :<pre><code></code></pre></p>

185voto

Henrik N Points 4447
<pre><code></code><p><a href="http://debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb">http://Debuggable.com/posts/encode-html-Entities-with-jQuery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb</a></p></pre>

61voto

tghw Points 14244
<p>Si vous êtes échapper au format HTML, il y a seulement trois que je peux penser qui serait vraiment nécessaire :<pre><code></code></pre><p>Selon votre cas d’utilisation, vous devrez aussi faire des choses comme "à <code></code> . Si la liste a obtenu assez grande, j’ai eu il suffit d’utiliser un tableau :</p><pre><code></code></pre><p><code></code>s’il échappera seulement d’URLs, pas de HTML.</p></p>

36voto

zrajm Points 509

J'ai écrit une petite fonction qui fait cela. Il ne s'échappe ", &, < et > (mais le plus souvent c'est tout ce que vous devez de toute façon). Il est un peu plus élégant que la fois précédente, proposé des solutions qu'elle n'utilise qu' un seul .replace() faire la conversion.

var escapeHTML = (function () {
    'use strict';
    var chr = { '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' };
    return function (text) {
        return text.replace(/[\"&<>]/g, function (a) { return chr[a]; });
    };
}());

Et la fonction utilise une fermeture à conserver chr de lui-même sans avoir à les ré-initialiser chaque fois que vous appelez. C'est simple, clair de Javascript, pas de jQuery nécessaire.

Échapper / et ' trop

Edit en réponse à mklement's commentaire.

La fonction ci-dessus peut facilement être étendue pour inclure n'importe quel caractère. Pour spécifier les caractères à échapper, il suffit de les insérer à la fois dans la classe de caractères dans l'expression régulière (c'est à dire à l'intérieur de l' /[...]/g) et que l'inscription dans l' chr objet.

var escapeHTML = (function () {
    'use strict';
    var chr = {
        '"': '&quot;', '&': '&amp;', "'": '&#39;',
        '/': '&#47;',  '<': '&lt;',  '>': '&gt;'
    };
    return function (text) {
        return text.replace(/[\"&'\/<>]/g, function (a) { return chr[a]; });
    };
}());

Remarque le mode d'utilisation de l' &#39; pour l'apostrophe (la symbolique de l'entité &apos; pourrait avoir été utilisé au lieu de cela – il est défini dans le fichier XML, mais était à l'origine pas inclus dans la spécification HTML et peut donc ne pas être pris en charge par tous les navigateurs. Voir: article de Wikipedia sur le code HTML des codages de caractères). Je me souviens aussi avoir lu quelque part que l'utilisation de décimales entités est bien plus répandu que l'utilisation hexadécimal, mais je n'arrive pas à trouver la source pour l'instant. (Et il ne peut y avoir de nombreux navigateurs qui ne prend pas en charge le format hexadécimal entités.)

Remarque: l'Ajout d' / et ' à la liste des caractères d'échappement n'est pas du tout utile, car ils n'ont pas de signification particulière en HTML et n'a pas besoin d' être échappés.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X