Html & Css

New Browser Methods: setHTML and setHTMLUnsafe

0

Have you heard of the new methods setHTML and setHTMLUnsafe? These new methods can be powerful tools for developers. But why is one of these methods named ‘unsafe,’ and how should you use it? Let’s explore together.

What is setHTMLUnsafe?

The setHTMLUnsafe method works similarly to innerHTML but, as the name suggests, it sets HTML in an unsafe manner. This method does not perform any validation on the input, leaving it vulnerable to XSS (Cross-Site Scripting) attacks.

For example, if a user inputs a value like `<img src=”doesnotexist”>` into a text field, that value is rendered directly as HTML. Even if the image fails to load, JavaScript might still execute. Because of these risks, setHTMLUnsafe should be used with caution.

Why is setHTMLUnsafe needed?

The innerHTML method is useful for storing HTML fragments or inserting non-rendering HTML. However, to create declarative shadow DOM, setHTMLUnsafe is necessary. Shadow DOM is a core technology of web components, encapsulating the style and structure of specific elements, making them function independently from others.

Consider the following code:

const main = document.querySelector('main');
main.setHTMLUnsafe(`
    <h2>I am in the Light DOM</h2>
    <div>
        <template shadowrootmode="open">
            <style>
                h2 { color: blue; }
            </style>
            <h2>Shadow DOM</h2>
        </template>
    </div>
`);

This code dynamically adds a shadow DOM that renders the contents of the `template`. This allows the style and structure to operate independently.

A safer alternative: setHTML

The setHTML method is similar to setHTMLUnsafe in setting HTML but is designed to be used safely. This method removes markup that could execute scripts, preventing XSS attacks.

For instance, using the following code, the `template` element is not converted into a shadow DOM:

const main = document.querySelector('main');
main.setHTML(`
    <h2>I am in the Light DOM</h2>
    <div>
        <template shadowrootmode="open">
            <style>
                h2 { color: blue; }
            </style>
            <h2>Shadow DOM</h2>
        </template>
    </div>
`);

A method to retrieve HTML: getHTML

Complementing setHTML and setHTMLUnsafe is the getHTML method, which not only sets HTML but also retrieves it. By default, markup inside shadow DOM is not returned, but this can be controlled with an option.

For example, you can use it as follows:

const main = document.querySelector('main');
const html = main.getHTML({ serializableShadowRoots: true });

With this option, you can serialize the shadow DOM tree.

Conclusion

SetHTMLUnsafe is a very useful tool for dynamically adding declarative shadow DOM. However, as its name implies, it sets HTML in an unsafe manner, so it should be used carefully. On the other hand, setHTML allows you to set HTML safely, preventing XSS attacks.

Understanding and properly using new browser methods is crucial for web developers. Doing so allows you to develop safer and more efficient web applications.

Reference: fullystacked, “New alternatives to innerHTML”

Leave a Reply