chtzvt / codeql-javascript-unsafe-jquery-plugin

Hey there 🏖️

My name is Charlton Trezevant. I'm a software developer and application security consultant. I have widely varied interests in all things, but especially computer science, music, visual arts, and nature.

You can learn more about my technical and creative works in my portfolio, or by exploring my repositories and blog. I can be contacted via email or one of these ways.

Recently, I've been:

• Building a B2B SaaS Hiring Platform to support Tampa Devs, the educational nonprofit I co-founded,
• Contributing SARIF support to Legitify,
• Contributing SARIF support to PortSwigger's Dastardly Action,
• Hacking on a toy language to resurrect my old BBS,
• Running a lot of GitHub Actions and GitHub Advanced Security trainings.

Keep an eye on my blog for continuous updates on the latest and greatest.

codeql-javascript-unsafe-jquery-plugin's Issues

Step 3 - Your first query

Step 3: Finding calls to the jQuery $ function

You will now run a simple CodeQL query, to understand its basic concepts and get familiar with your IDE.

⌨️ Activity: Run a CodeQL query

1. Edit the file calls-to-dollar.ql with the following contents:

   import javascript
   
   from CallExpr dollarCall
   where dollarCall.getCalleeName() = "$"
   select dollarCall

   Don't copy / paste this code, but instead type it slowly. You will see the CodeQL auto-complete suggestions in your IDE as you type.

   • After typing from and the first letters of CallExpr, the IDE will propose a list of available classes from the CodeQL library for JavaScript. This is a good way to discover what classes are available to represent standard patterns in the source code.
   • After typing where dollarCall. the IDE will propose a list of available predicates that you can call on the variable dollarCall.
   • Type the first letters of getCalleeName() to narrow down the list.
   • Move your cursor to a predicate name in the list to see its documentation. This is a good way to discover what predicates are available and what they mean.
   • A function call is called a CallExpr in the CodeQL JavaScript library.
   • We use the = operator to assert that two values are equal.

2. Run this query: Right-click on the query editor, then click CodeQL: Run Query.

3. Inspect the results appearing in the results panel. Click on the result hyperlinks to navigate to the corresponding locations in the Bootstrap code. Do you understand what this query does? You probably guessed it! This query finds all calls to the function named $.

Now it's time to submit your query. You will have 2 choices to do that, and we'll explain both of them in the comments below. Once you have chosen your method, submit your answer!

Read carefully: you will need to follow the same steps to submit your answers to later steps. You can always come back to this issue later to check the submission instructions.

Set up your IDE

Step 2: Setup your environment

We will use the CodeQL extension for Visual Studio Code. You will take advantage of IDE features like auto-complete, contextual help and jump-to-definition.

Don't worry, you'll do this setup only once, and you'll be able to use it for future CodeQL development.

Follow the instructions below.

Welcome!

Welcome to the CodeQL Unsafe JQuery course!

We created this course to help you quickly learn CodeQL, our query language and engine for code analysis. The goal is to find several cross-site scripting (XSS) vulnerabilities in the open-source software known as Bootstrap, using CodeQL and its libraries for analyzing JavaScript code. To find the real vulnerabilities, you'll need to write a sequence of queries, making them more precise at each step of the course.

More detail

jQuery is an extremely popular, but old, open source JavaScript library designed to simplify things like HTML document traversal and manipulation, event handling, animation, and Ajax. The jQuery library supports modular plugins to extend its capabilities. Bootstrap is another popular JavaScript library, which has used jQuery's plugin mechanism extensively. However, the jQuery plugins inside Bootstrap used to be implemented in an unsafe way that could make the users of Bootstrap vulnerable to cross-site scripting (XSS) attacks. This is when an attacker uses a web application to send malicious code, generally in the form of a browser side script, to a different end user.

Four such vulnerabilities in Bootstrap jQuery plugins were fixed in the pull request https://github.com/twbs/bootstrap/pull/27047, and each was assigned a CVE.

The core mistake in these plugins was the use of the omnipotent jQuery $ function to process the options that were passed to the plugin. For example, consider the following snippet from a simple jQuery plugin:

let text = $(options.textSrcSelector).text();

This plugin decides which HTML element to read text from by evaluating options.textSrcSelector as a CSS-selector, or that is the intention at least. The problem in this example is that $(options.textSrcSelector) will execute JavaScript code instead if the value of options.textSrcSelector is a string like "<img src=x onerror=alert(1)>". The values in options cannot always be trusted.

In security terminology, jQuery plugin options are a source of user input, and the argument of $ is an XSS sink.

The pull request linked above shows one approach to making such plugins safer: use a more specialized, safer function like $(document).find instead of $.

let text = $(document).find(options.textSrcSelector).text();

In this course, we will use CodeQL to analyze the source code of Bootstrap, taken from before these vulnerabilities were patched, and identify the vulnerabilities.

Step 1: Know where to get help!

Bookmark these useful documentation links:

• CodeQL Documentation Site
• Introduction to CodeQL
• Writing a basic JavaScript Code QL query

If you get stuck during this course and need some help, the best place to ask for help is on the GitHub Security Lab Slack. Request an invitation from the Security Lab Get Involved page and ask in the channel #codeql-writing. You can also visit our forum to search for possible answers.

There are also sample solutions in the course repository, but please try to solve the tasks on your own first!

Hope this is exciting! Please close this issue now, and continue to the next step.