在我们的企业软件中，我们允许客户提供自己的 HTML 来自定义应用程序的“联系”和“法律”页面。这是一个不错的功能，但由于我们的应用程序对实际提供 HTML 的应用程序一无所知，我想知道如何解决这样的问题。我已经阅读了一些博客文章、SO 帖子并观看了一些视频，但这些仅解释了 HTML 注入的危险或如何使用createElement或innerHTML其他直接方法进行操作。
我正在寻找最安全的方法来显示我无法直接控制的 HTML。任何文章或图书馆将不胜感激。
问问题
410 次
2 回答
1
您应该清理用户输入的 HTML 代码。
一种方法是定义一个白名单：定义一个标签列表（对于每个标签，您还可以定义一个允许的属性列表），这些标签允许在输出 HTML 中。未明确允许的所有其他标签都将被清理删除。
那里已经有很多可用的白名单。例如，您可以将其用于TinyMCE HTML 编辑器（参见此处）：
<?xml version="1.0" encoding="UTF-8" ?>
<!--
TinyMCE
-->
<anti-samy-rules xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="antisamy.xsd">
<directives>
<directive name="omitXmlDeclaration" value="true" />
<directive name="omitDoctypeDeclaration" value="false" />
<directive name="maxInputSize" value="100000" />
<directive name="embedStyleSheets" value="false" />
<directive name="useXHTML" value="true" />
<directive name="formatOutput" value="true" />
</directives>
<common-regexps>
<!--
From W3C:
This attribute assigns a class name or set of class names to an
element. Any number of elements may be assigned the same class
name or names. Multiple class names must be separated by white
space characters.
-->
<regexp name="htmlTitle" value="[a-zA-Z0-9\s\-_',:\[\]!\./\\\(\)&]*" />
<!-- force non-empty with a '+' at the end instead of '*'
-->
<regexp name="onsiteURL" value="([\p{L}\p{N}\p{Zs}/\.\?=&\-~])+" />
<!-- ([\w\\/\.\?=&;\#-~]+|\#(\w)+)
-->
<!-- ([\p{L}/ 0-9&\#-.?=])*
-->
<regexp name="offsiteURL" value="(\s)*((ht|f)tp(s?)://|mailto:)[A-Za-z0-9]+[~a-zA-Z0-9-_\.@\#\$%&;:,\?=/\+!\(\)]*(\s)*" />
</common-regexps>
<!--
Tag.name = a, b, div, body, etc.
Tag.action = filter: remove tags, but keep content, validate: keep content as long as it passes rules, remove: remove tag and contents
Attribute.name = id, class, href, align, width, etc.
Attribute.onInvalid = what to do when the attribute is invalid, e.g., remove the tag (removeTag), remove the attribute (removeAttribute), filter the tag (filterTag)
Attribute.description = What rules in English you want to tell the users they can have for this attribute. Include helpful things so they'll be able to tune their HTML
-->
<!--
Some attributes are common to all (or most) HTML tags. There aren't many that qualify for this. You have to make sure there's no
collisions between any of these attribute names with attribute names of other tags that are for different purposes.
-->
<common-attributes>
<attribute name="lang"
description="The 'lang' attribute tells the browser what language the element's attribute values and content are written in">
<regexp-list>
<regexp value="[a-zA-Z]{2,20}" />
</regexp-list>
</attribute>
<attribute name="title"
description="The 'title' attribute provides text that shows up in a 'tooltip' when a user hovers their mouse over the element">
<regexp-list>
<regexp name="htmlTitle" />
</regexp-list>
</attribute>
<attribute name="href" onInvalid="filterTag">
<regexp-list>
<regexp name="onsiteURL" />
<regexp name="offsiteURL" />
<!--
-->
</regexp-list>
</attribute>
<attribute name="align"
description="The 'align' attribute of an HTML element is a direction word, like 'left', 'right' or 'center'">
<literal-list>
<literal value="center" />
<literal value="left" />
<literal value="right" />
<literal value="justify" />
<literal value="char" />
</literal-list>
</attribute>
<attribute name="style"
description="The 'style' attribute provides the ability for users to change many attributes of the tag's contents using a strict syntax" />
</common-attributes>
<!--
This requires normal updates as browsers continue to diverge from the W3C and each other. As long as the browser wars continue
this is going to continue. I'm not sure war is the right word for what's going on. Doesn't somebody have to win a war after
a while?
-->
<global-tag-attributes>
<attribute name="title" />
<attribute name="lang" />
<attribute name="style" />
</global-tag-attributes>
<tags-to-encode>
<tag>g</tag>
<tag>grin</tag>
</tags-to-encode>
<tag-rules>
<!-- Remove -->
<tag name="script" action="remove" />
<tag name="noscript" action="remove" />
<tag name="iframe" action="remove" />
<tag name="frameset" action="remove" />
<tag name="frame" action="remove" />
<tag name="noframes" action="remove" />
<tag name="head" action="remove" />
<tag name="title" action="remove" />
<tag name="base" action="remove" />
<tag name="style" action="remove" />
<tag name="link" action="remove" />
<tag name="input" action="remove" />
<tag name="textarea" action="remove" />
<!-- Truncate -->
<tag name="br" action="truncate" />
<!-- Validate -->
<tag name="p" action="validate">
<attribute name="align" />
</tag>
<tag name="div" action="validate" />
<tag name="span" action="validate" />
<tag name="i" action="validate" />
<tag name="b" action="validate" />
<tag name="strong" action="validate" />
<tag name="s" action="validate" />
<tag name="strike" action="validate" />
<tag name="u" action="validate" />
<tag name="em" action="validate" />
<tag name="blockquote" action="validate" />
<tag name="tt" action="truncate" />
<tag name="a" action="validate">
<attribute name="href" onInvalid="filterTag" />
<attribute name="nohref">
<literal-list>
<literal value="nohref" />
<literal value="" />
</literal-list>
</attribute>
<attribute name="rel">
<literal-list>
<literal value="nofollow" />
</literal-list>
</attribute>
</tag>
<!-- List tags
-->
<tag name="ul" action="validate" />
<tag name="ol" action="validate" />
<tag name="li" action="validate" />
<tag name="dl" action="validate" />
<tag name="dt" action="validate" />
<tag name="dd" action="validate" />
</tag-rules>
<css-rules>
<property name="text-decoration" default="none"
description="">
<category-list>
<category value="visual" />
</category-list>
<literal-list>
<literal value="underline" />
<literal value="overline" />
<literal value="line-through" />
</literal-list>
</property>
</css-rules>
</anti-samy-rules>
此策略旨在清理在 HTML 编辑器中输入的 HTML，因此它可能适合您的需求。您还可以在此处找到更多政策。
如果您使用 Java，您可以通过java-html-sanitizer实现该策略，或者您也可以定义一个自定义的策略。
于 2021-02-03T10:03:37.080 回答
0
您可以使用 sanitize-html。更多信息：https ://www.npmjs.com/package/sanitize-html
于 2021-01-31T03:56:52.300 回答