Skip to main content

Content-Security-Policy

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft, to site defacement, to malware distribution.

Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

When a "Content Security Policy" (CSP) is defined, recordSDK requires three directives to be added. This is what we use them for:

  • connect-src: The isSupported method sends a request to loom.com to perform a preflight check
  • frame-src: The Record SDK creates an iframe in the current page that loads the SDK's business logic. See architecture for context.
  • style-src: The styling for the SDK is implemented with CSS-in-JS.

Snippet for helmet-csp​

import merge from 'deepmerge';

const existingCSP = { /* your existing policy */ };

// Specified in a format that can be used by helmet-csp
const loomSpecificCSP = {
  'connect-src': ['www.loom.com'],
  'frame-src': ['www.loom.com'],
  'style-src': ["'unsafe-inline'"]
};

console.log('The new CSP directives', merge(existingCSP, loomSpecificCSP));

Codesandbox​

See our codesandbox for a full working example