代码之家 › 专栏 › 技术社区 › Eric Rohlfs

如何允许svg元素使用新的Sanitizeapi

sanitizerapi htmlsanitizerapi google-chrome html javascript

Eric Rohlfs · 技术社区 · 2 年前

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

使用html消毒器api,它删除了“svg”标记,即使我将其添加到允许的列表中。如何允许“svg”标记?

目前使用铬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})

消毒液正在去除svg标签和里面的所有东西。 const hasSvg=cfg.allowElements.includes('svg');//正在返回true