The Sanitizer helper

Overview

The Shopware 6 Sanitizer Helper is a wrapper around DOMPurify, which is used to sanitize HTML in order to prevent XSS attacks.

Where is it registered?

The Sanitizer Helper is registered to the Shopware Global Object and therefore can be accessed anywhere in your plugin.

const sanitizer = Shopware.Helper.SanitizerHelper;

It also is registered in the Vue prototype as seen here. This means it can also be accessed in your components like this:

const Sanitizer = this.$sanitizer;
const sanitize = this.$sanitize;

Sanitizing HTML

As mentioned before the SanitizerHelper is registered to the Shopware Global Object and therefore can be accessed like this everywhere:

Shopware.Helper.SanitizerHelper.sanitize('<img src=x onerror=alert(1)//>'); // becomes <img src="x">

And since it is bound to the Vue prototype it can be used in all Vue components like this:

this.$sanitizer.sanitize('<svg><g/onload=alert(2)//<p>'); // becomes <svg><g></g></svg>
this.$sanitize('<img src=x onerror=alert(1)//>'); // becomes <img src="x">

How to set the config

The config can be set with the setConfig and cleared with the clearConfig function, as seen below:

Shopware.Helper.SanitizerHelper.setConfig({
    USE_PROFILES: { html: true }
});

Shopware.Helper.SanitizerHelper.clearConfig()

See all of the configuration options here

How to add hooks

The aforementioned Wrapper also provides functions to add and remove hooks to DOMPurify. Learn what DOMPurify hooks are in their documentation.

Shopware.Helper.SanitizerHelper.addMiddleware('beforeSanitizeElements',  function (
        currentNode,
        hookEvent,
        config
    ) {
        // Do something with the current node and return it
        // You can also mutate hookEvent (i.e. set hookEvent.forceKeepAttr = true)
        return currentNode;
    }
);

Shopware.Helper.SanitizerHelper.removeMiddleware('beforeSanitizeElements');