Очистить / перезаписать HTML на стороне клиента

Вы не можете предвидеть все возможные странные типы искаженной разметки, которые какой-то браузер где-то может споткнуться, чтобы избежать попадания в черный список, поэтому не заносите в черный список. Вам может потребоваться удалить больше структур много, чем просто script / embed / object и обработчики.

Вместо этого попытайтесь разобрать HTML на элементы и атрибуты в иерархии, а затем запустить все имена элементов и атрибутов в минимально возможном белом списке. Также проверьте все пропускаемые атрибуты URL-адресов в белом списке (помните, что существуют более опасные протоколы, чем просто javascript :).

Если ввод - это правильно сформированный XHTML, первая часть вышеизложенного намного проще.

Как всегда с дезинфекцией HTML, если вы можете найти другой способ избежать этого, сделайте это вместо этого. Есть много-много потенциальных ям. Если основные службы веб-почты по прошествии многих лет все еще находят уязвимости, что заставляет вас думать, что вы можете добиться большего?

Обновление 2016: теперь существует пакет Закрытие Google на основе дезинфицирующего средства Caja.

Он имеет более чистый API, был переписан с учетом API, доступных в современных браузерах, и лучше взаимодействует с Closure Compiler.

Бесстыдный плагин: см. caja / плагин / html-sanitizer.js, чтобы узнать о дезинфицирующем средстве для HTML на стороне клиента, которое было тщательно проверено.

Он внесен в белый список, а не в черный, но белые списки настраиваются в соответствии с Caja

Если вы хотите удалить все теги, сделайте следующее:

var tagBody = '(?:[^"\'>]|"[^"]*"|\'[^\']*\')*';

var tagOrComment = new RegExp(
    '<(?:'
    // Comment body.
    + '!--(?:(?:-*[^->])*--+|-?)'
    // Special "raw text" elements whose content should be elided.
    + '|script\\b' + tagBody + '>[\\s\\S]*?</script\\s*'
    + '|style\\b' + tagBody + '>[\\s\\S]*?</style\\s*'
    // Regular name
    + '|/?[a-z]'
    + tagBody
    + ')>',
    'gi');
function removeTags(html) {
  var oldHtml;
  do {
    oldHtml = html;
    html = html.replace(tagOrComment, '');
  } while (html !== oldHtml);
  return html.replace(/</g, '&lt;');
}

Люди скажут вам, что вы можете создать элемент и назначить innerHTML, а затем получить innerText или textContent, а затем экранировать сущности в нем. Не делай этого. Он уязвим для внедрения XSS, поскольку <img src=bogus onerror=alert(1337)> будет запускать обработчик onerror, даже если узел никогда не подключен к DOM.

Никогда не доверяйте клиенту. Если вы пишете серверное приложение, предполагайте, что клиент всегда будет отправлять антисанитарные вредоносные данные. Это эмпирическое правило, которое убережет вас от неприятностей. Если вы можете, я бы посоветовал провести всю проверку и санацию в коде сервера, который, как вы знаете (в разумной степени), не будет возиться. Возможно, вы могли бы использовать серверное веб-приложение в качестве прокси для вашего клиентского кода, который извлекается от третьей стороны и выполняет очистку перед отправкой самому клиенту?

[править] Простите, я неправильно понял вопрос. Однако я верю своему совету. Ваши пользователи, вероятно, будут в большей безопасности, если вы продезинфицируете сервер перед отправкой им.

Я рекомендую исключить рамки из вашей жизни, это значительно упростит вам жизнь в долгосрочной перспективе.

cloneNode: при клонировании узла копируются все его атрибуты и их значения, кроме копирует ли НЕТ слушателей событий.

https://developer.mozilla.org/en/DOM/Node.cloneNode

Следующее не проверено, хотя я уже некоторое время использую Treewalkers, и они являются одной из самых недооцененных частей JavaScript. Вот список типов узлов, которые вы можете сканировать, обычно я использую SHOW_ELEMENT или SHOW_TEXT.

http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter

function xhtml_cleaner(id)
{
 var e = document.getElementById(id);
 var f = document.createDocumentFragment();
 f.appendChild(e.cloneNode(true));

 var walker = document.createTreeWalker(f,NodeFilter.SHOW_ELEMENT,null,false);

 while (walker.nextNode())
 {
  var c = walker.currentNode;
  if (c.hasAttribute('contentEditable')) {c.removeAttribute('contentEditable');}
  if (c.hasAttribute('style')) {c.removeAttribute('style');}

  if (c.nodeName.toLowerCase()=='script') {element_del(c);}
 }

 alert(new XMLSerializer().serializeToString(f));
 return f;
}


