Step 7 - Finding jQuery plugin options: plugins

[github-learning-lab[bot]]

Step 7: Finding the jQuery plugins

In this step we want to detect the jQuery plugin assigned to our property, so basically the right hand side of the assignment in our previous example:

$.fn.copyText = function() { ... } // this function is a jQuery plugin

But there might be some variation in how this code is written. For example, we might see intermediate assignments to local variables:

let fn = $.fn
let f = function() { ... } // this function is a jQuery plugin
fn.copyText = f

The use of intermediate variables and nested expressions are typical source code examples that require use of local data flow analysis to detect our pattern.

[github-learning-lab[bot]]

:book: Local data flow analysis

Data flow analysis helps us answer questions like: does this expression ever hold a value that originates from a particular other place in the program?

We have already encountered data flow nodes, described by the DataFlow::Node CodeQL class. They are places in the program that have a value. They are returned by useful predicates like jquery() in the library.

These nodes are separate and distinct from the AST (Abstract Syntax Tree, which represents the basic structure of the program) nodes, to allow for flexibility in how data flow is modeled.

We can visualize the data flow analysis problem as one of finding paths through a directed graph, where the nodes of the graph are data flow nodes, and the edges represent the flow of data between those elements. If a path exists, then the data flows between those two nodes.

The CodeQL JavaScript data flow library is very expressive. It has several classes that describe different places in the program that can have a value. We have seen SourceNodes; there are many other forms such as ValueNodes, FunctionNodes, ParameterNodes, and CallNodes. You can find out more in the documentation.

When we are looking for the flow of information to or from these nodes within a single function or scope, this is called local data flow analysis. The CodeQL library has several predicates available on different types of data flow node that reason about local data flow, such as getAPropertyRead() that we used in the previous step.

[github-learning-lab[bot]]

:keyboard: Find the plugin

Code your query in the file jquery-plugins.ql: Your query must find a function assigned to $.fn.<some-property>. To do so, you will use the predicate of DataFlow::SourceNode named getAPropertySource(), which finds a source node whose value is stored in a property of this node.

Submit your query.

[github-learning-lab[bot]]

Ooops! The query you submitted in 1e54173e7015f48efe26db4d452fadd62aff85dd didn't find the right results. Have a look at the comment.

To submit a new iteration of your query, you just have to push a new commit to the same branch (the default branch or the PR branch).

[github-learning-lab[bot]]

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

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