Escapando de strings HTML com jQuery
-
09-06-2019 - |
Pergunta
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] + ";";
}
) : "";
};