写给研发同学的富文本安全过滤方案

作者：唐银@涂鸦智能安全实验室

一、前言

对于用户编辑文本的功能点，很多时候，业务上需要允许用户输入自定义的样式，比较简单直接的方案就是使用富文本：支持用户在前端自定义的html传入，最终同样以html的形式展现。不同的业务可能有各种各样不同的具体实现形式，但殊途同归，最终都可以抽象成“输入->持久化->输出”来表述。

如果整个过程不进行任何处理，就会产生XSS漏洞。然而常见的XSS防护方案中的编码转义，完全不适用于这种场景。那么剩下的方案就只有把不安全的内容过滤掉了。

二、安全问题

最常见的业务流程：

通常，安全人员在测试上面的流程时，会在前端提交html富文本给后端之前，对Post请求进行拦截，然后在内容中插入类似下面的代码，来证明漏洞存在：

<img src=1 onerror="alert(123)">
<script>alert(123);</script>

如果应用后端没有进行过滤，查看文章时，页面会执行插入的js代码，弹窗。

当安全人员将这样的PoC提交给开发时，如果开发是一个小白，往往第一反应是用黑名单的方式过滤掉onerror事件、script标签。

然而有经验的开发同学都知道，黑名单不管如何更新维护，往往都是白白浪费精力，最终都难以逃脱被绕过的下场。最有效的方案是使用白名单过滤。

以下链接中的内容包含了一些常见的XSS攻击方式及绕过方法，不在此处展开讨论，感兴趣的可以自行了解一下。
https://html5sec.org/
https://cheatsheetseries.owasp.org/cheatsheets/XSS_Filter_Evasion_Cheat_Sheet.html

三、过滤方案及实现

对于上面的业务流程，过滤可以在两个环节实现。一个是服务端在接收到前端传入的数据后，对数据进行过滤处理，另外一个是数据返回给前端，前端将数据渲染到页面呈现之前。

服务端过滤（Java实现）

jsoup

jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM、CSS 以及类似于 JQuery 的操作方法来取出和操作数据。基于MIT协议发布，可放心用于商业项目。

jsoup内置了一些白名单的标签属性list，同时支持用户自定义，或者在此基础上根据需求灵活扩展。

先看一个简单的Demo。

maven依赖：

<dependency>
            <!-- jsoup HTML parser library @ https://jsoup.org/ -->
            <groupId>org.jsoup</groupId>
            <artifactId>jsoup</artifactId>
            <version>1.14.3</version>
</dependency>

jsoup Demo:

package cc.stayfoolish.richtext.test;

import org.jsoup.Jsoup;
import org.jsoup.safety.Safelist;

public class JsoupFilterDemo {
    public static void main(String[] args) {
        String payload = "aaa<script>alert(1)</script>bbb<img src=\"http://stayfoolish.cc/a.jpg\" class=\"s\" onerror=\"alert(1)\"><a href=\"http://stayfoolish.cc/test\">sss</a>";
        Safelist safelist = Safelist.basicWithImages().addAttributes(":all", "class");
        String res = Jsoup.clean(payload, safelist);
        System.out.println(res);
    }
}

注：很多文章里给的代码用的是Whitelist类，目前该类已经Deprecated，未来可能会被弃用。建议直接使用Safelist类。

打印结果：

aaabbb
<img src="http://stayfoolish.cc/a.jpg" class="s"><a href="http://stayfoolish.cc/test" rel="nofollow">sss</a>

可以看到，在结果中插入的恶意代码成功被过滤掉了。

我们进入Safelist类里看一下jsoup提供的几个主要的基础白名单，

    public static Safelist basic() {
        return new Safelist()
                .addTags("a", "b", "blockquote", "br", "cite", "code", "dd", "dl", "dt", "em", "i", "li", "ol", "p", "pre", "q", "small", "span", "strike", "strong", "sub", "sup", "u", "ul")
                .addAttributes("a", "href")
                .addAttributes("blockquote", "cite")
                .addAttributes("q", "cite")

                .addProtocols("a", "href", "ftp", "http", "https", "mailto")
                .addProtocols("blockquote", "cite", "http", "https")
                .addProtocols("cite", "cite", "http", "https")

                .addEnforcedAttribute("a", "rel", "nofollow");
    }