function element_del(element_id)
{
 if (document.getElementById(element_id))
 {
  document.getElementById(element_id).parentNode.removeChild(document.getElementById(element_id));
 }
 else if (element_id)
 {
  element_id.parentNode.removeChild(element_id);
 }
 else
 {
  alert('Error: the object or element \'' + element_id + '\' was not found and therefore could not be deleted.');
 }
}

Google Caja Дезинфицирующее средство HTML можно сделать "готовым к работе в сети", встроив его в веб-работник. Любые глобальные переменные, введенные дезинфицирующим средством, будут содержаться внутри рабочего, плюс обработка происходит в его собственном потоке.

Для браузеров, которые не поддерживают веб-воркеров, мы можем использовать iframe как отдельную среду для работы дезинфицирующего средства. У Тимоти Чиена есть полифил, который делает именно это, используя фреймы для имитации веб-воркеров, так что эта часть сделана за нас.

У проекта Caja есть вики-страница на как использовать Caja в качестве автономного дезинфицирующего средства на стороне клиента:

• Проверьте исходный код, затем выполните сборку, запустив ant.
• Включите html-sanitizer-minified.js или html-css-sanitizer-minified.js на свою страницу
• Позвоните в html_sanitize(...)

Рабочий сценарий должен только следовать этим инструкциям:

importScripts('html-css-sanitizer-minified.js'); // or 'html-sanitizer-minified.js'

var urlTransformer, nameIdClassTransformer;

// customize if you need to filter URLs and/or ids/names/classes
urlTransformer = nameIdClassTransformer = function(s) { return s; };

// when we receive some HTML
self.onmessage = function(event) {
    // sanitize, then send the result back
    postMessage(html_sanitize(event.data, urlTransformer, nameIdClassTransformer));
};

(Для работы библиотеки simworker требуется немного больше кода, но это не важно для данного обсуждения.)

Демо: https://dl.dropbox.com/u/291406/html-sanitize/demo.html

Теперь, когда все основные браузеры поддерживают изолированные фреймы iframe, существует гораздо более простой способ защиты считать. Я был бы рад, если бы этот ответ мог быть просмотрен людьми, более знакомыми с такого рода проблемами безопасности.

ПРИМЕЧАНИЕ. Этот метод определенно не будет работать в IE 9 и более ранних версиях. См. этот стол для версий браузеров, поддерживающих песочницу. (Примечание: таблица, похоже, говорит, что это не будет работать в Opera Mini, но я только что попробовал, и это сработало.)

Идея состоит в том, чтобы создать скрытый iframe с отключенным JavaScript, вставить в него ненадежный HTML и позволить ему проанализировать его. Затем вы можете пройтись по дереву DOM и скопировать теги и атрибуты, которые считаются безопасными.

Показанные здесь белые списки являются лишь примерами. Что лучше всего добавить в белый список, будет зависеть от приложения. Если вам нужна более сложная политика, чем просто белые списки тегов и атрибутов, это можно сделать с помощью этого метода, но не с помощью этого примера кода.

var tagWhitelist_ = {
  'A': true,
  'B': true,
  'BODY': true,
  'BR': true,
  'DIV': true,
  'EM': true,
  'HR': true,
  'I': true,
  'IMG': true,
  'P': true,
  'SPAN': true,
  'STRONG': true
};

var attributeWhitelist_ = {
  'href': true,
  'src': true
};

function sanitizeHtml(input) {
  var iframe = document.createElement('iframe');
  if (iframe['sandbox'] === undefined) {
    alert('Your browser does not support sandboxed iframes. Please upgrade to a modern browser.');
    return '';
  }
  iframe['sandbox'] = 'allow-same-origin';
  iframe.style.display = 'none';
  document.body.appendChild(iframe); // necessary so the iframe contains a document
  iframe.contentDocument.body.innerHTML = input;

  function makeSanitizedCopy(node) {
    if (node.nodeType == Node.TEXT_NODE) {
      var newNode = node.cloneNode(true);
    } else if (node.nodeType == Node.ELEMENT_NODE && tagWhitelist_[node.tagName]) {
      newNode = iframe.contentDocument.createElement(node.tagName);
      for (var i = 0; i < node.attributes.length; i++) {
        var attr = node.attributes[i];
        if (attributeWhitelist_[attr.name]) {
          newNode.setAttribute(attr.name, attr.value);
        }
      }
      for (i = 0; i < node.childNodes.length; i++) {
        var subCopy = makeSanitizedCopy(node.childNodes[i]);
        newNode.appendChild(subCopy, false);
      }
    } else {
      newNode = document.createDocumentFragment();
    }
    return newNode;
  };

  var resultElement = makeSanitizedCopy(iframe.contentDocument.body);
  document.body.removeChild(iframe);
  return resultElement.innerHTML;
};

