The following creates one file index.html and one folder index_files. Loaded locally, index.html looks and behaves as expected (zooms, pans etc...).
library(OpenStreetMap)
library(htmlwidgets)
m <- leaflet()
m <- addTiles(m) %>% addProviderTiles(provider=providers$OpenStreetMap)
saveWidget(m, file="index.html",selfcontained = FALSE)
Once I upload to the server, the only way I've been able to view/interact with the map was by installing a Chrome extension that disables CSP.
My question is what should the CSP string look like in this case? I've iterated quite a bit on this, what the current setting I'm using is:
img-src 'self'
openlayers.org
tile.openstreetmap.org
a.tile.openstreetmap.org
b.tile.openstreetmap.org
c.tile.openstreetmap.org
unpkg.com;
script-src 'self' 'unsafe-eval' openlayers.org;
style-src 'self' 'unsafe-inline' 'unsafe-eval' openlayers.org;
I started out being served a blank page, and now I do see the outline of the individual tiles, and how they change when I zoom in & out.
The errors I get are by inspecting the page content. The network tab indicates that all elements but the images are loaded / not blocked. The pngs are blocked with the following error:
Refused to load the image 'https://a.tile.openstreetmap.org/0/0/0.png' because it violates the following Content Security Policy directive: "img-src 'self'".
Seems I'm close the the mark - what is missing?
The most likely explanation is that there is an existing CSP that sets "img-src 'self'". Adding another CSP can only make it stricter. As it doesn't seem like you set "img-src 'self'", you can likely find this in the response headers of the document (the one with content-type text/html). You will need to figure out how it is set and modify/remove it. It can be set in code, in a framework, in a webserver or a proxy.
Related
I just wanted to share with you on the subject because I spend 3 days searching and testing this problem until I found a solution. I wish to share my solution with you. (I'm a self-taught web designer, not a professional).
Context :
I was asked to update a 2009~2012 post-type WordPress website, to add a landing page for a promotional campaign, design for phone, and mobile-first.
I built the landing page in WordPress, added a revolution slider than test it.
It was beautiful on every desktop and Droid phone. But it didn't work on Safari iOs. All inline scripts and inline-CSS didn't work at all, shortcodes too.
I receive the bug error ' Refused to apply a stylesheet because its hash, its nonce, or ‘unsafe-inline’ appears in neither the style-src directive nor the default src directive of the Content Security Policy '
I try deactivating all the plugins one by one, I search on 90 pages and forums to find why it didn't work on SAFARI and how to solve it. Found out I needed to edit the Content-Security-Policy. I try adding the cache pluging W3Cache Total to use their Content-Security-Policy, even though it had a place to add and modify the CSP, it didn't make any change to the original code, as it didn't have the authorization to do it. It try adding this:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
But it didn't do anything. I must say I am working with an old website I did not build.
To solve my problem, I opened the HTCacces files and added this code to be the more permissive iOs browser ever.
#Header unset Content-Security-Policy
#Header add Content-Security-Policy "default-src * 'unsafe-eval' 'unsafe-inline' 'unsafe-dynamic' data: filesystem: about: blob: ws: wss:"
#Header unset X-Content-Security-Policy
Header add X-Content-Security-Policy "default-src * 'unsafe-eval' 'unsafe-inline' 'unsafe-dynamic' data: filesystem: about: blob: ws: wss:"
Header unset X-WebKit-CSP
Header add X-WebKit-CSP "default-src * 'unsafe-eval' 'unsafe-inline' 'unsafe-dynamic' data: filesystem: about: blob: ws: wss:"
Everything worked and I receive not bug code from iOs . I know the website might be insecure now, but I do not thing ever, nobody would attack this website, because it is so little in the Internet universe.
Please do not be harsh with me, I just want to share with you my solution, even though it might not be the best and a professional would have found out easily, I wrote it down for those like me who are self-taught web designers and learn every day by fixing bugs. Sorry for the typos, I'm an FR Quebecker.
Thank you Stack Overflow!
Summary:
Site at https://localhost:3000 , with Content-Security-Policy value of default-src 'self' 'unsafe-inline' https://localhost:3001/https_index.html contains iframe pointing at https://localhost:3001/index.html. The contents of :3001/index.html contain an . Clicking that link fails: Refused to frame '' because it violates the following Content Security Policy directive.... How can I change my CSP value to prevent this error; to open an new email in user's preferred email client (normal behavior of mailto)? I am using Chrome1
Detail:
Similar but different than this question "mailto link not working within a frame chrome (over https)
"
I think mine is not a duplicate because:
I cannot reproduce that bug, I see a console warning about mixed-content when I try to reproduce their steps:
Mixed Content: The page at 'https://localhost:3001/https_index.html' was loaded over HTTPS, but requested an insecure resource 'mailto:...'. This content should also be served over HTTPS.
My steps are specific; both my page & its iframe src are https, but the page itself is served with a specific and restrictive Content-Security-Policy (CSP):
app.use(csp({
directives: {
defaultSrc: ["'self' 'unsafe-inline' https://localhost:3001/https_index.html"]
}
}));
Also the resulting error I can reproduce is different:
Refused to frame '' because it violates the following Content Security Policy directive: "default-src 'self' https://localhost:3001/https_index.html". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.
With an image like:
The accepted answers for the original questions will help me work around my CSP-specific issue, that is, if I add a target="_top" to the link, the email client opens without error:
<a target="_top" href="mailto:...">email</a>
A similar fix works for another similar but different issue. However, this may1 sometimes open a new tab
So my question is specifically about the Content-Security-Policy error (see above):
...Refused to frame '' because it violates the following Content Security Policy directive: ...
Notice it says frame ''. The frame is identified as an empty string!
Normally if some resource violates CSP, the URL of the resource is identified; i.e.
Refused to laod the script 'http://evil.com/evil.js'...
And if the CSP-violating URL is identified + provided I can use it; add it to my CSP value for default-src:
`app.use(csp({
directives: {
defaultSrc: ["http://evil.com/evil.js 'self' 'unsafe-inline' https://localhost:3001/https_index.html"]
}
}));`
But can I allow an exception for an href value? Specifically for mailto? I tried wildcards like mailto*, but:
The source list for Content Security Policy directive 'default-src' contains an invalid source: 'mailto*'.
And I wonder if any wildcard would work anyway; does Chrome really consider the href="mailto..." frame as an empty string? I suppose so, since it's not a URL per se; Chrome "wants" to launch an external application (i.e. Outlook) in the context of the iframe; who is bound to the CSP rules of its parent page...
Footnotes:
Chrome displays the above errors in CSP or sandbox cases. Internet Explorer doesn't complain about an iframes href, despite the value of CSP. Internet Explorer also doesn't have the "new tab" problem, despite the value of sandbox. IE 11.1914 will just give message:
The fix of using target="_top" may open a new tab , if you've sandboxed your iframe! (sandbox is different than CSP). I don't like the new tab. Chrome gave me this error...
Unsafe JavaScript attempt to initiate navigation for frame with URL 'http://localhost:3000/' from frame with URL 'https://localhost:3001/index.html'. The frame attempting navigation of the top-level window is sandboxed, but the flag of 'allow-top-navigation' or 'allow-top-navigation-by-user-activation' is not set.
... but opened a new tab, as well as the Outlook email client...
I did what the error suggested; modifying the value of the iframe sandbox attribute:
sandbox="allow-top-navigation allow-same-origin ...", and the mailto link worked (as before), but did not open an excessive new tab. Great!
Stumbled upon this question after encountering the same issue. There is surprisingly little documentation about this after hours of searching.
My first instinct was to do something like you were doing, mailto* or mailto:*.
What finally ended up working was omitting the wildcards, and altering the frame-src directive as such:
frame-src 'self' mailto: tel: *.mydomain.com
tel: links were also were broken in iframes.
Currently, my CSP config in Apache looks like that:
Header set Content-Security-Policy "default-src 'self' 'unsafe-inline' https:"
I'd like to remove the unsafe-inline directive to improve my site's security, see Mozilla's Observatory.
Nevertheless, whenever I remove it, my browser's console shows an error indicating that the inline GA couldn't load…
Is there a workaround?
Sorry to Edit again. The proposed solution in
New Google Analytics code into external file
did not work for me. instead i got it to work like this:
i add a script tag to my page to load the analytics.js:
<script src="https://ssl.google-analytics.com/analytics.js" async id="ga"></script>
<script src="my_other.js" async></script>
and then in my_other.js file i do this:
window.addEventListener("load", function(){
ga('create', 'UA-********-1', 'auto');
ga('send', 'pageview');
})
then in your csp header you have to set some exeption to script-src and image-src. somthing along these lines:
img-src data: 'self' *.google-analytics.com *.g.doubleclick.net;
script-src 'self' *.google-analytics.com
As an alternative work-around, you can allow specific, static scripts by adding the script's hash to your content security policy. (A nonce works for dynamic scripts):
Hash your script (e.g., using sha256). Do include white space/capitalization. Don't include the script tags.
Add script-src 'sha256-[MYHASH]' to your content security policy.
See MDN for details. Not supported on IE11 .
I am using Google maps in my angular2/Ionic2 app and I get the following error:
js?libraries=geometry,drawing,places:79 Refused to load the font
'https://fonts.gstatic.com/s/roboto/v15/isZ-wbCXNKAbnjo6_TwHThJtnKITppOI_IvcXXDNrsc.woff2'
because it violates the following Content Security Policy directive:
"font-src 'self' data:".
What is this error, and how can I fix it?
My index.html has:
<meta http-equiv="Content-Security-Policy" content="font-src 'self' data:; img-src * data:; default-src * 'unsafe-eval' 'unsafe-inline'">
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing,places"></script>
Removing the meta tag solves the problem, but I am not sure what it does and whether I should remove it.
This is not about inline javascript, but inline style tags. Either you have them (probably not), or you are using something (possibly a jquery plugin) that is adding them. Based from this blog, you ned to enable it by adding the configuration from https://github.com/rwjblue/ember-cli-content-security-policy#options into your config/environment.js.
The default contentSecurityPolicy value is:
contentSecurityPolicy: {
'default-src': ["'none'"],
'script-src': ["'self'"],
'font-src': ["'self'"],
'connect-src': ["'self'"],
'img-src': ["'self'"],
'style-src': ["'self'"],
'media-src': ["'self'"]
}
Check these related links: Violating Content Security Policy directive after ember-cli 0.0.47 upgrade and "[Report Only] Refused to load the font..." error message on console
The Content-Security-Policy HTTP header is meant to block inline script and resources from untrusted servers. However, the sample Google Analytics code snippet depends on both. What are the best practices in this area?
This is the Content-Security-Policy header that I'm currently using:
default-src 'self'; script-src 'self' https://ssl.google-analytics.com; img-src 'self' http://www.google-analytics.com/__utm.gif https://ssl.google-analytics.com/__utm.gif;
So far, I've done the following:
I added two script tags to my html:
<script src="/js/google-analytics.js"></script>
<script src="https://ssl.google-analytics.com/ga.js" async="true"></script>
google-analytics.js sets up the _gaq array with _setAccount and _trackPageview.
I added the domain for ga.js to the script-src.
I noticed that ga.js was loading two images, so I added them to img-src.
Is there anything I'm missing? Will Google change things on me and break all of this? Is there any official recommendation?
This is mostly right:
You don't need the path to the image, just the protocol + host + (implied) port
Firefox differs slightly in its CSP implementation. For older versions, replace default-src with allow. There was a cutoff where Firefox supported default-src as equal to allow but most still implement with allow until it fully supports the spec (no citation included).