Running a dynamic scan with the Chrome extension

Table of contents

1. Introduction
2. Pre-requisites
3. Add the extension to your browser
4. Create an Agent in the CodeLogic UI Configure the extension
5. Configure the extension
6. Identity Mapping Function
7. Using the extension
8. Verifying results
9. Troubleshooting

Introduction

A Dynamic Scan observes function and network calls on pages visited in the browser to make connections that can only be detected at runtime. It then periodically relays information to the CodeLogic server. This guide will walk you through configuring and running a dynamic scan of your web application using the CodeLogic Dynamic Scan Chrome Extension

Pre-requisites

Because the dynamic scan will be making new connections in an existing graph, you may want to run a static scan of both your front-end application and the application exposing API endpoints prior to running this scan. You can still run through this guide and verify it is correctly configured without the static scans, but you'll need all three scans to see the full picture of your application in CodeLogic.

Add the extension to your browser

Download the extension under Store > Browser Extension

Add the extension to Chrome
You must enable "developer mode" on the Chrome extensions page in your browser (chrome://extensions) to install the extension.

With developer mode enabled, you can drag-and-drop the downloaded extension zip file onto the extensions page (chrome://extensions) to install it.

Create an Agent in the CodeLogic UI Configure the extension

Navigate to the Agents page from the side navigation bar in the CodeLogic UI

Create a new agent by clicking Create Agent on the Agents page and giving the agent a name and optional description.

Note the Agent ID and Password, or leave this modal open. You will need this info to configure the extension

Configure the extension

Back in your chrome browser, Right-click on the extension icon and select Options

Add initial values to the configuration fields for extension

Field	Example	Description
Agent UUID	397a775b-7fc2-43f6-bf63-4be006cfa7fc	The Agent UUID from step 2
Agent Password	sCjzk-shFJ%x-oA9ULJ#sFHe9XQRu	The Agent Password from step 2
Host	https://codelogic.example.com	The URL of the CodeLogic server you are using
Log Level	ERROR	The level of logging you would like to see in the console.
Transmission Interval	2000	How frequently the extension will submit discovered information back to the CodeLogic server.
Batch Size	20	The number of items to send in each transmission.
Identity Mapping Function	(path) => {console.log(path); return path;}	A function used to match source map paths back to the original files.

Example options:

Identity Mapping Function

The identity mapping function matches paths discovered by the extension to original source paths from static scans. It is a critical part of the configuration.

The easiest way to figure out what the mapping function should look like is to log the detected outputs and find the pattern.
For example, when logging the path ((path) => {console.log(path); return path;}) in a React application compiled with Webpack might produce results like this:

opt/src/components/FooComponent.tsx
opt/src/api.ts

corresponding to actual files in your project located at:

{project root}/src/components/FooComponent.tsx
{project root}/src/api.ts

In this case, it's clear that the path prefixes opt/ and that by removing this from the path using the identity mapping function we can match statically scanned files.
An appropriate identity mapping function would look like this:

(path) => {
    // `opt/` is removed from the beginning of detected paths
    const matchString = 'opt/';
    const basePathIndex = path.indexOf(matchString);
    const identity = basePathIndex >= 0 ? path.slice(basePathIndex + matchString.length) : path;
    return identity;
}

Using the extension

Once configured, the extension will begin sending data to the CodeLogic server. Navigate through your user interface to begin collecting data on the runtime behavior of your application.

Verifying results

To ensure that CodeLogic is receiving results, navigate to Admin > Scan Spaces in the CodeLogic UI.

Find the Default scan space in the list of scan spaces, and click on the actions icon.

Select the "View Scan Sessions"

You should see new scan sessions with the NodeJSCape-Dynamic data source and the name you provided when creating the agent, e.g.

Troubleshooting

Problem:
Browser console shows: An error has occurred during an HTTP request. An error occurred during an HTTP request.. Retrying (1/5)...

Likely Cause:
This error is likely due to a misconfiguration of the extension. Ensure that the Agent UUID and Agent Password are correct, and that the Host is the correct URL for the CodeLogic server you are using.

---