Step 3 - Your first query

[github-learning-lab]

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.

[github-learning-lab]

Submission: Commit your query via a Pull Request

The first method to submit your query is via a Pull Request. Using a Pull request has several advantages:

• If you are following this course with a mentor, or with co-learners, you may want them to interact with your PR via review, additional commits, etc.
• Creating a PR is good practice when contributing to shared code.
• You will be able to track the execution of the query checker directly in the PR.

However this workflow is bit more involved than just directly committing to the default branch for the purposes of this course.

To submit this query via Pull Request, you can follow the following workflow:

1. First, refresh your default branch, commit your changes to a new branch, and push them:

   git checkout main
   git pull
   git checkout -b step-3
   git add .
   git commit -a -m "First Query"
   git push -u origin step-3
   

2. Then open a pull request.
3. Wait for the course to check your query. It will display a status on your pull request!
4. Once the check is completed, refresh your browser to get the next set of instructions.
5. If the status is green, merge your PR and follow these instructions.

[github-learning-lab]

Submission: Commit your query directly to the default branch

This method is simpler. You won't have to juggle between branches, rebase onto the default branch, or create Pull Requests. However, merging directly to the default branch is not a good practice when you are contributing to a shared code base, so if you choose this method, please don't take this bad habit home with you!

To submit this query via a direct commit to the default branch, you can follow this workflow:

1. Commit your updated query file to your course repo:

   git add .
   git commit -m "Any message here - why not step 3"
   git push origin main
   

2. Wait for your work to be checked, and for the results to appear as a comment below. The checks shouldn't take more than 5 minutes.

   If the checks are successful, the course will close this issue and create a comment pointing you to the next step.
   If the checks are unsuccessful, the course will comment on your latest commit with more information, so that you can fix your query and try again.

   To track the execution of the query checker, you can follow along in the Actions panel if you like.

[github-learning-lab]

Congratulations, looks like the query you introduced in c4e5620 finds the correct results!

Take a look at the instructions for the next step to continue.