In this simple example, I'm trying to set a CSP header with the meta http-equiv header. I included a base64 image and I'm trying to make Chrome load the image.
I thought the data keyword should do that,
but somehow it's not working.
I just get the following error in Developer Tools:
Refused to load the image 'data:image/png;base64,R0lGODlhDwAPAOZEAMkJCfAwMMYGBtZMTP75+euIiPFBP+hVVf3v7…nw7yk4Mjr6GLUY+joiBI2QAACABwJDCHgoKOHEoAYVBAgY8GGAxAoNGAmiwMHBCgccKDAKBAA7' because it violates the following Content Security Policy directive: "img-src 'self' data".
The example code (JSFiddle is not working for this example because I cannot set meta header there):
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="
default-src 'none';
style-src 'self' 'unsafe-inline';
img-src 'self' data;
" />
<style>
#helloCSP {
width: 50px;
height: 50px;
background: url(data:image/png;base64,R0lGODlhDwAPAOZEAMkJCfAwMMYGBtZMTP75+euIiPFBP+hVVf3v7+iHh/JNTfh9dNUYGPjTvskXFfOLi/daVe96es4eHPWIiOqbi9dNRvzWwexdV9U1NeFSS94iIvuxodVGP/ZsZM8jI+ibm/alluQzMdxSSvbGstwsKu2Yid4iIfjQu/JnYO6djvajlMQEBPvLuOJdXeMxL/3jzPBSTdwqKNY2Mf3i4vU5OfbPz/3f3/zUv/zizO0tLc0NDfMzM+UlJekpKeEhId0dHdUVFdkZGdEREf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAEQALAAAAAAPAA8AAAepgESCRBsLEDQQCxuDgxYdO5CROx0WgywGAQEKM0M2CpkGN0QvMDmmE0OpE6Y5KEQqPbE9D6lDD7I9IBc8vDwRtRG9PBcuPsY+B7UHxz4hP8/PGghDCBrQPyYxQdvbBUMF3NskGUDl5QwtDOblGSVC7+8JNQnw7yk4Mjr6GLUY+joiBI2QAACABwJDCHgoKOHEoAYVBAgY8GGAxAoNGAmiwMHBCgccKDAKBAA7) no-repeat;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>CSP</h1>
<div id="helloCSP"></div>
</body>
</html>
You can also open this example here:
https://dl.dropboxusercontent.com/u/638360/ps/csp.html
According to the grammar in the CSP spec, you need to specify schemes as scheme:, not just scheme. So, you need to change the image source directive to:
img-src 'self' data:;
Try this
data to load:
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='#343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>
get a utf8 to base64 convertor and convert the "svg" string to:
PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0IDUn
PjxwYXRoIGZpbGw9JyMzNDNhNDAnIGQ9J00yIDBMMCAyaDR6bTAgNUwwIDNoNHonLz48L3N2Zz4=
and the CSP is
img-src data: image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0IDUn
PjxwYXRoIGZpbGw9JyMzNDNhNDAnIGQ9J00yIDBMMCAyaDR6bTAgNUwwIDNoNHonLz48L3N2Zz4=
Related
I'm trying to use an inline script in my project, and I keep getting this error:
'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-hyQXPyDjuL7UGCz8hPIbJ2ZzKwE8uqNzvUJB9/9T6jc='), or a nonce ('nonce-...') is required to enable inline execution.'
I've viewed a bunch of other similar questions on here and they all say it has to do with a meta tag and to include something like this:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'" />
but that doesn't make a difference, I've removed all the meta tags from my <head> and I still get the same error. where could this issue possibly be coming from other than the
<head> ? ive created my project with the express-generator but i cant find anything CSP in any of my files.
I'm completely lost on what's blocking the inline scripts, if I can provide any code please let me know but seeing as I have no idea what's causing it, i dont know what code to provide
The CSP directive is not set in meta tag but in HTTP header.
Sice you marked the question with node.js and express tags, here's an example setting the CSP header in express:
const express = require("express");
const app = express();
const port = 8080;
app.get("/", (req, res) => {
res
.set("Content-Security-Policy", "default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'")
.send("<html><head></head><body></body></html>");
})
app.listen(port, () => {
console.log("Listening on port %s", port);
});
Then you can see the CSP in the response headers:
curl -v http://localhost:8080
* Rebuilt URL to: http://localhost:8080/
* Trying ::1...
* TCP_NODELAY set
* Connected to localhost (::1) port 8080 (#0)
> GET / HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.53.1
> Accept: */*
>
< HTTP/1.1 200 OK
< X-Powered-By: Express
< Content-Security-Policy: default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'
< Content-Type: text/html; charset=utf-8
< Content-Length: 39
< ETag: W/"27-ghawzGh2y9RPAcFY59/zgzzszUE"
< Date: Tue, 17 Nov 2020 00:01:04 GMT
< Connection: keep-alive
< Keep-Alive: timeout=5
<
* Connection #0 to host localhost left intact
<html><head></head><body></body></html>
The problem for me was the cheerio version. From 1.0.0-rc.12 to 1.0.0-rc.5 and worked fine after.
To use Google fonts in IdentityServer3, the following Content-Security-Policy never worked:
<meta http-equiv="Content-Security-Policy"
content=" style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
font-src 'self' 'unsafe-inline' https://fonts.gstatic.com data:">
Instead we configured the CspOptions in the idsrvApp.UseIdentityServer constructor which did work:
CspOptions = new CspOptions {
FontSrc = "https://fonts.gstatic.com",
StyleSrc = "https://fonts.googleapis.com",
Enabled = true
}
How can we configure CspOptions in IdentityServer4? I'm having trouble finding it.
For anyone else who gets stuck, the SecurityHeadersAttribute.cs file that comes with the IdentityServer4 quickstart files needs to be modified. Appending the following lines fixed it:
var csp = "default-src 'self'; object-src 'none'; frame-ancestors 'none'; sandbox allow-forms allow-same-origin allow-scripts; base-uri 'self';";
// These two lines enable google fonts
csp += "font-src 'self' https://fonts.gstatic.com;";
csp += "style-src 'self' https://fonts.googleapis.com;";
The file is located in quickstart/SecurityHeadersAttribute.cs
The goal is to setup special rules for svg files,
server {
add_header Content-Security-Policy "default-src 'none'; child-src https://www.youtube.com; font-src 'self' https://fonts.gstatic.com; frame-ancestors 'none'; frame-src https://www.youtube.com; img-src 'self'; media-src 'self'; script-src 'self'; style-src 'self' https://fonts.googleapis.com";
location ~ \.svg$ {
add_header Content-Security-Policy "default-src 'none'; frame-ancestors 'none'; style-src 'self' 'unsafe-inline'";
}
}
for the 1st rule, we can do
ctx.response.set('Content-Security-Policy', 'default-src ...');
How about the 2nd line for the svg files.
Just use regular expression
const svgPattern = /.+\.svg$/;
if (filename.test(svgPattern)) {
// add required header
}
I upgraded my Identityserver 4 to version 1.5.1 and now have content security policy errors.None of the solutions presribed so far has worked for me
I tried this
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline' https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js">
but nothing worthwhile is happening
In the IdentityServer4 Samples, the class SecurityHeadersAttribute.cs is responsible for sending the right CSP headers. You should only add the domain name:
var csp = "default-src 'self';" +
"img-src * 'self' data: https:;" +
"style-src 'self' ajax.aspnetcdn.com;" +
"font-src 'self' ajax.aspnetcdn.com;" +
"script-src 'self' ajax.aspnetcdn.com;"
// once for standards compliant browsers
if (!context.HttpContext.Response.Headers.ContainsKey("Content-Security-Policy"))
{
context.HttpContext.Response.Headers.Add("Content-Security-Policy", csp);
}
// and once again for IE
if (!context.HttpContext.Response.Headers.ContainsKey("X-Content-Security-Policy"))
{
context.HttpContext.Response.Headers.Add("X-Content-Security-Policy", csp);
}
As of this question Can't load facebook js sdk from Chrome extension
i trying basically the same thing
background.js
(function(d, s, id, debug){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "facebook-all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk', /*debug* / false));
window.fbAsyncInit = function() {
// init the FB JS SDK
alert('INIT SDK');
FB.init({
appId : 'xxxxxxxxxxx', // App ID from the App Dashboard
//channelUrl : '', // Channel File for x-domain communication
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
xfbml : true, // parse XFBML tags on this page?
});
FB.login(function(response) {
if (response.authResponse) {
alert('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
alert('connected ' + JSON.stringify(response, null, 4));
});
} else {
alert('User cancelled login or did not fully authorize.');
}
});
};
manifest.json
{
"name": "A browser action with no icon",
"version": "1.0",
"background": { "scripts":["background.js"]},
"permissions": [
"tabs",
"https://*/*",
],
"content_security_policy": "default-src https://connect.facebook.net/ https://s-static.ak.facebook.com/connect/ chrome-extension-resource: 'self' 'unsafe-eval' ",
"manifest_version": 2
}
but im getting the following erros on the console:
The "fb-root" div has not been created, auto-creating all.js:52
Refused to apply inline style because it violates the following Content Security Policy directive: "default-src https://connect.facebook.net/ https://s-static.ak.facebook.com/connect/ 'self' 'unsafe-eval'". Note that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
Refused to execute JavaScript URL because it violates the following Content Security Policy directive: "default-src https://connect.facebook.net/ https://s-static.ak.facebook.com/connect/ 'self' 'unsafe-eval'". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
Refused to execute JavaScript URL because it violates the following Content Security Policy directive: "default-src https://connect.facebook.net/ https://s-static.ak.facebook.com/connect/ 'self' 'unsafe-eval'". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
Refused to load the frame 'http://static.ak.facebook.com/connect/xd_arbiter.php?version=21#channel=f30…F_generated_background_page.html%3Ffb_xd_fragment%23xd_sig%3Df2c0b5eef8%26' because it violates the following Content Security Policy directive: "default-src https://connect.facebook.net/ https://s-static.ak.facebook.com/connect/ 'self' 'unsafe-eval'". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.
Refused to load the frame 'https://www.facebook.com/dialog/oauth?client_id=xxxxxxxxxxx&response_type=…4%26domain%3D<extension-id>%26relation%3Dparent&sdk=joey' because it violates the following Content Security Policy directive: "default-src https://connect.facebook.net/ https://s-static.ak.facebook.com/connect/ 'self' 'unsafe-eval'". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.
I know 'unsafe-inline' is not allowed anymore, so is there a way to make the fs-jssdk in a chrome extension to work?
Any help will be greatly appreciated!
obs: I was able to fetch the results from FB directly in the browser, but not in the extension.
You can enable styles and frames with following:
"content_security_policy": "default-src 'self' 'unsafe-eval' chrome-extension-resource: https://*.facebook.net https://*.facebook.com; style-src 'self' 'unsafe-inline' chrome-extension-resource: https://*.facebook.net https://*.facebook.com; frame-src 'self' 'unsafe-inline' chrome-extension-resource: https://*.facebook.net https://*.facebook.com",
but I'm not sure how to get rid of Refused to load the frame 'http://static.ak.facebook.com(...) error. Google chrome's CSP disallows allowing http:// domains, and without it there's no inframe communication so for example automatic resizing won't work.