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.
Related
I want to enforce CSP as a security measure in my web application.
From the server end , I have set the policy to "allow" self for all of its resources.
However there is one particular front end node_module file , which is throwing error as attached below.
The CSP header set is :
script-src 'self' 'node_modules/aurelia-webpack-plugin/runtime/empty-entry.js'; script-src-elem 'self'; style-src 'self'; img-src 'self'
Please help , I have been trying to find a solution for more than a week now!
Solutions tried:
Try the front end to make it ignore this file since it is an empty file. But I am not able to get it to ignore.
Trying from server end to bypass this particular file by changing the rules
TIA.
Update:
Error message
UnCaught 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'"
at ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
The file seems to be allowed to load as it is loaded from the same source and you have allowed script-src 'self'.
The problem seems to be that the code in the file does eval(), new Function(), setInterval() or setTimeout(), which requires 'unsafe-eval' to be allowed. This is strange given that the file should be empty. Your console errer may provide you with a direct link to the offending code.
You could add 'unsafe-eval' to script-src. This would make your CSP less strict, but it is of course a lot better to set "script-src 'self' 'unsafe-eval';" than to not restrict scripts with a CSP at all.
I am working on Drupal 9.3.8 site and using CSP module to setup the CSP header.
There are few core dependencies or contrib modules which require unsafe-inline in CSP header but scanner recommends not the have unsafe-inline, so looking for the fix to remove the use of unsafe-inline.
Dependencies that require unsafe-inline:
Drupal core ckeditor, modernizer and AJAX calls - which can be handled by CSP module used above which adds unsafe-inline only when ckeditor renders, but not when only modernizer is required.
Google Analytics module - which adds the script inline instead of putting it in a file and include it on each page. We have the patch compatible with D7 but not for D8/9.
AntiClickJack snippet which is as below:
<style id="antiClickjack">body{display: none !important;}</style>
Solutions:
Installed and setup CSP module as mentioned above to handle Drupal core libs/dependencies requirement.
To handle only rendering of modernizer.js and unsafe-inline, will need customization to the CSP module.
For antiClickJack and google analytics script and style tags, cannot add hash or nonce as unsafe-inline will be ignored which will break the handling of Drupal core requirements
CSP header that I have is as below:
Content-Security-Policy: default-src 'self'; connect-src 'self' www.google-analytics.com; frame-src 'none'; img-src 'self' data: https://www.google-analytics.com; object-src 'none'; script-src 'self' www.googletagmanager.com www.google-analytics.com ajax.googleapis.com 'unsafe-inline'; script-src-elem 'self' www.googletagmanager.com www.google-analytics.com ajax.googleapis.com; style-src 'self' 'unsafe-inline'; frame-ancestors 'none';
Questions:
How to handle antiClickJack snippet to avoid the use of unsafe-inline?
Do we have a customized approach to add the google analytics script to a file instead of adding it inline?
Add the following hash to your style-src: 'sha256-NHgJfLahpnqTyd+gTNfZfM2wjTUfB3Wk1CvqZfZpeHY=' Most browsers will suggest a hash for you, or you can use https://report-uri.com/home/hash. Note that the hash works as long as the content is unchanged, so only use it for static code.
Google Analytics and Google Tag Manager are not easy to implement without 'unsafe-inline'. You might be able to move to a file, but I don't know if that has an impact on the order of events. You will also need to look into CSP nonces for the code they insert. You will need to configure them to use your nonce and make sure that a new nonce is created for every page load. My experience is that setting a custom value for the nonce and change it for every page load is not trivial or possible within some frameworks, but worth giving a try.
I have ASP.NET Core application and i am using Telerik's UI for ASP.NET Core framework for certain widgets like Date, DropDownList, Charts etc.
Application is loading all javascripts, images, css from its own server. So i have enabled CSP policy as below
script-src 'self' 'unsafe-eval';
style-src 'self' 'unsafe-inline';
img-src 'self' data:;
font-src 'self';
media-src 'none';
object-src 'none';
child-src https://xxxx.yyyy.com;
report-uri http://myapplication/csp/report;
However when the page load i see error in chrome's console
Refused to execute inline script because it violates the following
Content Security Policy directive: "script-src 'self' 'unsafe-eval'".
Either the 'unsafe-inline' keyword, a hash
('sha256-oii70XYoqukWS9204nbwatxgYOYcr06+rftc4egdfUk='), or a nonce
('nonce-...') is required to enable inline execution
this error is repeated for several Kendo widgets that i'm using on that page. For example date widget. In cshtml i have configured date as below
#(Html.Kendo().DatePicker()
.Name("sbDate")
.HtmlAttributes(new { #class = "mydate" }))
which gets render in html as
<input class="mydate" id="sbDate" name="sbDate" type="date" value="" /><script>jQuery(function(){jQuery("#sbDate").kendoDatePicker({"format":"M/d/yyyy","footer":false});});</script>
I have already gone through Telerik's suggestion here and here for CSP. And as per the suggestion i only i have to add unsafe-eval to get widgets working. However looks like that is not true. I also have to add unsafe-inline to get widgets working.
But the whole point of enabling CSP is to not allow inline scripts.
Questions
Is there any way to solve this issue?
Update 1
Widgets only works in IE 11 without adding unsafe-inline. In chrome and IE edge widget requires unsafe-inline to work.
The solution below might work (i have not tried yet)
1> Add Deferred method for each kendo widget. Like
#(Html.Kendo().DatePicker().Name("BeginDate").Deferred())
2> In each view that is using Kendo control, at the bottom add the script tag
<script asp-add-nonce="true">
#Html.Kendo().DeferredScripts(false)
</script>
Note that asp-add-nonce is not out of the box from asp.core. You have to install Joonasw.AspNetCore.SecurityHeaders nuget library. I found this article from the author that shows how to configure CSP for .net core application and also how to generate new nonce for each request.
3>Dont configure CSP policy in web.config because we need different nonce value for each request, instead configure the CSP policy using Joonasw.AspNetCore.SecurityHeaders middleware as mentioned in the article.
4>I thinks we don't need to add unsafe-inline if we use random nonce (unless you are targeting to older browsers)
I can't really tell if this would solve your issue, but in our Application, we are using the Deferring feature, but for other reasons. Our reason is that we load all scripts (esp. jquery.js) at the end of the page. But the side effect is that no jQuery script calls are rendered into the page anymore. You can control the place to generate all scripts by executing #Html.Kendo().DeferredScripts() (but you will find more help in the docs above). Anyway, probably in the context of CSP, even that <script> block at the very end of the page is still considered "inline". But give it a try.
The Zemanta Chrome Extension fails to load with the following error message
loader.js:13 Refused to load the script 'https://static.zemanta.com/widgets/blogger.com/merged-blogger.js?v=1451290656'
because it violates the following Content Security Policy directive:
"script-src 'self' *.google.com *.google-analytics.com 'unsafe-inline'
'unsafe-eval' *.gstatic.com *.googlesyndication.com *.blogger.com
*.googleapis.com uds.googleusercontent.com https://s.ytimg.com
www-onepick-opensocial.googleusercontent.com www-bloggervideo-opensocial.googleusercontent.com
www-blogger-opensocial.googleusercontent.com *.blogspot.com https://www.blogblog.com".
I have changed the content_securiy_policy line to the following, and reload the extension
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com https://*.zemanta.com; object-src 'self'"
Why is it that "https://*.zemanta.com" is not listed in the CSP directive in the error message above, and how can I make sure it is in the CSP?
It looks like an error thrown by a webpage with its own CSP, not inside your extension. So the CSP you set there has no effect.
It probably happens as a result of a content script trying to insert <script src="..."> into the page. That's subject to the page's CSP and can fail.
You can try to bypass the page's CSP by loading the script with XHR and inserting a <script> tag with the code included instead of src link. Note that this may fail at a later stage, since while the script will be executed this way, it will be subject to CSP in its own actions (so if it, say, tries to add a <script> tag as well, it will fail).
Alternatively, you could use webRequest API to intercept and modify the CSP header. That's risky since you're loosening the page's security in general.
Github has the following Content Security Policy:
Content-Security-Policy:default-src *; script-src
assets-cdn.github.com www.google-analytics.com
collector-cdn.github.com; object-src assets-cdn.github.com; style-src
'self' 'unsafe-inline' 'unsafe-eval' assets-cdn.github.com; img-src
'self' data: assets-cdn.github.com identicons.github.com
www.google-analytics.com collector.githubapp.com
*.githubusercontent.com *.gravatar.com *.wp.com; media-src 'none'; frame-src 'self' render.githubusercontent.com www.youtube.com
player.vimeo.com checkout.paypal.com; font-src assets-cdn.github.com;
connect-src 'self' ghconduit.com:25035 live.github.com
uploads.github.com s3.amazonaws.com
We can clip/retrieve content from the web with browser extensions of services likes Evernote or Pocket.
I don't see any reference to Pocket or Evernote in this Github policy. Can someone please explain why the Pocket extension is able to retrieve content from Github, while the Evernote extension is not, having a CSP error)
Can the CSP policy prevent a bookmarklet app or a browser extension app like a clipper to load? If so, how Pocket does to be able make their extension work on any content?
We have this problem in our bookmarklets/extensions and I would like them to work as smooth as Pocket extension but I don't really know where to start... thanks
Edit:
As people are asking for code in the comments, our bookmarklet is loaded with this javascript:
javascript: (function() {
function loadScript(a, b) {
var c = document.createElement('script');
c.type = 'text/javascript';
c.src = a;
var d = document.getElementsByTagName('head')[0],
done = false;
c.onload = c.onreadystatechange = function() {
if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
done = true;
b()
}
};
d.appendChild(c)
}
loadScript('http://localhostsss.com:9000/assets/js/backbone/views/clipping/clippinglocal.js', function() {
s.clipping.initClipping()
})
})()
If I try to launch this bookmarklet in a Medium page, which have a CSP, I get the following error.
Refused to load the script
'http://localhostssss.com:9000/assets/js/backbone/views/clipping/clippinglocal.js'
because it violates the following Content Security Policy directive:
"script-src 'unsafe-eval' 'unsafe-inline' about:
https://.akamaihd.net http://.baidu.com https://bitly.com
https://.cloudfront.net https://.facebook.com https://.facebook.net
https://getpocket.com https://.github.com https://.googleapis.com
https://ssl.google-analytics.com https://app.greenhouse.io
https://.medium.com https://myspace.com https://.pinterest.com
https://www.readability.com https://thinkery.me https://this.cm
https://.twitter.com https://use.typekit.net https://*.instapaper.com
'self'".
Can someone tell me how to make our bookmarklet loadable on websites like Medium or Github which have a CSP policy.
I can't talk so much about browser extensions yet because I didn't work on it yet and the person is not here atm. I just know that we have the same problem and our browser extensions are basically the same code as our bookmarklets except it's a little bit adapted to fit in a browser extension shell. If you can only answer for the bookmarklet case I'll be ok and accept the answer but any hint for browser extensions would be nice too :)
Can the CSP policy prevent a bookmarklet app or a browser extension app like a clipper to load?
It is very simple: The extension or bookmarklet will be blocked if it violates the CSP.
So, if the CSP blocks all inline script, no bookmarklet will work. Github does that with media-src because, by simply existing, the "media-src" directive blocks inline script by default. So no bookmarklet can work on Github.
(As a side note, even though all browsers work this way, this isn't what the standards says should happen. Bookmarklets should actually exempt from CSP, but unfortunately no browsers have bothered to permit that.)
Now, as for which extensions will work or will not work, that depends on how the extension itself works. Extensions can not be directly blocked by CSP, but, if the extension tries to do anything which does violates the CSP, it may fail. So, on Github, if the extension tries to add native script into the page's DOM, or tries to append an external script to the page's DOM from an unapproved location, or do any of the other restricted things described in the CSP, it may fail.
So, what part of the Evernote extension is causing a CSP error and how does Pocket do a similar job without causing an error? I don't know. That all depends on the very specific details of how those applications are written. Most likely it is quite simple to look at their code and try to figure it out. As far as I know, all Chrome extensions are written in JavaScript and packaged as a zip file - just with a different file extension. I believe that the same is true of Firefox addons also.