CSP Violation in Browser Extensions - Segment tries to load Amplitude external scripts

Open
#1,313 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
typescript
Domain
frontend, web-dev

Research direction

Start at the AnalyticsBrowser.load call shown in the issue and trace how the Actions Amplitude integration is loaded. Determine how a browser extension could use a locally bundled plugin without the external cdn.segment.com script, then verify that Amplitude works under the stated CSP while the integration remains enabled.

Written by the indexing model from the issue text.

Description

When using @segment/analytics-next in my browser extension, with Amplitude as a destination, the library attempts to load an external script from cdn.segment.com, which violates the Content Security Policy (CSP) restrictions that browser extensions must follow. I get the following errors

Refused to load the script 'https://cdn.segment.com/next-integrations/actions/amplitude-plugins/3b0a288ecd08e5d54cea.js' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:* chrome-extension://9bbf6c71-ecde-4d95-a751-f6c2b50f2780/". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

analytics.ts:4 Failed to create PluginFactory {name: 'Actions Amplitude', creationName: 'Actions Amplitude', libraryName: 'amplitude-pluginsDestination', url: 'https://cdn.segment.com/next-integrations/actions/amplitude-plugins/3b0a288ecd08e5d54cea.js', settings: {…}}
Image

I disabled the integration in order to get rid of the error :

const segment = AnalyticsBrowser.load(
  {
    writeKey: "",
  },
   {
     // Disable external integrations to prevent CSP violations
     integrations: {
      "Actions Amplitude": false,
    },
  },
);

But obviously this isn't great, since it means I can't use Amplitude.

Is there a way to bundle the Amplitude plugin myself and provide it to Segment ? I didn't find anything in the documentation. Thanks !

Dominant language
TypeScript
Stars
477
Forks
160
Avg merge
6h 19m
Merged PRs (30d)
4

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from segmentio/analytics-next

All issues in segmentio/analytics-next

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.