Codificação HTML perdida quando o atributo é lido do campo de entrada

Estou usando JavaScript para extrair um valor de um campo oculto e exibi-lo em uma caixa de texto. O valor no campo oculto é codificado.

Por exemplo,

<input id='hiddenId' type='hidden' value='chalk &amp; cheese' />

é puxado para dentro

<input type='text' value='chalk &amp; cheese' />

via algum jQuery para obter o valor do campo oculto (é nesse ponto que perco a codificação):

$('#hiddenId').attr('value')

O problema é que, quando leio chalk & cheesedo campo oculto, o JavaScript parece perder a codificação. Eu não quero que o valor seja chalk & cheese. Eu quero que o literal amp;seja retido.

Existe uma biblioteca JavaScript ou um método jQuery que codificará uma string em HTML?

EDIT: Esta resposta foi postada há muito tempo, e a htmlDecodefunção introduziu uma vulnerabilidade XSS. Foi modificado alterando o elemento temporário de a divpara textareareduzir a chance de XSS. Hoje em dia, porém, eu encorajo você a usar a API DOMParser, conforme sugerido em outra resposta .

Eu uso estas funções:

function htmlEncode(value){
  // Create a in-memory element, set its inner text (which is automatically encoded)
  // Then grab the encoded contents back out. The element never exists on the DOM.
  return $('<textarea/>').text(value).html();
}

function htmlDecode(value){
  return $('<textarea/>').html(value).text();
}

Basicamente, um elemento de área de texto é criado na memória, mas nunca é anexado ao documento.

Na htmlEncodefunção, defino o innerTextdo elemento e recupero o codificado innerHTML; na htmlDecodefunção, defino o innerHTMLvalor do elemento e o innerTexté recuperado.

Veja um exemplo em execução aqui .

O truque do jQuery não codifica aspas e, no IE, reduz o espaço em branco.

Baseado no template de escape no Django, que eu acho que já é muito usado / testado, criei essa função que faz o que é necessário.

É sem dúvida mais simples (e possivelmente mais rápido) do que qualquer uma das soluções alternativas para o problema de remoção de espaços em branco - e codifica aspas, o que é essencial se você usar o resultado dentro de um valor de atributo, por exemplo.

