устранить xss уязвимость (safeHTML)

Сейчас изучаю безопасность в сайтов, появился вопрос, как правильно распарсить HTML код что бы он был безопасным? source — элемент, в котором лежит исходный HTML, result — элемент, куда нужно вставить безопасный HTML

function safeHTML(html) {
    // ...
    return html;
}


let html = source.innerHTML.slice(4, -3).trim();
let res = getSafeHTML(html);

result.innerHTML = res;

console.log('source:', html);
console.log('result:', res);

Пример вывода и результаты тестов:

"source:" "<div onclick="console.log('#1 XSS')">\n foo\n <script>1</script>!\n <b>bar</b>\n <img src="/xxxxx" onerror="console.log('#2 XSS')"/>\n <a href="javascript:console.log('#3 XSS');">bug</a>\n <a href="/foo.html">normal</a>\n </div>"
"result:" "<div onclick="console.log('#1 XSS')">\n foo\n <script>1</script>!\n <b>bar</b>\n <img src="/xxxxx" onerror="console.log('#2 XSS')"/>\n <a href="javascript:console.log('#3 XSS');">bug</a>\n <a href="/foo.html">normal</a>\n </div>"
"#2 XSS"
"#1 XSS"
"#3 XSS"

div.onclick: null === "console.log('#1 XSS')" ✘
script: null === true ✘
img: null === "console.log('#2 XSS')" ✘
a.bug.href: null === "javascript:console.log('#3 XSS');" ✘
a.normal.href: "/foo.html" === "/foo.html" ✔