Escapando de strings HTML com jQuery
https://stackoverflow.com/questions/24816
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Alguém conhece uma maneira fácil de escapar do HTML de strings em jQuery?Preciso ser capaz de passar uma string arbitrária e escapá-la adequadamente para exibição em uma página HTML (evitando ataques de injeção de JavaScript/HTML).Tenho certeza de que é possível estender o jQuery para fazer isso, mas não sei o suficiente sobre a estrutura no momento para fazer isso.
Solução
Já que você está usando jQuery, você pode simplesmente definir o elemento text propriedade:
// before:
// <div class="someClass">text</div>
var someHtmlString = "<script>alert('hi!');</script>";
// set a DIV's text:
$("div.someClass").text(someHtmlString);
// after:
// <div class="someClass"><script>alert('hi!');</script></div>
// get the text in a string:
var escaped = $("<div>").text(someHtmlString).html();
// value:
// <script>alert('hi!');</script>
Outras dicas
Há também a solução de bigode.js
var entityMap = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": ''',
'/': '/',
'`': '`',
'=': '='
};
function escapeHtml (string) {
return String(string).replace(/[&<>"'`=\/]/g, function (s) {
return entityMap[s];
});
}
$('<div/>').text('This is fun & stuff').html(); // "This is fun & stuff"
Fonte: http://debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb
Se você está fugindo para HTML, só consigo pensar em três que seriam realmente necessários:
html.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
Dependendo do seu caso de uso, você também pode precisar fazer coisas como " para ".Se a lista fosse grande o suficiente, eu usaria apenas um array:
var escaped = html;
var findReplace = [[/&/g, "&"], [/</g, "<"], [/>/g, ">"], [/"/g, """]]
for(var item in findReplace)
escaped = escaped.replace(findReplace[item][0], findReplace[item][1]);
encodeURIComponent() escapará apenas para URLs, não para HTML.
Eu escrevi uma pequena função que faz isso.Só escapa ", &, < e > (mas geralmente isso é tudo que você precisa).É um pouco mais elegante que as soluções propostas anteriormente, pois usa apenas um .replace() para fazer toda a conversão.(EDITAR 2: Complexidade de código reduzida, tornando a função ainda menor e mais organizada. Se você estiver curioso sobre o código original, consulte o final desta resposta.)
function escapeHtml(text) {
'use strict';
return text.replace(/[\"&<>]/g, function (a) {
return { '"': '"', '&': '&', '<': '<', '>': '>' }[a];
});
}
Este é Javascript simples, sem uso de jQuery.
Escapando / e ' também
Editar em resposta a mklementcomentário de.
A função acima pode ser facilmente expandida para incluir qualquer caractere.Para especificar mais caracteres para escapar, basta inseri-los na classe de caracteres da expressão regular (ou seja,dentro de /[...]/g) e como uma entrada no chr objeto.(EDITAR 2: Esta função também foi encurtada, da mesma forma.)
function escapeHtml(text) {
'use strict';
return text.replace(/[\"&'\/<>]/g, function (a) {
return {
'"': '"', '&': '&', "'": ''',
'/': '/', '<': '<', '>': '>'
}[a];
});
}
Observe o uso acima de ' para apóstrofo (a entidade simbólica ' pode ter sido usado em vez disso – é definido em XML, mas originalmente não foi incluído nas especificações HTML e pode, portanto, não ser suportado por todos os navegadores.Ver: Artigo da Wikipedia sobre codificações de caracteres HTML).Também me lembro de ter lido em algum lugar que o uso de entidades decimais é mais amplamente suportado do que o uso de hexadecimal, mas não consigo encontrar a fonte para isso agora.(E não pode haver muitos navegadores por aí que não suportem entidades hexadecimais.)
Observação: Adicionando / e ' à lista de caracteres de escape não é tão útil, pois eles não têm nenhum significado especial em HTML e não precisar para ser escapado.
Original escapeHtml Função
EDITAR 2: A função original usava uma variável (chr) para armazenar o objeto necessário para o .replace() ligar de volta.Essa variável também precisava de uma função anônima extra para seu escopo, tornando a função (desnecessariamente) um pouco maior e mais complexa.
var escapeHtml = (function () {
'use strict';
var chr = { '"': '"', '&': '&', '<': '<', '>': '>' };
return function (text) {
return text.replace(/[\"&<>]/g, function (a) { return chr[a]; });
};
}());
Não testei qual das duas versões é mais rápida.Se você fizer isso, sinta-se à vontade para adicionar informações e links sobre isso aqui.
Fácil de usar o sublinhado:
_.escape(string)
Sublinhado é uma biblioteca de utilitários que oferece muitos recursos que o js nativo não oferece.Há também lodash que é a mesma API do sublinhado, mas foi reescrito para ter melhor desempenho.
Sei que estou atrasado para esta festa, mas tenho uma solução muito fácil que não requer jQuery.
escaped = new Option(unescaped).innerHTML;
Editar:Isso não escapa às aspas.O único caso em que as aspas precisariam ser escapadas é se o conteúdo for colado em linha em um atributo dentro de uma string HTML.É difícil para mim imaginar um caso em que fazer isso seria um bom design.
Editar 2:Se o desempenho for crucial, a solução de maior desempenho (em cerca de 50%) ainda é uma série de substituições de regex.Os navegadores modernos detectarão que as expressões regulares não contêm operadores, apenas uma string, e recolherão todas elas em uma única operação.
Aqui está uma função JavaScript limpa e clara.Ele irá escapar de texto como "alguns < muitos" para "alguns <muitos".
function escapeHtmlEntities (str) {
if (typeof jQuery !== 'undefined') {
// Create an empty div to use as a container,
// then put the raw text in and get the HTML
// equivalent out.
return jQuery('<div/>').text(str).html();
}
// No jQuery, so use string replace.
return str
.replace(/&/g, '&')
.replace(/>/g, '>')
.replace(/</g, '<')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
Depois dos últimos testes posso recomendar o mais rápido e completamente entre navegadores compatível JavaScript nativo (DOM) solução:
function HTMLescape(html){
return document.createElement('div')
.appendChild(document.createTextNode(html))
.parentNode
.innerHTML
}
Se você repetir muitas vezes, poderá fazê-lo com variáveis já preparadas:
//prepare variables
var DOMtext = document.createTextNode("test");
var DOMnative = document.createElement("span");
DOMnative.appendChild(DOMtext);
//main work for each case
function HTMLescape(html){
DOMtext.nodeValue = html;
return DOMnative.innerHTML
}
Veja meu desempenho final comparação (pergunta da pilha).
Tentar Sublinhado.string lib, funciona com jQuery.
_.str.escapeHTML('<div>Blah blah blah</div>')
saída:
'<div>Blah blah blah</div>'
Melhorei o exemplo mustache.js adicionando o escapeHTML() método para o objeto string.
var __entityMap = {
"&": "&",
"<": "<",
">": ">",
'"': '"',
"'": ''',
"/": '/'
};
String.prototype.escapeHTML = function() {
return String(this).replace(/[&<>"'\/]/g, function (s) {
return __entityMap[s];
});
}
Dessa forma é bastante fácil de usar "Some <text>, more Text&Text".escapeHTML()
escape() e unescape() destinam-se a codificar/decodificar strings para URLs, não HTML.
Na verdade, eu uso o seguinte trecho para fazer o truque que não requer nenhuma estrutura:
var escapedHtml = html.replace(/&/g, '&')
.replace(/>/g, '>')
.replace(/</g, '<')
.replace(/"/g, '"')
.replace(/'/g, ''');
Se você tiver underscore.js, use _.escape (mais eficiente que o método jQuery postado acima):
_.escape('Curly, Larry & Moe'); // returns: Curly, Larry & Moe
Se você estiver seguindo a rota regex, há um erro no exemplo do tghw acima.
<!-- WON'T WORK - item[0] is an index, not an item -->
var escaped = html;
var findReplace = [[/&/g, "&"], [/</g, "<"], [/>/g,">"], [/"/g,
"""]]
for(var item in findReplace) {
escaped = escaped.replace(item[0], item[1]);
}
<!-- WORKS - findReplace[item[]] correctly references contents -->
var escaped = html;
var findReplace = [[/&/g, "&"], [/</g, "<"], [/>/g, ">"], [/"/g, """]]
for(var item in findReplace) {
escaped = escaped.replace(findReplace[item[0]], findReplace[item[1]]);
}
Este é um bom exemplo seguro ...
function escapeHtml(str) {
if (typeof(str) == "string"){
try{
var newStr = "";
var nextCode = 0;
for (var i = 0;i < str.length;i++){
nextCode = str.charCodeAt(i);
if (nextCode > 0 && nextCode < 128){
newStr += "&#"+nextCode+";";
}
else{
newStr += "?";
}
}
return newStr;
}
catch(err){
}
}
else{
return str;
}
}
Você pode fazer isso facilmente com vanilla js.
Basta adicionar um nó de texto ao documento.Ele será escapado pelo navegador.
var escaped = document.createTextNode("<HTML TO/ESCAPE/>")
document.getElementById("[PARENT_NODE]").appendChild(escaped)
(function(undefined){
var charsToReplace = {
'&': '&',
'<': '<',
'>': '>'
};
var replaceReg = new RegExp("[" + Object.keys(charsToReplace).join("") + "]", "g");
var replaceFn = function(tag){ return charsToReplace[tag] || tag; };
var replaceRegF = function(replaceMap) {
return (new RegExp("[" + Object.keys(charsToReplace).concat(Object.keys(replaceMap)).join("") + "]", "gi"));
};
var replaceFnF = function(replaceMap) {
return function(tag){ return replaceMap[tag] || charsToReplace[tag] || tag; };
};
String.prototype.htmlEscape = function(replaceMap) {
if (replaceMap === undefined) return this.replace(replaceReg, replaceFn);
return this.replace(replaceRegF(replaceMap), replaceFnF(replaceMap));
};
})();
Sem variáveis globais, alguma otimização de memória.Uso:
"some<tag>and&symbol©".htmlEscape({'©': '©'})
o resultado é:
"some<tag>and&symbol©"
function htmlEscape(str) {
var stringval="";
$.each(str, function (i, element) {
alert(element);
stringval += element
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(' ', '-')
.replace('?', '-')
.replace(':', '-')
.replace('|', '-')
.replace('.', '-');
});
alert(stringval);
return String(stringval);
}
2 métodos simples que NÃO requerem JQUERY...
Você pode codificar todos os caracteres na sua string assim:
function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}
Ou apenas mire nos personagens principais preocupar-se com &, quebras de linha, <, >, " e ' como:
function encode(r){
return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}
var myString='Encode HTML entities!\n"Safe" escape <script></'+'script> & other tags!';
test.value=encode(myString);
testing.innerHTML=encode(myString);
/*************
* \x26 is &ersand (it has to be first),
* \x0A is newline,
*************/<p><b>What JavaScript Generated:</b></p>
<textarea id=test rows="3" cols="55"></textarea>
<p><b>What It Renders Too In HTML:</b></p>
<div id="testing">www.WHAK.com</div>Exemplo de escape de JavaScript simples:
function escapeHtml(text) {
var div = document.createElement('div');
div.innerText = text;
return div.innerHTML;
}
escapeHtml("<script>alert('hi!');</script>")
// "<script>alert('hi!');</script>"
function htmlDecode(t){
if (t) return $('<div />').html(t).text();
}
Funciona como um encanto
Esta resposta fornece os métodos jQuery e JS normais, mas é o mais curto sem usar o DOM:
unescape(escape("It's > 20% less complicated this way."))
Sequência de escape: It%27s%20%3E%2020%25%20less%20complicated%20this%20way.
Se os espaços escapados incomodam você, tente:
unescape(escape("It's > 20% less complicated this way.").replace(/%20/g, " "))
Sequência de escape: It%27s %3E 20%25 less complicated this way.
Infelizmente, o escape() a função era obsoleto em JavaScript versão 1.5. encodeURI() ou encodeURIComponent() são alternativas, mas ignoram ', então a última linha do código se transformaria assim:
decodeURI(encodeURI("It's > 20% less complicated this way.").replace(/%20/g, " ").replace("'", '%27'))
Todos os principais navegadores ainda suportam o código curto e, dado o número de sites antigos, duvido que isso mude em breve.
Se você estiver salvando essas informações em um base de dados, é errado escapar do HTML usando um lado do cliente script, isso deve ser feito no servidor.Caso contrário, é fácil ignorar a proteção XSS.
Para deixar meu ponto claro, aqui está um exemplo usando uma das respostas:
Digamos que você esteja usando a função escapeHtml para escapar do HTML de um comentário em seu blog e depois publicá-lo em seu servidor.
var entityMap = {
"&": "&",
"<": "<",
">": ">",
'"': '"',
"'": ''',
"/": '/'
};
function escapeHtml(string) {
return String(string).replace(/[&<>"'\/]/g, function (s) {
return entityMap[s];
});
}
O usuário poderia:
- Edite os parâmetros da solicitação POST e substitua o comentário pelo código javascript.
- Substitua a função escapeHtml usando o console do navegador.
Se o usuário colar este snippet no console, a validação XSS será ignorada:
function escapeHtml(string){
return string
}
Todas as soluções são inúteis se você não evitar a nova fuga, por ex.a maioria das soluções continuaria escapando & para &.
escapeHtml = function (s) {
return s ? s.replace(
/[&<>'"]/g,
function (c, offset, str) {
if (c === "&") {
var substr = str.substring(offset, offset + 6);
if (/&(amp|lt|gt|apos|quot);/.test(substr)) {
// already escaped, do not re-escape
return c;
}
}
return "&" + {
"&": "amp",
"<": "lt",
">": "gt",
"'": "apos",
'"': "quot"
}[c] + ";";
}
) : "";
};
