Content Security Policy violation for script-src

[Smarthard]

What are you trying to do?

I'm using ngx-scrollbar for my web-extenstion pet-project. It works as intended until I try to actually build and pack it into browser extension:

As you could see whenever it's loaded as extension I receive this CSP warning with message about failing to load remote script which refers to https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js.

What troubleshooting steps have you tried?

It fixes with no issues if I update my extension's manifest.json CSP rules with something like:

    "content_security_policy": "script-src 'self' https://flackr.github.io"

...but in fact I don't really want to do it, because remote code is severely dangerous thing to leave. And it will cause review issues if I actually try to release it to stores like AMO or CWS.

Could we somehow pack this code into ngx-scrollbar package please?

Reproduction

Stackblitz example won't really help here because you couldn't reproduce this issue there (you need this code to be loaded as web extension). But if you need it I would create reproduction repository with instructions

Environment

• Angular: 17
• ngx-scrollbar: 14
• Browser(s): Firefox 124
• Operating System (e.g. Windows, macOS, Ubuntu): any

[MurhafSousli]

I tried to pack the polyfill, but it didn't work with me. it seems that it only works when loaded via script element. what you can do is host the script file on your own server like add it to your assets directory or use a trusted CDN.

This is the polyfill repo

Example of changing the polyfill script:

import { ApplicationConfig } from '@angular/core';
import { provideScrollbarOptions } from 'ngx-scrollbar';

export const appConfig: ApplicationConfig = {
  providers: [
    provideScrollbarPolyfill('assets/scripts/scroll-timeline.js')
  ]
};

If you want to try your luck in loading the script internally, try playing with this file https://github.com/MurhafSousli/ngx-scrollbar/blob/master/projects/ngx-scrollbar/src/lib/utils/scrollbar-manager.ts

I would prefer to ship the polyfill with the plugin and lazy load it on demand.

[Smarthard]

@MurhafSousli thank you for the quick response! I'll try to dig into it and create a PR when it's done

[Smarthard]

I was able to add that script into ngx-scrollbar repository and made it running here: Smarthard@6505bab

However I still need to figure a couple of things:

• Test case from scrollbar-manager.spec.ts is failing (in line #39)
• I'd prefer flackr/scroll-timeline to be a part of package.json dependecies list but it's not shipping yet with compiled dist folder (NPM support flackr/scroll-timeline#57)

[MurhafSousli]

It isn't problematic to make it work locally, the problem is with shipping it with the package using ng-packagr. we can ship it as an asset in the package like styles / themes... etc. user will still have to link the script when importing the library manually, but I think that's ok.

[Smarthard]

we can ship it as an asset in the package like styles / themes...

Yep, that's how I did it. But I didn't need to load it manually. Am I missing something?

[MurhafSousli]

Ok, try and we can see the result. it also better not to load /activate it if the browser supports it natively like chrome