How to avoid this error when I try to implement sign in with facebook button?

Question

I added Facebook signIn button and on https://localhost:3000/ everything works just fine but when I deploy my app it throws the following error in the console:

Refused to load the script 'https://connect.facebook.net/en_US/sdk.js' because it violates the following Content Security Policy directive: "script-src-elem 'self' 'unsafe-inline' https://apis.google.com/ ".

I tried to add this line into my manifest.json: "content_security_policy": "script-src 'self' 'unsafe-inline' https://connect.facebook.net 'unsafe-eval'; object-src 'self'" But it doesn't help. Could someone explain me what's the problem?

Answer 1

because it violates the following Content Security Policy directive: "script-src-elem 'self' 'unsafe-inline'

This violation message says that you use script-src-elem directive in the CSP. But you add the https://connect.facebook.net source into script-src directive.
Chrome browser follows the script-src-elem if it presents, and script-src is used as fallback only if script-src-elem is omitted.

You have to add https://connect.facebook.net into both script-src-elem and script-src.