AI Threat Labs

October 19, 2023

GitHub Copilot code security: XSS in React

Liran Tal

In this article, we set out to explore the security aspects of GitHub Copilot when used in a React code-base and where it autocompletes code for frontend developers in their React components JSX files.

Developers adopt GitHub Copilot

In the realm of AI's transformative influence on various sectors, software development holds a noteworthy spot. One of the emergent innovations in this sphere is GitHub Copilot, a developer tool that is bundled within the IDE, such as VS Code, powered by OpenAI's Codex.

GitHub Copilot is designed to function as your AI pair programmer. It is capable of providing coding suggestions, writing entire lines or blocks of code, and is compatible with several languages — a functionality that extends to popular front-end libraries and frameworks, such as React.

Through JavaScript code examples and an in-depth look at JSX and React-specific security practices, this article aims to inform and enable developers to evaluate and utilize these AI-augmented developer tools responsibly without compromising application security.

The danger zone: Using React’s dangerouslySetInnerHTML function

React offers an API that enables developers to set HTML directly from a React component — the dangerouslySetInnerHTML function.

The use of this function, as its name suggests, can be dangerous. It works by bypassing the security controls in React that perform output encoding.

function MyComponent() {
    return <div dangerouslySetInnerHTML={{__html: '<h1>Hello World</h1>'}} />;
}

While this presents a fast and direct way to handle HTML content, it exposes your application to the risk of cross-site scripting (XSS) attacks.

function MyComponent({userInput}) {
    return <div dangerouslySetInnerHTML={{__html: userInput}} />;
}

Does GitHub Copilot suggest secure code?

Let’s consider the following React component code that uses dangerouslySetInnerHTML:

<Row className="justify-content-between">
    <Col md="6">
        <Row className="justify-content-between align-items-center">
            <div
                dangerouslySetInnerHTML={{
                    __html: `
                        <img src=${database.authorScreenshotURL}
                             alt=${authorScreenshotDescription} />
                    `,
                }}
            />
        </Row>
    </Col>
</Row>

An attacker could exploit this cross-site scripting vulnerability by setting the value of the authorScreenshotDescription variable maliciously.

Therefore, caution must be taken when using dangerouslySetInnerHTML in your application.

Protecting from cross-site scripting in React applications

As much as tools like GitHub Copilot are revolutionizing software development, it is paramount to remember that these AI models may sometimes suggest insecure code. Having robust safety nets such as developer security tools like Snyk is essential.

Snyk, a highly-regarded name in the world of developer-first security tools, can spot potential security vulnerabilities, such as those posed by unsafe use of dangerouslySetInnerHTML that Copilot might not catch.

import DOMPurify from "dompurify";

function MyComponent({userInput}) {
    const cleanInput = DOMPurify.sanitize(userInput);
    return <div dangerouslySetInnerHTML={{__html: cleanInput}} />;
}

Closing

In conclusion, while AI suggestions can accelerate your coding process, human vigilance and robust security tools remain integral to creating secure applications. Remember to employ secure output encoding and implement safeguards against XSS vulnerabilities.