Как unescape html в javascript?

Я работаю с веб-сервисом, который даст мне такие значения, как:

var text = "<<<&&&";

И мне нужно напечатать это, чтобы выглядеть как "< && & с javascript.

Но вот catch: я не могу использовать внутренний HTML (я фактически отправляю эти значения в библиотеку прототипов, которая создает текстовые узлы, поэтому не отменяет мою сырую строку html. Если редактирование библиотеки не будет, как бы вы отменили этот html?

Мне нужно взять на себя настоящую сделку, каков риск отказа от этого типа строк? как это работает innerHTML? и какие существуют другие варианты?

EDIT. Проблема заключается не в использовании javascript normal escape/unescape или даже в реализациях jQuery/prototype, а в проблемах безопасности, которые могут возникнуть при использовании любого из этих... aka "Они сказали мне, что их небезопасно использовать"

(Для тех, кто пытается понять, о чем говорит, с innerHTML unescaping этой странной строкой, посмотрите этот простой пример:

<html>
<head>
<title>createTextNode example</title>

<script type="text/javascript">

var text = "&lt;&lt;&lt;&amp;&amp;&amp;";
function addTextNode(){
    var newtext = document.createTextNode(text);
    var para = document.getElementById("p1");
    para.appendChild(newtext);
}
function innerHTMLTest(){
    var para = document.getElementById("p1");
    para.innerHTML = text;
}
</script>
</head>

<body>
<div style="border: 1px solid red">
<p id="p1">First line of paragraph.<br /></p>
</div><br />

<button onclick="addTextNode();">add another textNode.</button>
<button onclick="innerHTMLTest();">test innerHTML.</button>

</body>
</html>

Ответ 1

Измените тестовую строку на &lt;b&gt;&lt;&lt;&amp;&amp;&amp;&lt;/b&gt;, чтобы лучше понять, что такое риск... (или лучше, &lt;img src='http://www.spam.com/ASSETS/0EE75B480E5B450F807117E06219CDA6/spamReg.png' onload='alert(document.cookie);'&gt; для спама со спамом cookie)

См. пример в http://jsbin.com/uveme/139/ (на основе вашего примера, используя прототип для unescaping). Попробуйте щелкнуть по четырем различным кнопкам см. различные эффекты. Только последний - это риск для безопасности. (Вы можете просмотреть/отредактировать исходный код в http://jsbin.com/uveme/139/edit). Пример фактически не украл ваши файлы cookie...

  • Если ваш текст исходит из известного источника и не основан на любом пользовательском вводе, тогда вы в безопасности.
  • Если вы используете createTextNode для создания текста node и appendChild для вставки этого неизмененного объекта node непосредственно в ваш документ, вы в безопасности.
  • В противном случае вам необходимо принять соответствующие меры для обеспечения того, чтобы небезопасный контент не мог попасть в браузер браузера.

Примечание: Как отметил Бен Винегар Использование createTextNode - не волшебная пуля: используя ее, чтобы избежать строки, затем используя textContent или innerHTML, чтобы извлечь экранированный текст и сделать с ним другие вещи, не защищает вас при последующих использованиях. В частности, метод escapeHtml в Питере Браун ниже небезопасен, если используется для заполнения атрибутов.

Ответ 2

Очень хорошее чтение http://benv.ca/2012/10/4/you-are-probably-misusing-DOM-text-methods/, которое объясняет, почему условная мудрость использования createTextNode на самом деле вообще не защищена.

Репрезентативный пример берет из приведенной выше статьи риск:

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

var userWebsite = '" onmouseover="alert(\'derp\')" "';
var profileLink = '<a href="' + escapeHtml(userWebsite) + '">Bob</a>';
var div = document.getElementById('target');
div.innerHtml = profileLink;
// <a href="" onmouseover="alert('derp')" "">Bob</a>

Ответ 4

Некоторые догадки о том, что это стоит.

innerHTML - это буквально браузер, интерпретирующий hte html.

поэтому < становится меньше, чем символ, потому что то, что произойдет, если вы положите < в html-документе.

Самый большой риск для безопасности строк с и является выражением eval, любой JSON может сделать приложение незащищенным. Я не эксперт по безопасности, но если строки остаются строками, то вы должны быть в порядке.

Это еще один способ: innerHTML защищен, что неэкранированная строка находится на пути к html, поэтому нет риска для запуска javascript.

Ответ 5

Пока ваш код создает текстовые узлы, браузер НЕ должен делать ничего вредного. Фактически, если вы проверите созданный текст node с помощью Firebug или панели инструментов IE Dev, вы увидите, что браузер повторно экранирует специальные символы.

дайте ему

"<script>"

и он повторяет его:

"&lt;script&gt;"

Существует несколько типов узлов: Элементы, Документы, Текст, Атрибуты и т.д.

Опасность заключается в том, что браузер интерпретирует строку как содержащую script. Свойство innerHTML восприимчиво к этой проблеме, так как оно поручает браузеру создавать узлы Element, одним из которых может быть элемент script, или иметь встроенный Javascript, такой как обработчики onmouseover. Создание текстовых узлов обходит эту проблему.

Ответ 6

function mailpage()
{ mail_str =  "mailto:?subject= Check out the " + escape( document.title ); 
      mail_str += "&body=" + escape("I thought you might be interested in the " + document.title + ".\n\n" );
      mail_str += escape("You can view it at " + location.href + ".\n\n");
      location.href = mail_str;
}