Examples of risky code patterns to look for in React-based applications (NextJS included)

reactjs_security_cheatsheet.md

Potential Vulnerabilities in Next.js Applications

XSS

1. Embedding Unsanitized Data in JavaScript

<script>
    let username = '{userInput}';
</script>

If {userInput} contains malicious JavaScript, it will execute.

2. Using eval()

eval(userInput);

If userInput contains malicious JavaScript, this could result in arbitrary code execution.

3. Using javascript: URLs

<a href={userInput}>Click me</a>

If userInput is something like javascript:alert('XSS'), an XSS attack will occur when the link is clicked.

4. Setting HTML attributes without sanitization

<div onMouseOver={userInput}>Hover over me</div>

If userInput is a JavaScript function string, it'll execute when the div is hovered over.

5. Using third-party components without scrutiny

import UntrustedComponent from 'untrusted-library';
// ... 
<UntrustedComponent data={userInput} />

Without knowing what UntrustedComponent does with data, it can be a risk.

6. Inline SVGs

<div dangerouslySetInnerHTML={{ __html: userInput }} />

If userInput is a malicious SVG with embedded JavaScript, it can trigger XSS.

7. Improper use of React's ref

<div ref={el => el.innerHTML = userInput}></div>

Direct manipulation of the DOM using refs with unsanitized user data can lead to XSS.

8. PostMessage API Misuse

window.addEventListener('message', (event) => {
    // Not verifying the origin of the message can be dangerous
    if (event.data.execute) {
        eval(event.data.execute);
    }
});

Without verifying the message's origin, malicious sites can post harmful data.

9. Server-side Rendering (SSR) Injection

// Inside getServerSideProps in Next.js
const data = userInput; // from query parameters or other sources
return { props: { data } };

If data is then injected into the DOM without sanitization in the component, it can lead to SSR-based XSS.

10. Third-party scripts

<script src={userInput}></script>

If a user can control the source of a script, they can potentially load malicious scripts.

11. Manipulating styles with user data

<div style={{ backgroundImage: `url(${userInput})` }}></div>

If userInput is a malicious URL (e.g., javascript:alert('XSS')), it can be an XSS vector.