Setting Up the Userpilot SDK with Subresource Integrity (SRI)

When integrating the Userpilot SDK into your application, one important consideration is ensuring the security and integrity of the code you load from external sources. This is where Subresource Integrity (SRI) comes in.

What is Subresource Integrity (SRI)?

Subresource Integrity is a security feature that enables browsers to verify that the resources they fetch (such as scripts or stylesheets) are delivered without unexpected manipulation. It does so by comparing the fetched resource’s hash against your predefined hash value. If the hashes don't match, the browser will block the resource, thereby preventing the execution of potentially malicious code.

Configuring Userpilot SDK with SRI

When setting up the Userpilot SDK, you need to include several configuration options to secure your integration properly:

• Token: Your unique Userpilot token that identifies your account.
• Version: Specifies the version of the SDK you want to use.
• Sri: The hash value that ensures the integrity of the loaded script.

There are two common approaches to integrating the SDK with SRI.

JavaScript Integration

You might include the SDK via a script tag in your HTML for many setups. In this case, you would configure the SDK using a global settings object before loading the script. Here’s an example:

<script>
  // Configure Userpilot settings with SRI
  var userpilotSettings = {
    token: "YOUR_TOKEN_HERE",
    version: "YOUR_VERSION_HERE",
    sri: "YOUR_SRI_HASH_HERE"
  };
</script>
<script src="https://js.userpilot.io/sdk/latest.js"></script>

NPM

If you use a module bundler or a modern JavaScript framework, you might prefer installing the Userpilot SDK via NPM. After installing the package, you can initialize the SDK in your code as follows:

Install the Userpilot SDK via NPM:

npm install userpilot 

Initialize the SDK in your application:

import { Userpilot } from 'userpilot';

// Initialize the Userpilot SDK with SRI
Userpilot.initialize("YOUR_TOKEN_HERE", {
  version: "YOUR_VERSION_HERE",
  sri: "YOUR_SRI_HASH_HERE"
});

Generating the SRI Value

You can generate the SRI hash using a combination of curl and openssl commands. Replace VERSION in the command with the appropriate SDK version you are using:

curl -s https://js.userpilot.io/sdk/version/VERSION/app.js | openssl dgst -sha384 -binary | openssl base64 -A 

Steps Explained:

1. Fetch the Script:

   The curl command downloads the SDK script from Userpilot's CDN.

2. Generate the Hash:

   The first openssl command computes the SHA-384 hash of the downloaded script in binary format.

3. Encode the Hash:

   The second openssl command encodes the binary hash in Base64 format, which is the required format for SRI.

Note:

Once you have the hash, prepend it with sha384- when setting it in your configuration or as the integrity attribute in your HTML.

Best Practices for Using SRI

• Keep Hashes Updated: Whenever you update the SDK version, generate a new SRI hash for the new file and update your configuration accordingly.
• Use HTTPS: Ensure your scripts are loaded over HTTPS, as SRI is designed to work only on secure connections.
• Monitor Changes: Regularly monitor the SDK provider’s release notes or repository for any changes that might affect the integrity hash or require adjustments in your integration.