BackgroundBlurEffect requires Content Security Policy 'unsafe-eval'

[Mrlten]

Describe the bug; what happened? Enabling the BackgroundBlurEffect (from @azure/communication-calling-effects) requires you to have unsafe-eval added to the Content Security Policy header. Without it, the background blur can't start and videocalling will fail.

Having to enable unsafe-eval could become a security issue because it opens up a lot of options for hackers. Maybe not with the ACS packages but you never know with other packages developers use in their apps.

@azure/communication-calling-effects is still in beta but I hope you can remove the need for eval / new Function(...).

EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'sha256-8ZgGo/nOlaDknQkDUYiedLuFRSGJwIz6LAzsOrNxhmU='".

    at new Function (<anonymous>)
    at qA (305071ff-fca2-45ba-9844-361245b8d91e:1:943836)
    at KA (305071ff-fca2-45ba-9844-361245b8d91e:1:943975)
    at B (305071ff-fca2-45ba-9844-361245b8d91e:1:953531)
    at A.<anonymous> (305071ff-fca2-45ba-9844-361245b8d91e:1:988305)
    at 305071ff-fca2-45ba-9844-361245b8d91e:1:986811
    at Object.next (305071ff-fca2-45ba-9844-361245b8d91e:1:986916)
    at 305071ff-fca2-45ba-9844-361245b8d91e:1:985828
    at new Promise (<anonymous>)
    at C (305071ff-fca2-45ba-9844-361245b8d91e:1:985573)

What are the steps to reproduce the issue?

1. Clone the repro I made: https://github.com/Mrlten/AcsBackgroundBlur
   • It has a minimal CSP configured for the repro
2. Install the npm packages
3. Open acsbackgroundblur.client/src/App.tsx and set the userId/token with valid data from your Azure Communication Service
   • So fill in these two lines
4. Start the app using npm run dev
5. In the browser open the Dev Tools and select the Console tab
6. In the call composite, enable the camera, click on the Effects button and select 'Blur'
7. The CSP error will now appear in the Dev Tools console

What behavior did you expect? The ability to use BackgroundBlurEffect without the need for unsafe-eval in the Content Security Policy.

If applicable, provide screenshots: n/a

In what environment did you see the issue?

• @azure/communication-react npm package version (if applicable): 1.17.0

• @azure/communication-calling npm package version (if applicable): 1.26.2

• @azure/communication-calling-effects npm package version (if applicable): 1.0.1

• OS & Device: Windows on PC

• Browser: Microsoft Edge, Google Chrome

• Browser Version: Edge: 126.0.2592.113, Chrome: 126.0.6478.128

Is there any additional information? n/a

[JamesBurnside]

Thanks for filing this issue @Mrlten, and thank you for the minimal repro, we were able to reproduce the issue locally. I am moving this issue for better triaging to where the @azure/communication-calling lives.

[Mrlten]

@JamesBurnside thanks for moving it to the correct repository!