HTML-кодування втрачається, коли атрибут читається з поля введення

Я використовую JavaScript, щоб витягнути значення із прихованого поля та відобразити його в текстовому полі. Значення в прихованому полі кодується.

Наприклад,

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

втягується

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

через деякий jQuery, щоб отримати значення з прихованого поля (саме в цей момент я втрачаю кодування):

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

Проблема полягає в тому, що коли я читаю chalk & cheeseз прихованого поля, JavaScript, здається, втрачає кодування. Я не хочу, щоб цінність була chalk & cheese. Я хочу, щоб буквальне amp;було збережене.

Чи існує бібліотека JavaScript або метод jQuery, який кодує HTML-рядок?

EDIT: Ця відповідь була розміщена давно, і htmlDecodeфункція ввела вразливість XSS. Він був змінений, змінюючи тимчасовий елемент з а divна textareaзменшення шансу XSS. Але сьогодні я б закликав вас використовувати API DOMParser, як це запропоновано в іншій відповіді .

Я використовую ці функції:

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();
}

В основному елемент textarea створюється в пам'яті, але він ніколи не додається до документа.

У htmlEncodeфункції я встановлюю innerTextелемент і отримую закодований innerHTML; на htmlDecodeфункції я встановлюю innerHTMLзначення елемента іinnerText витягується.

Перевірте приклад запуску тут .

Трюк jQuery не кодує лапки, і в IE він зніме ваш пробіл.

Спираючись на шаблон тегів для втечі в Django, який, напевно, вже широко використовується / перевіряється, я зробив цю функцію, яка робить те, що потрібно.

Це, мабуть, простіше (і, можливо, швидше), ніж будь-який із способів вирішення проблеми, що знімає пробіл, - і він кодує цитати, що важливо, якщо ви, наприклад, збираєтесь використовувати результат у значенні атрибута.

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, '&');
}

Оновлення 2013-06-17:
У пошуках найшвидшого втечі я знайшов цю реалізацію replaceAllметоду:
http://dumpsite.com/forum/index.php?topic=4.msg29#msg29
(також тут посилається: Найшвидший метод заміни всіх екземплярів символу в рядку )
Деякі результати роботи тут:
http://jsperf.com/htmlencoderegex/25

Це дає ідентичний рядок результатів вбудованим replaceланцюжкам вище. Я був би дуже радий, якби хтось міг пояснити, чому це швидше !?

Оновлення 2015-03-04:
Я щойно помітив, що AngularJS використовує саме вказаний вище метод:
https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js#L435

Вони додають кілька уточнень - вони, мабуть, обробляють незрозумілу проблему Unicode , а також перетворюють усі не алфавітно-цифрові символи в сутності. У мене було враження, що останнє не було необхідним, доки для вашого документа вказано набір UTF8.

Зауважу, що (через 4 роки) Джанго все ще не робить жодної з цих речей, тому я не впевнений, наскільки вони важливі:
https://github.com/django/django/blob/1.8b1/django/utils /html.py#L44

Оновлення 2016-04-06:
Ви також можете уникнути нахилу вперед /. Це не потрібно для правильного кодування HTML, однак він рекомендує OWASP як запобіжний захід XSS. (дякую @JNF, що він запропонував це у коментарях)

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

Ось не-jQuery версія, яка значно швидша, ніж .html()версія jQuery і .replace()версія. Це зберігає всі пробіли, але, як і версія jQuery, не обробляє котирування.

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

Швидкість: http://jsperf.com/htmlencoderegex/17

Демонстрація:

Вихід:

Сценарій:

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>

Я знаю, що це стара, але я хотів опублікувати варіант прийнятої відповіді, який буде працювати в IE, не видаляючи рядки:

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();
} 

Підкреслення надає _.escape()та _.unescape()методи, які це роблять.

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

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

Хороша відповідь. Зауважте, що якщо значення для кодування є undefinedабо nullз jQuery 1.4.2, ви можете отримати помилки, такі як:

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

АБО

Uncaught TypeError: Object has no method 'html'

Рішення полягає в зміні функції, щоб перевірити фактичне значення:

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

Для тих, хто вважає за краще звичайний JavaScript, ось метод, який я успішно використовував:

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

FWIW, кодування не втрачається. Кодування використовується аналізатором розмітки (браузером) під час завантаження сторінки. Після того, як джерело зчитується і аналізується і браузер завантажує DOM у пам'ять, кодування розбирається на те, що воно представляє. Тож до того моменту, коли ваш JS виконаний, щоб прочитати що-небудь у пам'яті, знаки, які він отримує, - це те, що представляє кодування.