addTags(String… tags)方法中的参数内容，表示html标签（元素）的白名单。

addAttributes(String tag, String… attributes)，表示指定的标签允许哪些属性。

addProtocols(String tag, String attribute, String… protocols)，表示指定的标签里的指定属性允许使用哪些协议。

addEnforcedAttribute(String tag, String attribute, String value)，表示指定的标签，不论有没有对应的属性和属性值，都强制加上。

再来看我们Demo中用到的basicWithImages()方法。在basic()的基础上又增加了img标签和一些可能用到的属性。

    public static Safelist basicWithImages() {
        return basic()
                .addTags("img")
                .addAttributes("img", "align", "alt", "height", "src", "title", "width")
                .addProtocols("img", "src", "http", "https");
    }

如果以上白名单还不够用怎么办？jsoup还提供了relaxed()方法，扩大了白名单范围，基本可以满足常见需求。

    public static Safelist relaxed() {
        return new Safelist()
                .addTags( "a", "b", "blockquote", "br", "caption", "cite", "code", "col", "colgroup", "dd", "div", "dl", "dt", "em", "h1", "h2", "h3", "h4", "h5", "h6","i", "img", "li", "ol", "p", "pre", "q", "small", "span", "strike", "strong","sub", "sup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "u", "ul")
                .addAttributes("a", "href", "title")
                .addAttributes("blockquote", "cite")
                .addAttributes("col", "span", "width")
                .addAttributes("colgroup", "span", "width")
                .addAttributes("img", "align", "alt", "height", "src", "title", "width")
                .addAttributes("ol", "start", "type")
                .addAttributes("q", "cite")
                .addAttributes("table", "summary", "width")
                .addAttributes("td", "abbr", "axis", "colspan", "rowspan", "width")
                .addAttributes( "th", "abbr", "axis", "colspan", "rowspan", "scope","width")
                .addAttributes("ul", "type")

                .addProtocols("a", "href", "ftp", "http", "https", "mailto")
                .addProtocols("blockquote", "cite", "http", "https")
                .addProtocols("cite", "cite", "http", "https")
                .addProtocols("img", "src", "http", "https")
                .addProtocols("q", "cite", "http", "https");
    }

需要注意的是relaxed()方法没有强制给a标签添加rel=nofollow属性，后面我会在“标签属性安全使用建议”部分解释这个属性的作用，以及什么场景需要加这个属性。

在jsoup Demo中，我们在调用addAttributes(“:all”, “class”)方法时，传入的tag参数值为“:all”，表示所有标签都允许使用class属性。

如果上面的标签属性不足以满足业务场景，开发同学可以使用前面提到的方法，自行添加标签属性白名单。在决定使用哪些白名单前，请参考后面的“标签属性安全使用建议”，或者找专业的安全人员帮忙审核一下。

有些场景下，需要对某些标签的属性值进行正则过滤，比如限制a标签的href属性必须在某个域名下。遗憾的是，jsoup没有提供默认的支持，只能自己实现一个了。以下是笔者写的一个工具类，发出来供大家参考：

package cc.stayfoolish.richtext.util;

import org.apache.commons.lang3.StringUtils;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.safety.Safelist;
import org.jsoup.select.Elements;
import java.util.HashMap;
import java.util.Map;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

/**
 * TODO
 *
 * @author tangyin
 */
public class RichTextFilterUtil {
    public static String cleanHTML(String content){

        Safelist safelist = Safelist.basicWithImages().addAttributes(":all", "class");
        String res = Jsoup.clean(content, safelist);

        return res;
    }

    /**
     *
     * @param content 过滤的内容
     * @param elementRegexMap key：例如参数值"a.href"，表示a标签的href属性，value：正则表达式字符串
     * @return
     */
    public static String cleanHTMLandFilterUrl(String content, Map<String, String> elementRegexMap){

        String cleanedHtml = RichTextFilterUtil.cleanHTML(content);
        Document doc = Jsoup.parseBodyFragment(cleanedHtml);

        for(Map.Entry<String, String> entry: elementRegexMap.entrySet()){

            String[] key = StringUtils.split(entry.getKey(),".");
            String tag = key[0];
            String attribute = key[1];

            String regex = entry.getValue();
            Pattern pattern = Pattern.compile(regex);

            Elements elements = doc.select(tag + "[" + attribute + "]");

            for(Element element : elements){
                Matcher matcher = pattern.matcher(element.attr(attribute));
                if(!matcher.find()){
                    //如果没有匹配到，属性值置空
                    element.attr(attribute,"");
                }
            }
        }

        return doc.body().html();
    }


    public static void main(String[] args) {

        Map<String, String> elementRegexMap = new HashMap<>();

        String urlRegex = "^(http|https)://([\\w-@:]+\\.)*(baidu\\.com|stayfoolish\\.cc)(/.*)?$";
        elementRegexMap.put("img.src", urlRegex);
        elementRegexMap.put("a.href", urlRegex);

        String dirtyContent = "<a href=\"http://www.stayfoolish.cc/\">123</a><a href=\"http://www.xxx.com/\">123</a><img src=\"http://www.baidu.com/1.jpg\"><img src=\"http://www.xxx.com/1.jpg\">";

        String result = RichTextFilterUtil.cleanHTMLandFilterUrl(dirtyContent, elementRegexMap);
        System.out.println(result);
    }
}

OWASP Java HTML Sanitizer

OWASP Java HTML Sanitizer 是OWASP（Open Web Application Security Project，开放Web应用程序安全项目）组织开源的一款HTML过滤器，为安全而生，使用起来非常灵活。

官网：https://owasp.org/www-project-java-html-sanitizer/

maven依赖：

        <dependency>
            <groupId>com.googlecode.owasp-java-html-sanitizer</groupId>
            <artifactId>owasp-java-html-sanitizer</artifactId>
            <version>20211018.2</version>
        </dependency>

以下是笔者基于这款过滤器写的另一个工具类：

package cc.stayfoolish.richtext.util;

import org.owasp.html.HtmlPolicyBuilder;
import org.owasp.html.PolicyFactory;
import org.owasp.html.Sanitizers;

import java.util.regex.Pattern;

/**
 * TODO
 *
 * @author tangyin
 */
public class OwaspHtmlSanitizerUtil {
    public static String sanitizeByAllDefaultPolicy(String htmlInput){
        PolicyFactory policy = Sanitizers.FORMATTING.and(Sanitizers.LINKS).and(Sanitizers.BLOCKS).and(Sanitizers.IMAGES).and(Sanitizers.STYLES).and(Sanitizers.TABLES);

        return policy.sanitize(htmlInput);
    }

    private static final Pattern whiteUrl = Pattern.compile("^(http|https)://([\\w-@:]+\\.)*(stayfoolish\\.cc|baidu\\.com)(/.*)?$");

    public static String sanitizeByMyPolicy(String htmlInput){

        String[] safeAttributes = {"align", "alink", "alt", "bgcolor", "border", "cellpadding", "cellspacing", "class", "color", "cols", "colspan", "coords", "dir", "face", "height", "hspace", "ismap", "lang", "marginheight", "marginwidth", "multiple", "nohref", "noresize", "noshade", "nowrap", "ref", "rel", "rev", "rows", "rowspan", "scrolling", "shape", "span", "summary", "tabindex", "title", "usemap", "valign", "value", "vlink", "vspace", "width"};
        String[] allowTags = {"b", "i", "font", "s", "u", "o", "sup", "sub", "ins", "del", "strong", "strike", "tt", "code", "big", "small", "br", "span", "em", "p", "div", "h1", "h2", "h3", "h4", "h5", "h6", "ul", "ol", "li", "blockquote", "a", "img"};

        PolicyFactory policy = new HtmlPolicyBuilder().allowElements(allowTags).allowAttributes(safeAttributes).globally()
                .allowUrlProtocols("http","https").allowAttributes("src").onElements("img")
                .allowAttributes("href").matching(whiteUrl).onElements("a").requireRelNofollowOnLinks().toFactory();

        return policy.sanitize(htmlInput);
    }

    public static void main(String[] args) {
        String payload = "aaa<script>alert(1)</script>bbb<img src=\"123\" class=\"s\" href=\"http://www.stayfoolish.cc/test\"><a href=\"http://www.stayfoolish.cc/test\">sss</a>";
        String safeHtml1 = sanitizeByMyPolicy(payload);
        System.out.println(safeHtml1);
        String safeHtml2 = sanitizeByAllDefaultPolicy(payload);
        System.out.println(safeHtml2);
    }
}

和jsoup一样，其本身内置了很多白名单标签属性，可以通过and方法追加允许的标签属性策略。感兴趣的读者可以跟进代码里看一下这些自带的策略，这里不再赘述。

除了可以使用默认的策略，也支持灵活的自定义策略。相较于jsoup，自带了正则匹配内容的方法。

简单解释下上面的代码中自定义策略的部分。

allowElements(allowTags)，表示允许指定的所有标签；

allowAttributes(safeAttributes)，表示允许的属性，后面接的globally()方法表示全局，也就是对所有标签生效；

allowUrlProtocols(“http”,”https”).allowAttributes(“src”).onElements(“img”)，表示允许img标签使用src属性，并且属性值仅支持http、https协议的url；

allowAttributes(“href”).matching(whiteUrl).onElements(“a”)，表示a标签的href必须能够通过正则表达式的校验，否则该属性会被删除掉，后面接requireRelNofollowOnLinks()，表示强制增加rel=nofollow属性。

官方的例子中还有Ebay和Slashdot的过滤策略，写的比较复杂，感兴趣的读者也可以学习一下：
https://github.com/OWASP/java-html-sanitizer/tree/master/src/main/java/org/owasp/html/examples

OWASP还有一个AntiSamy项目： https://owasp.org/www-project-antisamy/ ，主要用法是使用xml配置文件配置白名单策略。源码：https://github.com/nahsra/antisamy

OWASP Java HTML Sanitizer的页面介绍里讲自己比AntiSamy快4倍，这里就不展开了。

其他服务端开发语言过滤组件

.NET：https://github.com/mganss/HtmlSanitizer
Golang：https://github.com/microcosm-cc/bluemonday
PHP：http://htmlpurifier.org/
Python：https://pypi.python.org/pypi/bleach
Django框架（Python）：https://github.com/shaowenchen/django-xss-cleaner

前端过滤

js-xss

前端将数据渲染到页面呈现之前，也可以对内容进行一次过滤。这里推荐使用js-xss模块。除了可以在页面里直接引入js使用，同时也支持node.js，当使用node.js做服务端时，也可以参照前面的方案，在数据传入时使用该模块进行过滤。

源码：https://github.com/leizongmin/js-xss
项目主页： http://jsxss.com

Demo：

<script src="dist/xss.js"></script>
<script>
options = {
    whiteList: {
    a: ["href", "title", "target","xxx"],
      },
  };  // 自定义规则

html1 = filterXSS("<a href=\"http://stayfoolish.cc\" xxx=\"ss\" sss=\"ss\">aaa</a>", options);
console.log(html1);

html2 = filterXSS("<a href=\"http://stayfoolish.cc\" xxx=\"ss\" sss=\"ss\">aaa</a>");
console.log(html2)
</script>

执行结果：

支持通过wihteList字段自定义规则，如果未指定规则，将会使用默认规则。

默认的白名单在getDefaultWhiteList函数中。

function getDefaultWhiteList() {
  return {
    a: ["target", "href", "title"],
    abbr: ["title"],
    address: [],
    area: ["shape", "coords", "href", "alt"],
    article: [],
    aside: [],
    audio: [
      "autoplay",
      "controls",
      "crossorigin",
      "loop",
      "muted",
      "preload",
      "src",
    ],
    b: [],
    bdi: ["dir"],
    bdo: ["dir"],
    big: [],
    blockquote: ["cite"],
    br: [],
    caption: [],
    center: [],
    cite: [],
    code: [],
    col: ["align", "valign", "span", "width"],
    colgroup: ["align", "valign", "span", "width"],
    dd: [],
    del: ["datetime"],
    details: ["open"],
    div: [],
    dl: [],
    dt: [],
    em: [],
    figcaption: [],
    figure: [],
    font: ["color", "size", "face"],
    footer: [],
    h1: [],
    h2: [],
    h3: [],
    h4: [],
    h5: [],
    h6: [],
    header: [],
    hr: [],
    i: [],
    img: ["src", "alt", "title", "width", "height"],
    ins: ["datetime"],
    li: [],
    mark: [],
    nav: [],
    ol: [],
    p: [],
    pre: [],
    s: [],
    section: [],
    small: [],
    span: [],
    sub: [],
    summary: [],
    sup: [],
    strong: [],
    strike: [],
    table: ["width", "border", "align", "valign"],
    tbody: ["align", "valign"],
    td: ["width", "rowspan", "colspan", "align", "valign"],
    tfoot: ["align", "valign"],
    th: ["width", "rowspan", "colspan", "align", "valign"],
    thead: ["align", "valign"],
    tr: ["rowspan", "align", "valign"],
    tt: [],
    u: [],
    ul: [],
    video: [
      "autoplay",
      "controls",
      "crossorigin",
      "loop",
      "muted",
      "playsinline",
      "poster",
      "preload",
      "src",
      "height",
      "width",
    ],
  };
}

node.js安装：

npm install xss

使用方法：

var xss = require('xss');
var options =  {
    whiteList: {
    a: ["href", "title", "target","xxx"],
      },
  };
var html = xss('<a href=\"http://stayfoolish.cc\" xxx=\"ss\" sss=\"ss\">aaa</a>', options);
console.log(html);

执行结果：

<a href="http://stayfoolish.cc" xxx="ss">aaa</a>

源文件xss.js中safeAttrValue(tag, name, value, cssFilter)函数中对标签属性进行了过滤。项目文档里写了常见的用法，代码也写的比较清晰，有需要的可以直接查阅文档或代码。

四、标签属性安全使用建议

1、href、src属性需要校验协议
如果未校验，攻击者可以使用javascript:伪协议插入执行恶意的js代码。

2、什么情况a标签要加rel=”nofollow”属性？

这个属性的意思是告诉搜索引擎不要追踪此链接。如果A网页上有一个链接指向B网页，但A网页给这个链接加上了rel=”nofollow” 标注，那么搜索引擎不会把A网页计算入B网页的反向链接。搜索引擎看到这个属性就会取消链接的投票权重。

简单来讲，有些搞SEO的人，会在各大网站插入很多带有超链接的垃圾信息，如果强制加了rel=“nofollow”属性，搜索引擎爬到了，也不会给对方增加权重。这样搞恶意SEO的人，就没兴趣在你的网站里插垃圾信息了。

所以要不要加这个属性，取决于你的业务是否需要防止上述情形。

3、哪些属性被认为是安全的？

align, alink, alt, bgcolor, border, cellpadding, cellspacing, class, color, cols, colspan, coords, dir, face, height, hspace, ismap, lang, marginheight, marginwidth, multiple, nohref, noresize, noshade, nowrap, ref, rel, rev, rows, rowspan, scrolling, shape, span, summary, tabindex, title, usemap, valign, value, vlink, vspace, width.

以上是OWASP整理的安全属性，可以放心使用。参考：
https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html

4、iframe标签安全使用建议

建议不要使用，如果一定要用，可以通过下面几个方式降低风险：