React chars to HTML encode?

React chars to HTML encode?

I've observed that React can HTML encode specific characters to prevent XSS vulnerabilities in certain contexts. For instance, consider the following code in App.jsx:

function App() {
    const XSSProblematicChars = "><'\"()&:`";

    return (
        <>
            <h4>Displayed: {XSSProblematicChars}</h4>
            <img src={XSSProblematicChars}/>
        </>
    );
}

The corresponding HTML output would be:

<h4>Displayed: &gt;&lt;'"()&amp;:`</h4>
<img src="><'&quot;()&amp;:`">

As demonstrated, HTML encoding varies depending on the context. For instance:

1. In the h4 element, <, >, and & characters are encoded.
2. In the src attribute of the img element, " and & characters are encoded.

However, it's important to note that this encoding alone may not provide comprehensive protection against XSS attacks. To illustrate, consider the following App.jsx code. If the anchor element is clicked, the document's content can be altered using an XSS payload:

function App() {
    const XSSPayload =
        "javascript:eval(atob('ZG9jdW1lbnQuYm9keS5pbm5lckhUTUw9JzxoMSBzdHlsZT0idGV4dC1hbGlnbjogY2VudGVyOyBwb3NpdGlvbjogYWJzb2x1dGU7IHRvcDogNTAlOyBsZWZ0OiA1MCU7IHRyYW5zZm9ybTogdHJhbnNsYXRlKC01MCUsIC01MCUpOyI+ISEhIEhBQ0tFRCAhISE8L2gxPic7'))";

    return (
        <>
            <a href={XSSPayload}>Click Me to Trigger XSS</a>
        </>
    );
}

This occurs because React fails to HTML encode the : character, allowing the use of javascript: syntax to trigger XSS.

To address this issue, I aim to create a function that will HTML encode all problematic characters in user input displayed on the frontend. Are there any other characters, like :, that React might have overlooked when encoding for HTML output?