# Finding and fixing your first code vulnerability

Learn the basics of securing your code by resolving a code scanning alert in a demo repository.

As you're learning to code, it's normal to accidentally introduce vulnerabilities into your projects. If these security issues aren't addressed before you share your work, attackers can use them to manipulate your code and access sensitive data, so it's important to identify and patch them as soon as possible.

Thankfully, there are tools like code scanning that automatically find, explain, and even fix vulnerabilities in your public repositories. In this tutorial, you'll learn how to keep your work secure with code scanning.

## Setting up the demo repository

Let's get started by forking a demo project with a security vulnerability. This project builds a simple webpage, but since we won't deploy the project, there is **no security risk** in this exercise.

1. Navigate to the [`new2code/code-scanning-demo`](https://github.com/new2code/code-scanning-demo) repository.
2. In the top right of the page, click <svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-repo-forked" aria-label="repo forked icon" role="img"><path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path></svg> **Fork**.
3. In the page that appears, click **Create fork**.

## Finding vulnerabilities in your code

Now that we've set up the project, let's turn on code scanning for your fork to check for vulnerabilities in the code.

1. Back on GitHub, on the home page of your repository, click **<svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-shield" aria-label="shield" role="img"><path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg> Security and quality**.
2. In the "Code scanning alerts" row, click **Set up code scanning**.
3. In the "Tools" section, next to "CodeQL analysis", select **Set up**, then click **Default**.
4. In the pop up that appears, click **Enable CodeQL**. This will trigger a GitHub Actions workflow that scans your code for vulnerabilities.
5. To check the status of your workflow, in the navigation bar, click <svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-play" aria-label="play icon" role="img"><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path></svg> **Actions**.
6. Once the workflow is complete, in the navigation bar, click **<svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-shield" aria-label="shield" role="img"><path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg> Security and quality**.
7. To view the code scanning alert discovered by the workflow, in the side navigation, click <svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-codescan" aria-label="codescan icon" role="img"><path d="M8.47 4.97a.75.75 0 0 0 0 1.06L9.94 7.5 8.47 8.97a.75.75 0 1 0 1.06 1.06l2-2a.75.75 0 0 0 0-1.06l-2-2a.75.75 0 0 0-1.06 0ZM6.53 6.03a.75.75 0 0 0-1.06-1.06l-2 2a.75.75 0 0 0 0 1.06l2 2a.75.75 0 1 0 1.06-1.06L5.06 7.5l1.47-1.47Z"></path><path d="M12.246 13.307a7.501 7.501 0 1 1 1.06-1.06l2.474 2.473a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM1.5 7.5a6.002 6.002 0 0 0 3.608 5.504 6.002 6.002 0 0 0 6.486-1.117.748.748 0 0 1 .292-.293A6 6 0 1 0 1.5 7.5Z"></path></svg> **Code scanning**, then click **Reflected cross-site scripting**.

## Understanding a code scanning alert

Now that code scanning has identified a vulnerability in the code, let's break down the information provided in the alert.

### Location

The alert shows a small preview of a file, centered on the lines of code creating the vulnerability. In our case, the vulnerability is detected on line 8 of our `index.js` file, where we implement the user-provided input in our site.

If we take a closer look, we can see that the underlying issue occurs on line 7, when we assign `greet` to user input without checking for malicious code. To see a step-by-step view of the vulnerability in our code, in the callout below the vulnerable lines, click **Show paths**.

![Screenshot of the location of a code scanning alert. A "Show paths" button is outlined in orange.](/assets/images/help/repository/code-scanning-alert-location-learners.png)

### Description and recommendation

Below the file preview, code scanning provides a more detailed description of the vulnerability. To see the recommended fix, as well as examples of the vulnerable and fixed code, click **Show more** <svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-chevron-down" aria-label="chevron down icon" role="img"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg>.

![Screenshot of the details of a code scanning alert. A dropdown labeled "Show more" is outlined in orange.](/assets/images/help/repository/code-scanning-alert-details-learners.png)

In our case, the recommendation is to sanitize user input before using it. This means we need to check the input for malicious code, then clean it up if necessary.

> \[!TIP] If you don't fully understand the recommended fix, try [asking Copilot Chat](https://github.com/copilot) to explain it.

### Timeline

Finally, you can see the timeline of the alert at the bottom of the page. Our timeline contains the commit where the vulnerability was first detected, and will be updated automatically when we fix the vulnerability.

![Screenshot of the timeline for a code scanning alert.](/assets/images/help/repository/code-scanning-alert-timeline-learners.png)

## Fixing a vulnerability automatically

To secure our project quickly and easily, let's use GitHub Copilot Autofix for code scanning.

1. Below the alert title, in the box suggesting you "Speed up the remediation of this alert using Copilot Autofix for CodeQL", click <svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-shield-check" aria-label="shield check icon" role="img"><path d="m8.533.133 5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667l5.25-1.68a1.748 1.748 0 0 1 1.066 0Zm-.61 1.429.001.001-5.25 1.68a.251.251 0 0 0-.174.237V7c0 1.36.275 2.666 1.057 3.859.784 1.194 2.121 2.342 4.366 3.298a.196.196 0 0 0 .154 0c2.245-.957 3.582-2.103 4.366-3.297C13.225 9.666 13.5 8.358 13.5 7V3.48a.25.25 0 0 0-.174-.238l-5.25-1.68a.25.25 0 0 0-.153 0ZM11.28 6.28l-3.5 3.5a.75.75 0 0 1-1.06 0l-1.5-1.5a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l.97.97 2.97-2.97a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path></svg> **Generate fix**.
2. After Copilot generates the fix suggestion, it will describe the changes it is suggesting, render a preview of the changes, and call out any added dependencies. Take a moment to read through Copilot's work.
3. To create a pull request with the fix, click **Commit to new branch**, then click **Commit change**.
4. Once the draft pull request is created, at the bottom of the page, click **Ready for review** to make it mergeable.
5. To apply the fix, click **Merge pull request**, then click **Confirm merge**.

   Once the pull request is merged and the code scanning workflow runs again, the alert will be closed automatically, and the commit fixing the vulnerability will be added to the timeline.

> \[!NOTE] In real projects, you should always review the changes suggested by Copilot before committing them to your code.

## Next steps

Now that you've tried out code scanning on a demo repository, **enable it on your own projects** to quickly find and fix current and future vulnerabilities.

Now that you've secured the code you've written yourself, take the next step towards secure code by checking the security of your **dependencies**. See [Finding and fixing your first dependency vulnerability](/en/get-started/learning-to-code/finding-and-fixing-your-first-dependency-vulnerability).