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.
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!
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:This plugin decides which HTML element to read text from by evaluating
options.textSrcSelectoras 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 ofoptions.textSrcSelectoris a string like"<img src=x onerror=alert(1)>".The values inoptionscannot 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).findinstead of$.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:
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.