HtmlPolicyBuilder is fast and easy to configure HTML Sanitizer which lets you include HTML authored by third-parties in your web application while protecting against XSS. You can read more about the underlying implementation here.

1 Creating policy

To create an html sanitizer policy, configure the HtmlPolicyBuilder using a lambda function.

Copy
<script>
    var policy = new Ax.owasp.HtmlPolicyBuilder(config => {
        config
        .allowElements("p");
    });
    var safeHTML = policy.sanitize("<p>Hello, <b>World!</b>");
    console.log(safeHTML);
</script>
<p>Hello, World!</p>

2 Configuring policy

Html sanitizer can be configured using pre-build in configurations.

Method Return Description
allowCommonInlineFormattingElements HtmlPolicyBuilder Allows common formatting elements including <b> <i>, etc
allowCommonBlockElements HtmlPolicyBuilder Allows common block elements including <p><h1>, etc.
allowStyling HtmlPolicyBuilder Allows certain safe CSS properties in style="..." attributes.
allowLinks HtmlPolicyBuilder Allows HTTP, HTTPS, MAILTO, and relative links. This is equivalent to:
Copy
allowStandardUrlProtocols()
.allowElements("a")
.allowAttributes("href").onElements("a")
.requireRelNofollowOnLinks();
;
allowImages HtmlPolicyBuilder Allows <img> elements from HTTP, HTTPS, and relative sources. This is equivalent to:
Copy
allowUrlProtocols("http", "https", "cid")
.allowElements("img")
.allowAttributes("alt", "src").onElements("img")
.allowAttributes("border", "height", "width").matching(INTEGER).onElements("img");
;
allowTables HtmlPolicyBuilder Allows HTTP, HTTPS, MAILTO, and relative links. This is equivalent to:
Copy
allowStandardUrlProtocols()
.allowElements("table", "tr", "td", "th", "colgroup", "caption", "col", "thead", "tbody", "tfoot")
.allowAttributes("summary").onElements("table")
.allowAttributes("align", "valign").onElements("table", "tr", "td", "th", "colgroup", "col", "thead", "tbody", "tfoot")
.allowTextIn("table")
;
Copy
<script>
    var policy = new Ax.owasp.HtmlPolicyBuilder(config => {
        config
        .allowCommonInlineFormattingElements()
        .allowImages()
        ;
    }
    var safeHTML = policy.sanitize("<p style='color:blue;'><b>Hello</b>, World! <img src='https://www.server.com/img.png'>");
</script>
<b>Hello</b>, World! <img src="https://www.server.com/img.png" />

3 Preprocessing

You can add a preprocessor to handle open (onOpenTagPreprocessor) and close (onCloseTagPreprocessor) elements and modify it's attributes. For example, to modify inline image url references using cid: and replace it:

Copy
<script>
    var htmlPolicy = new Ax.owasp.HtmlPolicyBuilder(config => {
    config
        .allowCommonBlockElements()
        .allowCommonInlineFormattingElements()
        .allowStyling()
        // allow ./api
        .allowUrlProtocols("")
        .allowStandardUrlProtocols()
        .allowElements("hr", "br")
        .allowElements("table", "tr", "td", "th", "colgroup", "caption", "col", "thead", "tbody", "tfoot")
        .allowAttributes("summary", "align", "valign", "border", "height", "width", "rowspan", "colspan").onElements("table", "tr", "td", "th", "colgroup", "col", "thead", "tbody", "tfoot")
        .allowTextIn("table")
        .allowImages()
        .onOpenTagPreprocessor((elementName, attrs) => {
            // ------------------------------------------------------------------
            // Find <img src='cid:ii_k6gaa7ly0'> and replace by the URL to the
            // attached image.
            // ------------------------------------------------------------------
            if (elementName.equals("img")) {
                for (var i = 0, n = attrs.size(); i < n; i += 2) {
                    if ("src".equals(attrs.get(i))) {
                        var url = attrs.get(i + 1);
                        if (url.startsWith("cid:")) {
                            // Replace url
                            attrs.set(i + 1, Ax.lang.String.format("./api/card/%s", url.substring("cid:".length)));
                        }
                    }
                }
            }
        })
    ;
    });
</script>