Вы можете попробовать здесь.

Обратите внимание, что в этом примере я запрещаю атрибуты стиля и теги. Если вы позволите им, вы, вероятно, захотите проанализировать CSS и убедиться, что он безопасен для ваших целей.

Я тестировал это в нескольких современных браузерах (Chrome 40, Firefox 36 Beta, IE 11, Chrome для Android) и в одном старом (IE 8), чтобы убедиться, что он вышел из строя перед выполнением каких-либо скриптов. Мне было бы интересно узнать, есть ли какие-либо браузеры, у которых есть проблемы с этим, или какие-либо крайние случаи, которые я упускаю.

Предложенная выше библиотека Google Caja была слишком сложной для настройки и включения в мой проект веб-приложения (то есть, работающего в браузере). Вместо этого, поскольку мы уже используем компонент CKEditor, я прибег к использованию встроенной функции очистки HTML и внесения в белый список, которую гораздо проще настроить. Итак, вы можете загрузить экземпляр CKEditor в скрытый iframe и сделать что-то вроде:

CKEDITOR.instances['myCKEInstance'].dataProcessor.toHtml(myHTMLstring)

Конечно, если вы не используете CKEditor в своем проекте, это может быть немного излишним, поскольку размер самого компонента составляет около половины мегабайта (минимизирован), но если у вас есть исходники, возможно, вы можете изолировать код, выполняющий белый список (CKEDITOR.htmlParser?) и сделать его намного короче.

http://docs.ckeditor.com/#!/api

http://docs.ckeditor.com/#!/api/CKEDITOR.htmlDataProcessor

Итак, это 2016 год, и я думаю, что многие из нас сейчас используют модули npm в нашем коде. sanitize-html кажется ведущим параметром в npm, хотя есть другие.

Другие ответы на этот вопрос дают отличный вклад в то, как свернуть свой собственный, но это достаточно сложная проблема, и хорошо протестированные решения сообщества, вероятно, являются лучшим ответом.

Запустите это в командной строке для установки: npm install --save sanitize-html

ES5: var sanitizeHtml = require('sanitize-html'); // ... var sanitized = sanitizeHtml(htmlInput);

ES6: import sanitizeHtml from 'sanitize-html'; // ... let sanitized = sanitizeHtml(htmlInput);

[Отказ от ответственности: я один из авторов]

Мы написали для этого библиотеку с открытым исходным кодом «только для Интернета» (т.е. «требуется браузер»), https://github.com/jitbit/HtmlSanitizer, которая удаляет все tags/attributes/styles, кроме «белых».

Использование:

var input = HtmlSanitizer.SanitizeHtml("<script> Alert('xss!'); </scr"+"ipt>");

P.S. Работает намного быстрее, чем решение «на чистом JavaScript», поскольку оно использует браузер для анализа и управления DOM. Если вас интересует "чистое JS" решение, попробуйте https://github.com/punkave/sanitize-html (не аффилированный)

Вместо использования регулярного выражения я подумал о способе использования нативных материалов DOM. Таким образом, вы можете преобразовать HTML в документ, получить этот HTML и легко получить все определенные элементы, а также элементы и атрибуты белого списка для удаления. При этом используется список атрибутов либо в виде массива простых строк разрешенных атрибутов, либо он может использовать регулярное выражение для проверки их значений и разрешать только определенные теги.

