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 var policy = new Ax.owasp.HtmlPolicyBuilder(config => { config .allowStandardUrlProtocols() .allowElements("a") .allowAttributes("href").onElements("a") .requireRelNofollowOnLinks(); });
allowImages	HtmlPolicyBuilder	Allows <img> elements from HTTP, HTTPS, and relative sources. This is equivalent to: Copy var policy = new Ax.owasp.HtmlPolicyBuilder(config => { config.allowUrlProtocols("http", "https", "cid") .allowElements("img") .allowAttributes("alt", "src").onElements("img") .allowAttributes("border", "height", "width")./matching(INTEGER)/onElements("img"); //. INTEGER is private }); ;
allowTables	HtmlPolicyBuilder	Allows HTTP, HTTPS, MAILTO, and relative links. This is equivalent to: Copy var policy = new Ax.owasp.HtmlPolicyBuilder(config => { config .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();
        config.openTagPreprocessor((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>