Firebase ui Popup is not working in chrome extension Manifest v3? - google-chrome-extension

This is the error I am getting while inspecting popup.js:
firebase-auth.js:1 Refused to load the script 'https://apis.google.com/js/api.js?onload=__iframefcb916487' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
La # firebase-auth.js:1
firebase-auth.js:1 Refused to load the script 'https://apis.google.com/js/api.js?onload=__iframefcb916487' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
La # firebase-auth.js:1
firebase-auth.js:1 Uncaught Error: Network Error
at firebase-auth.js:1:97145
at e.b (firebase-auth.js:1:28705)
at De (firebase-auth.js:1:29689)
at Ce (firebase-auth.js:1:29559)
at pe.t.ec (firebase-auth.js:1:30399)
at de (firebase-auth.js:1:27468)

Related

Twitter embed in a Chrome Extension with Manifest V3

I'd like to know if it's still possible to embed a Twitter Timelines in a Chrome Extension with a Manifest v3.
I tried to use from the Twitter docs :
<a class="twitter-timeline" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
But I get errors :
Refused to load the script 'https://platform.twitter.com/widgets.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
Refused to load the script 'https://platform.twitter.com/widgets.js' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
The problem if I understood correctly is that with manifest v3 it's not possible to use external scripts.
What are the possible solutions to embed a Twitter Timeline in a Chrome Extension ?
Thanks !

Refused to execute inline script because it violates the following Content Security Policy directive (Chrome Extensions Manifest 3)

I'm trying to migrate my Chrome extension from Manifest 2 to Manifest 3 but I'm getting the following error
Refused to execute inline script because it violates the following
Content Security Policy directive: "script-src 'self'
'wasm-unsafe-eval'". Either the 'unsafe-inline' keyword, a hash
('sha256-ClANdr6bWuUdXWELI09IBiITbU5zbvg6V1dZp9mr55Q='), or a nonce
('nonce-...') is required to enable inline execution.
For the code
I have tried to add
"content_security_policy": {
"extension_page": "script-src 'self' 'sha256-ClANdr6bWuUdXWELI09IBiITbU5zbvg6V1dZp9mr55Q='"
},
to Manifest but it didn't help
How can I solve it?

Refused to load the font '<URL>' because it violates the following Content Security Policy directive: "font-src 'none'" fonts.gstatic.com

In my CSP i have added
font-src https://fonts.gstatic.com;
I am getting the generic error
Refused to load the font '' because it violates the following Content Security Policy directive: "font-src 'none'"
And the specific error
Refused to load the font 'https://fonts.gstatic.com/s/mulish/v10/1Ptvg83HX_SGhgqk0gotYKNnBcif.woff2' because it violates the following Content Security Policy directive: "font-src 'none'".
When I do this:
font-src 'none' https://fonts.gstatic.com;
I get this error:
The Content-Security-Policy directive 'font-src' contains the keyword 'none' alongside with other source expressions. The keyword 'none' must be the only source expression in the directive value, otherwise it is ignored.
And when I do this:
font-src 'none';
I get this error:
Refused to load the font 'https://fonts.gstatic.com/s/mulish/v10/1Ptvg83HX_SGhgqk0gotYKNnBcif.woff2' because it violates the following Content Security Policy directive: "font-src 'none'"
What am I missing here?
The most likely explanation is that you have multiple CSPs defined. The image needs to pass the img-src directive (or the default-src fallback) for all CSPs present. They could be in response headers or in meta tags.
You will need to identify the CSPs and modify/remove what you don't need.
I'd try with something like this in your case
font-src 'self' fonts.gstatic.com;

Refuse to load the script

when we use script link in pug templete then this type of error occure in console,
we also set csp header in meta tag as well as set.header to server script
Refused to load the script 'https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
this is my pug code
block append head
meta(http-equiv="Content-Security-Policy" content="script-src 'self' api.mapbox.com js.stripe.com 'unsafe-inline'")
script(src='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js')
link(href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet')
script(src='https://js.stripe.com/terminal/v1/')
If you set your CSP in both meta tag and response header anything will have to pass both policies. Modify or remove your response header CSP.

Polymer with ASP.NET Core, return "violation of Content Security Policy directive"

I have created a new Polymer app using the latest version, Polymer 1.7.1
It is a very simple layout doing almost nothing but if I run it either from my Windows 10 machine or from a public Azure Web Role, all browsers (Chrome, Android default and Edge) return this error:
Refused to execute inline script because it violates the following
Content Security Policy directive: "default-src 'self'".
Either the 'unsafe-inline' keyword,
a hash ('sha256-y9OeFTMzuy/UmFD54M4yHw1fwa70f6ptTlq7FUPrn+M='),
or a nonce ('nonce-...') is required to enable inline execution.
Note also that 'script-src' was not explicitly set,
so 'default-src' is used as a fallback.
Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic'
because it violates the following Content Security Policy directive:
"default-src 'self'".
Note that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
Now, I do understand the meaning of CSP but this is not the only Polymer Project that I have but it's the only one giving me this problem.
How can I mark it "safe" and remove these warnings from the browsers?
Solution
At the end, it was ASP.NET Core which was not adding any header, by default, which was causing Polymer to throw the CSC exception.
Solved with this:
app.Use(async (ctx, next) =>
{
ctx.Response.Headers.Add("Content-Security-Policy",
"default-src 'self' * 'unsafe-inline' 'unsafe-eval' data:");
await next();
});

Resources