在客户端清理/重写 HTML

Question

我需要显示通过跨域请求加载的外部资源，并确保仅显示“安全”内容。

可以使用 Prototype 的 String#stripScripts 删除脚本块。 但诸如 onclick 或 onerror 之类的处理程序仍然存在。

是否有任何库至少可以

• 剥离脚本块、
• 杀死 DOM 处理程序、
• 删除黑名单标签（例如：embed 或 object）。

那么有没有 JavaScript 相关的链接和示例呢？

Answer 1

2016 年更新：现在有一个 Google 关闭 基于 Caja 消毒剂的包装。

它有一个更干净的 API，经过重写以考虑现代浏览器上可用的 API，并且与 Closure Compiler 更好地交互。

---

无耻插件：请参阅 caja/plugin /html-sanitizer.js 用于经过彻底审查的客户端 html 清理程序。

它已列入白名单，而不是黑名单，但白名单可根据 CajaWhitelists 进行配置

---

如果您想删除所有标签，请执行以下操作：

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

人们会告诉您可以创建一个元素，并分配 innerHTML ，然后获取 innerText 或 textContent，然后转义其中的实体。 不要那样做。 它很容易受到 XSS 注入的攻击，因为即使节点从未附加到 DOM， 也会运行 onerror 处理程序。

Answer 2

Google Caja HTML sanitizer 可以通过将其嵌入网络工作器来使其“网络就绪”一个>。 清理程序引入的任何全局变量都将包含在工作线程中，并且处理发生在它自己的线程中。

对于不支持 Web Workers 的浏览器，我们可以使用 iframe 作为消毒程序工作的单独环境。 Timothy Chien 有一个 polyfill 就是这样做的，使用 iframe 来模拟 Web Workers，所以这部分已经为我们完成了。

Caja 项目有一个 wiki 页面，介绍如何使用 Caja 作为独立的客户端清理程序：

• 检查源代码，然后通过运行 ant 进行构建，
• 包括 html-sanitizer-minified.js 或 html-css-sanitizer-minified.js< /code> 在你的页面中
• 调用 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

Answer 3

永远不要相信客户。 如果您正在编写服务器应用程序，请假设客户端始终会提交不卫生的恶意数据。 这是一条经验法则，可以让您远离麻烦。 如果可以的话，我建议在服务器代码中进行所有验证和清理，您知道（在合理的程度上）不会被摆弄。 也许您可以使用服务器端 Web 应用程序作为客户端代码的代理，该代码从第 3 方获取并在将其发送到客户端本身之前进行清理？

[编辑] 抱歉，我误解了这个问题。 不过，我坚持我的建议。 如果您在将服务器发送给他们之前先对其进行清理，那么您的用户可能会更安全。

Answer 4

现在所有主要浏览器都支持沙盒 iframe，我认为有一种更简单的方法可以保证安全。 如果更熟悉此类安全问题的人能够审查此答案，我会很高兴。

注意：此方法在 IE 9 及更早版本中肯定不起作用。 请参阅此表了解支持沙箱的浏览器版本。（注意：该表似乎说它在 Opera Mini 中不起作用，但我刚刚尝试过，它起作用了。）

这个想法是创建一个禁用 JavaScript 的隐藏 iframe，将不受信任的 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;
};

安全漏洞：评论者 @Explosion 指出 href 属性可以包含 JavaScript，例如 。 应该可以捕获它并在清理代码中将其删除，但上面的代码尚未更新来做到这一点。

您可以在此处尝试一下。

请注意，在此示例中我不允许使用样式属性和标签。 如果您允许它们，您可能需要解析 CSS 并确保它对于您的目的来说是安全的。

我已经在几种现代浏览器（Chrome 40、Firefox 36 Beta、IE 11、Chrome for Android）和一款旧浏览器（IE 8）上对此进行了测试，以确保它在执行任何脚本之前可以正常运行。 我很想知道是否有任何浏览器遇到问题，或者我忽略了任何边缘情况。

Answer 5

现在是 2016 年，我想我们中的许多人现在都在代码中使用 npm 模块。 不过 sanitize-html 似乎是 npm 上的领先选项还有其他。

这个问题的其他答案为如何推出自己的解决方案提供了很好的建议，但这是一个足够棘手的问题，经过充分测试的社区解决方案可能是最好的答案。

在命令行上运行此命令进行安装：
<代码>
npm install --save sanitize-html
ES5

：
<代码>
var sanitizeHtml = require('sanitize-html');
// ...
var sanitized = sanitizeHtml(htmlInput);
ES6

：
<代码>
从“sanitize-html”导入 sanitizeHtml；
// ...
让 sanitized = sanitizeHtml(htmlInput);

Answer 6

您无法预见某些浏览器可能会遇到的每种可能的奇怪类型的格式错误标记，以逃避黑名单，因此不要列入黑名单。 除了脚本/嵌入/对象和处理程序之外，您可能还需要删除更多的结构。

相反，尝试将 HTML 解析为层次结构中的元素和属性，然后根据尽可能最小的白名单运行所有元素和属性名称。 还要根据白名单检查您允许通过的任何 URL 属性（请记住，还有比 javascript 更危险的协议：）。

如果输入是格式良好的 XHTML，则上述第一部分会容易得多。

与 HTML 清理一样，如果您可以找到任何其他方法来避免这样做，那就这样做。 有很多很多潜在的漏洞。 如果主要的网络邮件服务在这么多年后仍然发现漏洞，是什么让您认为自己可以做得更好？

Answer 7

[免责声明：我是作者之一]

我们为此编写了一个“仅限网络”（即“需要浏览器”）的开源库，https://github.com/jitbit/HtmlSanitizer 删除除“白名单”之外的所有标签/属性/样式 。

用法：

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

PS 的工作速度比“纯 JavaScript”解决方案快得多，因为它使用浏览器来解析和操作 DOM。 如果您对“纯 JS”解决方案感兴趣，请尝试 https://github.com/punkave/ sanitize-html（不附属）

Answer 8

上面建议的 Google Caja 库太复杂，无法配置并包含在我的 Web 应用程序项目中（因此，在浏览器上运行）。 因为我们已经使用了 CKEditor 组件，所以我所采取的方法是使用它的内置 HTML 清理和白名单功能，这更容易配置。 因此，您可以在隐藏的 iframe 中加载 CKEditor 实例并执行以下操作：

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

现在，当然，如果您没有在项目中使用 CKEditor，这可能有点过大了，因为组件本身大约有半兆字节（最小化），但如果您有源代码，也许您可​​以隔离执行白名单的代码（CKEDITOR.htmlParser？）并使其更短。

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

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

Answer 9

我没有使用正则表达式，而是想到了一种使用本机 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">
<!-- This removes both the src and onerror attributes because src is not a valid url. -->
<img src="error" onerror="alert('XSS')">
<div id="something_harmless" onload="alert('More XSS')">
   <b>Bold text!</b> and <em>Italic text!</em>, some more text. <del>Deleted text!</del>
</div>
 <script>
    alert("This would be XSS");
  </script>
</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>

Answer 10

我建议把框架从你的生活中剔除，从长远来看，这会让你的事情变得更加容易。

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