const sanitize = (html, tags = undefined, attributes = undefined) => {
    var attributes = attributes || [
      { attribute: "src", tags: "*", regex: /^(?:https|http|//):/ },
      { attribute: "href", tags: "*", regex: /^(?!javascript:).+/ },
      { attribute: "width", tags: "*", regex: /^[0-9]+$/ },
      { attribute: "height", tags: "*", regex: /^[0-9]+$/ },
      { attribute: "id", tags: "*", regex: /^[a-zA-Z]+$/ },
      { attribute: "class", tags: "*", regex: /^[a-zA-Z ]+$/ },
      { attribute: "value", tags: ["INPUT", "TEXTAREA"], regex: /^.+$/ },
      { attribute: "checked", tags: ["INPUT"], regex: /^(?:true|false)+$/ },
      {
        attribute: "placeholder",
        tags: ["INPUT", "TEXTAREA"],
        regex: /^.+$/,
      },
      {
        attribute: "alt",
        tags: ["IMG", "AREA", "INPUT"],
        //"^" and "$" match beggining and end
        regex: /^[0-9a-zA-Z]+$/,
      },
      { attribute: "autofocus", tags: ["INPUT"], regex: /^(?:true|false)+$/ },
      { attribute: "for", tags: ["LABEL", "OUTPUT"], regex: /^[a-zA-Z0-9]+$/ },
    ]
    var tags = tags || [
      "I",
      "P",
      "B",
      "BODY",
      "HTML",
      "DEL",
      "INS",
      "STRONG",
      "SMALL",
      "A",
      "IMG",
      "CITE",
      "FIGCAPTION",
      "ASIDE",
      "ARTICLE",
      "SUMMARY",
      "DETAILS",
      "NAV",
      "TD",
      "TH",
      "TABLE",
      "THEAD",
      "TBODY",
      "NAV",
      "SPAN",
      "BR",
      "CODE",
      "PRE",
      "BLOCKQUOTE",
      "EM",
      "HR",
      "H1",
      "H2",
      "H3",
      "H4",
      "H5",
      "H6",
      "DIV",
      "MAIN",
      "HEADER",
      "FOOTER",
      "SELECT",
      "COL",
      "AREA",
      "ADDRESS",
      "ABBR",
      "BDI",
      "BDO",
    ]

    attributes = attributes.map((el) => {
      if (typeof el === "string") {
        return { attribute: el, tags: "*", regex: /^.+$/ }
      }
      let output = el
      if (!el.hasOwnProperty("tags")) {
        output.tags = "*"
      }
      if (!el.hasOwnProperty("regex")) {
        output.regex = /^.+$/
      }
      return output
    })
    var el = new DOMParser().parseFromString(html, "text/html")
    var elements = el.querySelectorAll("*")
    for (let i = 0; i < elements.length; i++) {
      const current = elements[i]
      let attr_list = get_attributes(current)
      for (let j = 0; j < attr_list.length; j++) {
        const attribute = attr_list[j]
        if (!attribute_matches(current, attribute)) {
          current.removeAttribute(attr_list[j])
        }
      }
      if (!tags.includes(current.tagName)) {
        current.remove()
      }
    }
    return el.documentElement.innerHTML
    function attribute_matches(element, attribute) {
      let output = attributes.filter((attr) => {
        let returnval =
          attr.attribute === attribute &&
          (attr.tags === "*" || attr.tags.includes(element.tagName)) &&
          attr.regex.test(element.getAttribute(attribute))
        return returnval
      })

      return output.length > 0
    }
    function get_attributes(element) {
      for (
        var i = 0, atts = element.attributes, n = atts.length, arr = [];
        i < n;
        i++
      ) {
        arr.push(atts[i].nodeName)
      }
      return arr
    }
  }

* {
  font-family: sans-serif;
}
textarea {
  width: 49%;
  height: 300px;
  padding: 10px;
  box-sizing: border-box;
  resize: none;
}

<h1>Sanitize HTML client side</h1>
<textarea id='input' placeholder = "Unsanitized HTML">
&lt;!-- This removes both the src and onerror attributes because src is not a valid url. --&gt;
&lt;img src=&quot;error&quot; onerror=&quot;alert('XSS')&quot;&gt;
&lt;div id=&quot;something_harmless&quot; onload=&quot;alert('More XSS')&quot;&gt;
   &lt;b&gt;Bold text!&lt;/b&gt; and &lt;em&gt;Italic text!&lt;/em&gt;, some more text. &lt;del&gt;Deleted text!&lt;/del&gt;
&lt;/div&gt;
 &lt;script&gt;
    alert(&quot;This would be XSS&quot;);
  &lt;/script&gt;
</textarea>
<textarea id='output' placeholder = "Sanitized HTML will appear here" readonly></textarea>
<script>
  document.querySelector("#input").onkeyup = () => {
    document.querySelector("#output").value = sanitize(document.querySelector("#input").value);
  }
</script>