How to provide CSP setup

[vladkasianenko]

I need to setup Content-Security-Policy.

I added this: script-src jttps://*.clarity.ms, but seems it's not working because of the inline script. Is there any workaround on that?

[vladkasianenko]

I ended up with this:

1. npm i clarity-js
2. Define a function

   function initializeMicrosoftClarity(): Promise<any> {
      return new Promise<void>((resolve, reject) => {
        clarity.consent();
        clarity.start({
          projectId: environment.clarity.projectId,
         upload: 'https://v.clarity.ms/collect', // <-- choose any letter from a to z :)
         track: !isDevMode(),
         content: true,
      });
     resolve();
     });
   }

3. In AppModule add to providers:

    {
     provide: APP_INITIALIZER,
     useFactory: () => initializeMicrosoftClarity,
     multi: true,
    },

So probably there's a way to use this instead of the snippet?

[jadengis]

@vladkasianenko so when I built this library, clarity-js didn't exist and the approach for installing clarity outlined on the website was the inline script. I don't think they had anything outlined for CSP at the time. However, I think that you shouldn't need to change anything with the existing code to support CSP. The inline script currently in the codebase simply injects another script tag and your CSP should apply to the injected domain.

That being said, if you want to put up a PR to update this library to use the clarity-js library under the hood, I'd be more than happy to reivew and accept it.