UNSAFE_VAR_ASSIGNMENT description states “Due to both security and performance concerns, this may not be set using dynamic values which have not been adequately sanitized. This can lead to security issues or fairly serious performance degradation.”
const hello = `Hello world` document.body.innerHTML = hello
const hello = `Hello world` document.body.textContent = hello
But what do you do if the assigned value contains a mix of text and HTML tags for parsing?
const hello = `<h1>Hello world</h1>` document.body.innerHTML = hello
A quick fix would be to do the following.
const hello = `<h1>Hello world</h1>` const parser = new DOMParser() const parsed = parser.parseFromString(hello, `text/html`) const tag = parsed.getElementsByTagName(`body`) document.body.innerHTML = `` document.body.appendChild(tag.firstChild)
The DOMParser() Web API is available in Firefox, Chrome and Edge. Using its
parseFromString(string, 'text/html') method, we can convert any mixed strings into an HTMLDocument and use it with other Node elements.