I am working on a chrome extension and was about to set up identity authentication when I saw they put a notification on top of the page saying they are migrating authentication to firebase: https://firebase.google.com/docs/web/setup#prerequisites
I'm trying to follow their advice for the "web setup" but I am thinking it must not be the same for extensions because trying to put the initialization code in my background.js I am getting the error:
Refused to load the script 'https://www.gstatic.com/firebasejs/live/3.0/firebase.js' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:".
Am I loading it in the wrong place or is there simply a different implementation for extensions?
Here is the code to avoid link rot:
// TODO: Replace with your project's customized code snippet
<script src="https://www.gstatic.com/firebasejs/3.0.2/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: '<your-api-key>',
authDomain: '<your-auth-domain>',
databaseURL: '<your-database-url>',
storageBucket: '<your-storage-bucket>'
};
firebase.initializeApp(config);
I replaced it with my own custom code snippet and I put the embedded link in background.html with the config/init snippit in background.js
You need to download firebase.js and put in in your extension, then load it with a relative url. Your extension isn't allowed to access external scripts.
add this to your manifest.json:
"content_security_policy":"script-src 'self' https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'"
this way you will not violates the Content Security Policy as mention in the error you got.
Related
I'm writing a Chrome extension which extends the Developer tools. In the html page of my devtools panel, I want to use webpack in watch mode for fast iteration of the UI. In the extension manifest, I added this entry:
{
"content_security_policy": {
"extension_pages": "default_src: 'self' http://localhost:8081"
}
}
Then in the html page, I specify my script src as:
<script src="http://localhost:8081/devtools.js"></script>
Chrome happily loads my extension, but when it tries to load the html page, it fails with the following error:
Refused to load the script 'http://localhost:8081/devtools.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.
What do I do wrong here?
I cannot succeed in including Vue 3 in a simple Chrome extension. I created a local folder within the extension with the
following structure and content
but I always get the following error message when I try to lead the library from any extension's pages:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Either the 'unsafe-inline' keyword, a hash ('sha256-NEG1aW1******'), or a nonce ('nonce-...') is required to enable inline execution.
I don't understand the issue. Any other library that I bundle directly inside the extension has always worked just fine, but this is not happening with Vue.
Does anyone have any idea?
Thanks!
I'm making a chrome extension that will create an iframe, inject it into the page, and then run a react app inside that iframe. I'm making the react app with Create React App and one of the <script/>s in build/index.html will not be executed due to security issues.
The index.html has three <script/>s in it:
<script>!function(e){function r...<LONG CHUNK OF BUNDLED CODE></script>
<script src="/static/js/2.f6218dca.chunk.js"></script>
<script src="/static/js/main.c335a43f.chunk.js"></script>
The first script listed above is a large bundled script that I mainly cut out here. The second two seem to load and run fine, but I get the following error message for the first one.
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-ssRao1c5f8Pf3VvQXjkNHGmrQ6+tZ7Fuaxxxxxxxxxx='), or a nonce ('nonce-...') is required to enable inline execution.
I have encountered this error before when working with manifest v2 and know there are a bunch of answers showing how to get around it, but they don't seem to work with manifest v3. As stated here about the new v3 security policies:
"The script-src, object-src, and worker-src directives may only have
the following values:
self
none
Any localhost source, (http://localhost, http://127.0.0.1,
or any port on those domains)"
therefore the error message above seems to be outdated. If I add 'unsafe-inline' or 'sha256-ssRao1c5f8Pf3VvQXjkNHGmrQ6+tZ7Fuaxxxxxxxxxx=' to my content security policy I can't load the extension into Chrome - it's rejected with a message like "'content_security_policy.extension_pages': Insecure CSP value "'unsafe-inline'" in directive 'script-src'."
Also it seems I have the right v3 security policy set for the other two scripts - I can verify this by changing it and getting three of the above error messages, one for each script.
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'"
},
Is there anyway to load the first script of bundled js code? Or would I have to put it in another file and load it with <script src="/path/to/new_file.js"...?
Also here is the code in my content script that creates the iframe and injects the react app into it, in case it's relevant:
const modal = document.createElement('dialog');
modal.setAttribute("style", "height:40%");
modal.innerHTML =
`<iframe id="headlineFetcher" style="height:100%"></iframe>
<div style="position:absolute; top:0px; left:5px;">
<button>x</button>
</div>`;
document.body.appendChild(modal);
const dialog = document.querySelector("dialog");
dialog.showModal();
const iframe = document.getElementById("headlineFetcher");
iframe.src = chrome.runtime.getURL("index.html");
iframe.frameBorder = 0;
You'll need to set an environment variable to tell it to not use an inline script:
INLINE_RUNTIME_CHUNK=false
Add this to your .env file and when you rebuild the offending bit of React is placed into a file.
I have several QUnit tests running successfully for our extension.
I'd like to gather code coverage information, and thought I would use blanket.js to do so.
However, when I click the 'Enable coverage' button, I see several CSP violation messages in the JavaScript Console:
Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'
I've tried updating the content security policy of the extension, adding 'unsafe-inline' and 'unsafe-eval'. With the 'unsafe-inline', Chrome doesn't load the extension. And the 'unsafe-eval' option doesn't fix the problem.
Below is the snippet of CSP from my manifest.json file:
"content_security_policy": "default-src 'unsafe-inline' 'self'"
Is there a way to get blanket.js to run successfully for a Chrome extension?
If not, is there an alternative to blanket.js for Chrome extensions?
I'm currently using:
Chrome 34
blanket - v1.1.5
QUnit v1.10.0
Any help would be appreciated.
You can try changing the implementation of _addScript to:
function(data) {
(1,eval)(data);
}
And adding 'unsafe-eval' to your CSP.
I'm trying to use Firebase in a Chrome extension background page, but it looks like it's executing inline-scripts, which isn't allowed because of security concerns.
I've currently set the CSP to:
{"content_security_policy":
"script-src 'self' https://cdn.firebase.com https://<my-subdomain>.firebaseio.com; object-src 'self'"}
I'm able to load the initial Firebase script, but upon calling new Firebase('my-firebase-url'), I get the following error:
Refused to execute inline script because it violates the following
Content Security Policy directive: ". Uncaught
ReferenceError: pRTLPCB is not defined
Is there any work around or advice the Firebase team (or anyone) can give, and maybe an explanation of why scripts are being executed inline?
At the time the question was asked, there was a bug preventing Firebase from working in Chrome extensions, but this has now been fixed.
The correct CSP is:
"content_security_policy": "script-src 'self' https://cdn.firebase.com https://*.firebaseio.com; object-src 'self'"
(Note that the wildcard in the domain is important, since Firebase may connect to other subdomains internally.)
For a sample chrome extension using Firebase, see: https://github.com/firebase/firebase-chrome-extension.
I'm having a similar problem; you see, Firebase's constructor seems to perform some dom manipulation in order to do some scripting (vague, I know), which triggers Chrome CSP because well, you are not supposed to do that.
I even trying to wrap the constructor through the Sandbox Pages, but without success (I get an DOM ERR 18, even though my manifest has all permissions). Same happens if you try to do it in a Background Page or a Popup Page for a Page Action/Browser Action.
Alternative? You can inject Firebase as a content script (do it from your manifest), and through Message Passing send the callbacks as Chrome.extension.sendMessage. I'm exactly doing this at the moment, so I can tell you how that goes, so far, at least the Firebase constructor works.
Solution? James Tampling reads this and prompts the Firebase team to look up after this :)
UPDATE: Injecting Firebase.js as a Content Script doesn't work neither, but the good news is that the Firebase team (reach Andrew Lee) is checking it out.
UPDATE 2 Firebase team fixed it, and now it does work from a Popup page (both in a Browser Popup or a Page Action one). You need to add the following CSP in your manifest.json though "content_security_policy": "script-src 'self' 'unsafe-eval' https://cdn.firebase.com https://*.firebaseio.com https://*.firebaseio.com; object-src 'self'; " It works wonders after that.
I have a cordova js app, only the below one worked:
<meta http-equiv="Content-Security-Policy" content="
default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval';
script-src 'self' https://www.gstatic.com https://cdn.firebase.com https://*.firebaseio.com; object-src 'self';
" />
hope this helps.