How to allow svg elements using the new Sanitize api

Viewed 12

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API

Using the html sanitizer api, it is removing the 'svg' tag even though I am adding it to the allowed list. How can I allow 'svg' tags?

Currently using chrome 105.

const cfg = Sanitizer.getDefaultConfiguration();
cfg.allowCustomElements = true;
cfg.allowElements.push('svg');
cfg.allowElements.push('slot');
cfg.allowElements.push('path');
const sanitizer = new Sanitizer(cfg)
const str = `<button>
        <svg viewBox="0 0 24 24">
            <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path>
        </svg>
</button>`

const container = document.createElement('div')
container.setHTML(str, {sanitizer: sanitizer})

The sanitizer is removing the svg tag and everything inside. const hasSvg = cfg.allowElements.includes('svg'); // is returning true

0 Answers
Related