Я, можливо, тут суворо працює над семантикою, але я хотів, щоб ви зрозуміли мету кодування. Слово "загублене" робить звук так, ніби щось не працює так, як слід.

Швидше без Jquery. Ви можете кодувати кожен символ у рядку:

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

Або просто націліть на головних персонажів, які турбуються про (&, неполадки, <,>, "і"), наприклад:

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>

У прототипі є вбудований клас String . Тож якщо ви використовуєте / плануєте використовувати прототип, він робить щось на кшталт:

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

Ось просте рішення Javascript. Він розширює об'єкт String за допомогою методу "HTMLEncode", який можна використовувати на об'єкті без параметра або з параметром.

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("æåøåæå"))

Я створив суть "метод HTMLEncode для javascript" .

На основі санітарії кута ... (синтаксис модуля 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};

Наскільки я знаю, немає жодного прямого методу кодування / декодування HTML в JavaScript.

Однак те, що ви можете зробити, - це використовувати JS для створення довільного елемента, встановлення його внутрішнього тексту, а потім його зчитування за допомогою innerHTML.

Скажімо, з jQuery це має працювати:

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

Або щось у цьому напрямку.

Вам не доведеться уникати / кодувати значення, щоб перенести їх з одного поля введення в інше.

<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 не вставляє сирий HTML або щось інше; він просто повідомляє DOM встановити valueвластивість (або атрибут; не впевнений). У будь-якому випадку, DOM обробляє будь-які проблеми кодування для вас. Якщо ви не робите щось дивне на кшталт використання document.writeабо eval, HTML-кодування буде ефективно прозорим.

Якщо ви говорите про створення нового текстового поля для отримання результату ... це все одно так просто. Просто передайте статичну частину HTML в jQuery, а потім встановіть решта властивостей / атрибутів об’єкта, який він вам поверне.

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

У мене була подібна проблема і вирішити її за допомогою функції encodeURIComponentз JavaScript ( документація) )

Наприклад, у вашому випадку, якщо ви використовуєте:

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

і

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

ви отримаєте chalk%20%26%20cheese. Навіть пробіли зберігаються.

У моєму випадку мені довелося кодувати одну зворотну косу рису, і цей код працює чудово

encodeURIComponent('name/surname')

і я отримав name%2Fsurname

Ось трохи, що емулює Server.HTMLEncodeфункцію від ASP Майкрософт, написаний у чистому JavaScript:

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;
}

Результат не кодує апострофи, але кодує інші спеціальні HTML та будь-які символи поза діапазоном 0x20-0x7e.

Моя функція чистого JS:

/**
 * 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;
}

JavaScript HTML-кодування Кодування та декодування

Якщо ви хочете використовувати jQuery. Я знайшов це:

http://www.jquerysdk.com/api/jQuery.htmlспеціалістів

(частина плагіна jquery.string, запропонованого jQuery SDK)

Я вважаю, що проблема з прототипом полягає в тому, що він розширює базові об'єкти в JavaScript і буде несумісний з будь-яким jQuery, який ви могли використовувати. Звичайно, якщо ви вже використовуєте прототип, а не jQuery, це не буде проблемою.

EDIT: Також є це, що є портом рядкових утиліт прототипу для 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
    };
})();

Це з вихідного коду 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>

Виведе: <script>alert("I hack your site")</script>

.htmlEncode () буде доступний для всіх рядків, щойно визначені.

HtmlEncodes задане значення

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

Я зіткнувся з деякими проблемами із зворотною косою рисою в моєму рядку Домен \ Користувач.

Я додав це до інших втікань з відповіді Анентропіка

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

Що я тут знайшов: Як уникнути зворотної косої риси в JavaScript?

Вибір того, що escapeHTML()робиться в prototype.js

Додавання цього сценарію допоможе вам уникнутиHTML:

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

тепер ви можете викликати метод escapeHTML на рядках у вашому сценарії, наприклад:

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

Сподіваємось, це допомагає всім, хто шукає просте рішення, не включаючи весь prototype.js

Використовуючи деякі інші відповіді тут, я створив версію, яка замінює всі відповідні символи за один прохід, незалежно від кількості чітко закодованих символів (лише один дзвінок на replace()), тому буде швидше для великих рядків.

Він не покладається на існування API DOM або на інші бібліотеки.

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); };
})();

Запустивши це колись, тепер можна дзвонити

encodeHTML('<>&"\'')

Отримати <>&"'