function htmlEscape(str) {
    return str
        .replace(/&/g, '&')
        .replace(/"/g, '"')
        .replace(/'/g, ''')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
}

// I needed the opposite function today, so adding here too:
function htmlUnescape(str){
    return str
        .replace(/&quot;/g, '"')
        .replace(/&#39;/g, "'")
        .replace(/&lt;/g, '<')
        .replace(/&gt;/g, '>')
        .replace(/&amp;/g, '&');
}

Atualização 2013-06-17:
Na busca pela fuga mais rápida, encontrei esta implementação de um replaceAllmétodo:
http://dumpsite.com/forum/index.php?topic=4.msg29#msg29
(também referenciada aqui: mais rápida método para substituir todas as instâncias de um caractere em uma string )
Alguns resultados de desempenho aqui:
http://jsperf.com/htmlencoderegex/25

Ele fornece uma sequência de resultados idêntica às replacecadeias internas acima. Ficaria muito feliz se alguém pudesse explicar por que é mais rápido !?

Atualização 2015-03-04:
Acabei de perceber que o AngularJS está usando exatamente o método acima:
https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js#L435

Eles adicionam alguns refinamentos - eles parecem estar lidando com um problema Unicode obscuro , além de converter todos os caracteres não alfanuméricos em entidades. Fiquei com a impressão de que o último não era necessário, desde que você tenha um conjunto de caracteres UTF8 especificado para o seu documento.

Vou notar que (4 anos depois) o Django ainda não faz nenhuma dessas coisas, então não tenho certeza de quão importantes elas são:
https://github.com/django/django/blob/1.8b1/django/utils /html.py#L44

Atualização 06/06/2016:
Você também pode querer escapar da barra /. Isso não é necessário para a codificação HTML correta, no entanto, é recomendado pelo OWASP como uma medida de segurança anti-XSS. (obrigado a @JNF por sugerir isso nos comentários)

        .replace(/\//g, '/');

Aqui está uma versão que não é do jQuery que é consideravelmente mais rápida que a .html()versão do jQuery e a .replace()versão. Isso preserva todo o espaço em branco, mas, como a versão do jQuery, não manipula aspas.

function htmlEncode( html ) {
    return document.createElement( 'a' ).appendChild( 
        document.createTextNode( html ) ).parentNode.innerHTML;
};

Velocidade: http://jsperf.com/htmlencoderegex/17

Demo:

Resultado:

Roteiro:

function htmlEncode( html ) {
    return document.createElement( 'a' ).appendChild( 
        document.createTextNode( html ) ).parentNode.innerHTML;
};

function htmlDecode( html ) {
    var a = document.createElement( 'a' ); a.innerHTML = html;
    return a.textContent;
};

document.getElementById( 'text' ).value = htmlEncode( document.getElementById( 'hidden' ).value );

//sanity check
var html = '<div>   &amp; hello</div>';
document.getElementById( 'same' ).textContent = 
      'html === htmlDecode( htmlEncode( html ) ): ' 
    + ( html === htmlDecode( htmlEncode( html ) ) );

HTML:

<input id="hidden" type="hidden" value="chalk    &amp; cheese" />
<input id="text" value="" />
<div id="same"></div>

Sei que é antiga, mas queria postar uma variação da resposta aceita que funcionará no IE sem remover linhas:

function multiLineHtmlEncode(value) {
    var lines = value.split(/\r\n|\r|\n/);
    for (var i = 0; i < lines.length; i++) {
        lines[i] = htmlEncode(lines[i]);
    }
    return lines.join('\r\n');
}

function htmlEncode(value) {
    return $('<div/>').text(value).html();
} 

Sublinhado fornece _.escape()e _.unescape()métodos que fazem isso.

> _.unescape( "chalk & cheese" );
  "chalk & cheese"

> _.escape( "chalk & cheese" );
  "chalk & cheese"

Boa resposta. Observe que, se o valor a codificar for undefinedou nullcom o jQuery 1.4.2, você poderá obter erros como:

jQuery("<div/>").text(value).html is not a function

OU

Uncaught TypeError: Object has no method 'html'

A solução é modificar a função para verificar um valor real:

function htmlEncode(value){ 
    if (value) {
        return jQuery('<div/>').text(value).html(); 
    } else {
        return '';
    }
}

Para aqueles que preferem javascript simples, eis o método que usei com sucesso:

function escapeHTML (str)
{
    var div = document.createElement('div');
    var text = document.createTextNode(str);
    div.appendChild(text);
    return div.innerHTML;
}

FWIW, a codificação não está sendo perdida. A codificação é usada pelo analisador de marcação (navegador) durante o carregamento da página. Depois que a fonte é lida e analisada e o navegador carrega o DOM na memória, a codificação é analisada no que representa. Assim, quando seu JS é executado para ler qualquer coisa na memória, o caractere recebido é o que a codificação representa.

Talvez eu esteja operando estritamente na semântica aqui, mas queria que você entendesse o propósito da codificação. A palavra "perdido" faz parecer que algo não está funcionando como deveria.

Mais rápido sem o Jquery. Você pode codificar todos os caracteres da sua string:

function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}

Ou apenas alveje os personagens principais com os quais se preocupar (&, inebreaks, <,>, "e ') como:

function encode(r){
return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}

test.value=encode('Encode HTML entities!\n\n"Safe" escape <script id=\'\'> & useful in <pre> tags!');

testing.innerHTML=test.value;

/*************
* \x26 is &ampersand (it has to be first),
* \x0A is newline,
*************/

<textarea id=test rows="9" cols="55"></textarea>

<div id="testing">www.WHAK.com</div>

O protótipo foi incorporado à classe String . Portanto, se você estiver usando / planeja usar o Prototype, ele fará algo como:

'<div class="article">This is an article</div>'.escapeHTML();
// -> "&lt;div class="article"&gt;This is an article&lt;/div&gt;"

Aqui está uma solução javascript simples. Ele estende o objeto String com um método "HTMLEncode" que pode ser usado em um objeto sem parâmetro ou com um parâmetro.

String.prototype.HTMLEncode = function(str) {
  var result = "";
  var str = (arguments.length===1) ? str : this;
  for(var i=0; i<str.length; i++) {
     var chrcode = str.charCodeAt(i);
     result+=(chrcode>128) ? "&#"+chrcode+";" : str.substr(i,1)
   }
   return result;
}
// TEST
console.log("stetaewteaw æø".HTMLEncode());
console.log("stetaewteaw æø".HTMLEncode("æåøåæå"))

Eu criei uma essência "método HTMLEncode para javascript" .

Baseado na higienização angular ... (sintaxe do módulo es6)

// ref: https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js
const SURROGATE_PAIR_REGEXP = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
const NON_ALPHANUMERIC_REGEXP = /([^\#-~| |!])/g;

const decodeElem = document.createElement('pre');


/**
 * Decodes html encoded text, so that the actual string may
 * be used.
 * @param value
 * @returns {string} decoded text
 */
export function decode(value) {
  if (!value) return '';
  decodeElem.innerHTML = value.replace(/</g, '&lt;');
  return decodeElem.textContent;
}


/**
 * Encodes all potentially dangerous characters, so that the
 * resulting string can be safely inserted into attribute or
 * element text.
 * @param value
 * @returns {string} encoded text
 */
export function encode(value) {
  if (value === null || value === undefined) return '';
  return String(value).
    replace(/&/g, '&amp;').
    replace(SURROGATE_PAIR_REGEXP, value => {
      var hi = value.charCodeAt(0);
      var low = value.charCodeAt(1);
      return '&#' + (((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000) + ';';
    }).
    replace(NON_ALPHANUMERIC_REGEXP, value => {
      return '&#' + value.charCodeAt(0) + ';';
    }).
    replace(/</g, '&lt;').
    replace(/>/g, '&gt;');
}

export default {encode,decode};

Tanto quanto eu sei, não há nenhum método HTML Encode / Decode em javascript.

No entanto, o que você pode fazer é usar JS para criar um elemento arbitrário, definir seu texto interno e, em seguida, lê-lo usando innerHTML.

Digamos que, com o jQuery, isso funcione:

var helper = $('chalk & cheese').hide().appendTo('body');
var htmled = helper.html();
helper.remove();

Ou algo nesse sentido.

Você não precisa escapar / codificar valores para transferi-los de um campo de entrada para outro.

<form>
 <input id="button" type="button" value="Click me">
 <input type="hidden" id="hiddenId" name="hiddenId" value="I like cheese">
 <input type="text" id="output" name="output">
</form>
<script>
    $(document).ready(function(e) {
        $('#button').click(function(e) {
            $('#output').val($('#hiddenId').val());
        });
    });
</script>

JS não vai inserir HTML bruto ou qualquer coisa; apenas informa ao DOM para definir a valuepropriedade (ou atributo; não tenho certeza). De qualquer forma, o DOM lida com qualquer problema de codificação para você. A menos que você esteja fazendo algo estranho como usardocument.write ou eval, a codificação HTML será efetivamente transparente.

Se você está falando sobre gerar uma nova caixa de texto para manter o resultado ... ainda é fácil. Apenas passe a parte estática do HTML para jQuery e defina o restante das propriedades / atributos no objeto que ele retornar para você.

$box = $('<input type="text" name="whatever">').val($('#hiddenId').val());

Eu tive um problema semelhante e resolvi-o usando a função encodeURIComponentdo JavaScript ( documentação )

Por exemplo, no seu caso, se você usar:

<input id='hiddenId' type='hidden' value='chalk & cheese' />

e

encodeURIComponent($('#hiddenId').attr('value'))

você receberá chalk%20%26%20cheese. Mesmo espaços são mantidos.

No meu caso, tive que codificar uma barra invertida e esse código funciona perfeitamente

encodeURIComponent('name/surname')

e eu tenho name%2Fsurname

Aqui está um pouco que emula a Server.HTMLEncodefunção do ASP da Microsoft, escrita em JavaScript puro:

function htmlEncode(s) {
  var ntable = {
    "&": "amp",
    "<": "lt",
    ">": "gt",
    "\"": "quot"
  };
  s = s.replace(/[&<>"]/g, function(ch) {
    return "&" + ntable[ch] + ";";
  })
  s = s.replace(/[^ -\x7e]/g, function(ch) {
    return "&#" + ch.charCodeAt(0).toString() + ";";
  });
  return s;
}

O resultado não codifica apóstrofes, mas codifica os outros especiais em HTML e qualquer caractere fora do intervalo 0x20-0x7e.

Minha função JS pura:

/**
 * HTML entities encode
 *
 * @param {string} str Input text
 * @return {string} Filtered text
 */
function htmlencode (str){

  var div = document.createElement('div');
  div.appendChild(document.createTextNode(str));
  return div.innerHTML;
}

Entidades HTML de JavaScript codificam e decodificam

Se você deseja usar o jQuery. Eu achei isto:

http://www.jquerysdk.com/api/jQuery.htmlspecialchars

(parte do plugin jquery.string oferecido pelo jQuery SDK)

O problema com o Prototype, acredito, é que ele estende objetos de base em JavaScript e será incompatível com qualquer jQuery que você possa ter usado. Obviamente, se você já estiver usando o Prototype e não o jQuery, não será um problema.

EDIT: Também existe isso, que é uma porta dos utilitários de string do Prototype para jQuery:

http://stilldesigning.com/dotstring/

var htmlEnDeCode = (function() {
    var charToEntityRegex,
        entityToCharRegex,
        charToEntity,
        entityToChar;

    function resetCharacterEntities() {
        charToEntity = {};
        entityToChar = {};
        // add the default set
        addCharacterEntities({
            '&'     :   '&',
            '>'      :   '>',
            '&lt;'      :   '<',
            '&quot;'    :   '"',
            '&#39;'     :   "'"
        });
    }

    function addCharacterEntities(newEntities) {
        var charKeys = [],
            entityKeys = [],
            key, echar;
        for (key in newEntities) {
            echar = newEntities[key];
            entityToChar[key] = echar;
            charToEntity[echar] = key;
            charKeys.push(echar);
            entityKeys.push(key);
        }
        charToEntityRegex = new RegExp('(' + charKeys.join('|') + ')', 'g');
        entityToCharRegex = new RegExp('(' + entityKeys.join('|') + '|&#[0-9]{1,5};' + ')', 'g');
    }

    function htmlEncode(value){
        var htmlEncodeReplaceFn = function(match, capture) {
            return charToEntity[capture];
        };

        return (!value) ? value : String(value).replace(charToEntityRegex, htmlEncodeReplaceFn);
    }

    function htmlDecode(value) {
        var htmlDecodeReplaceFn = function(match, capture) {
            return (capture in entityToChar) ? entityToChar[capture] : String.fromCharCode(parseInt(capture.substr(2), 10));
        };

        return (!value) ? value : String(value).replace(entityToCharRegex, htmlDecodeReplaceFn);
    }

    resetCharacterEntities();

    return {
        htmlEncode: htmlEncode,
        htmlDecode: htmlDecode
    };
})();

Isto é do código fonte ExtJS.

<script>
String.prototype.htmlEncode = function () {
    return String(this)
        .replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');

}

var aString = '<script>alert("I hack your site")</script>';
console.log(aString.htmlEncode());
</script>

Saída: <script>alert("I hack your site")</script>

.htmlEncode () estará acessível em todas as strings, uma vez definidas.

Html Codifica o valor fornecido

  var htmlEncodeContainer = $('<div />');
  function htmlEncode(value) {
    if (value) {
      return htmlEncodeContainer.text(value).html();
    } else {
      return '';
    }
  }

Corri alguns problemas com barra invertida na minha string Domain \ User.

Eu adicionei isso às outras fugas da resposta da Anentropic

.replace(/\\/g, '\')

O que encontrei aqui: Como escapar da barra invertida em JavaScript?

Escolhendo o que escapeHTML()está fazendo no prototype.js

Adicionar este script ajuda você a escaparHTML:

String.prototype.escapeHTML = function() { 
    return this.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
}

agora você pode chamar o método escapeHTML em cadeias de caracteres em seu script, como:

var escapedString = "<h1>this is HTML</h1>".escapeHTML();
// gives: "&lt;h1&gt;this is HTML&lt;/h1&gt;"

Espero que ajude quem procura uma solução simples sem precisar incluir todo o prototype.js

Usando algumas das outras respostas aqui, criei uma versão que substitui todos os caracteres pertinentes em uma passagem, independentemente do número de caracteres codificados distintos (apenas uma chamada para replace()), para que seja mais rápido para seqüências maiores.

Ele não depende da API do DOM para existir ou de outras bibliotecas.

window.encodeHTML = (function() {
    function escapeRegex(s) {
        return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
    }
    var encodings = {
        '&'  : '&',
        '"'  : '"',
        '\'' : ''',
        '<'  : '&lt;',
        '>'  : '&gt;',
        '\\' : '&#x2F;'
    };
    function encode(what) { return encodings[what]; };
    var specialChars = new RegExp('[' +
        escapeRegex(Object.keys(encodings).join('')) +
    ']', 'g');

    return function(text) { return text.replace(specialChars, encode); };
})();

Depois de executá-lo uma vez, agora você pode ligar

encodeHTML('<>&"\'')

Para obter <>&"'