I had a problem. I'm running an iframe tag in visual studio 2017 that uses cordava apache. When I run the app it doesn't show the webpage because something has blocked it or something like that.
When I check the log I see 2 errors:
- " Refused to frame 'https://googel.com/' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback. "
- " Failed to load resource: the server responded with a status of 404 (Not Found) "
These are 2 errors I get.
I had also changed my congif.xml and I have
<allow-navigation href="https://google.com" />
<access origin="https://google.com" />
and here's my iframe code.
<iframe src="https://googel.com"></iframe>
What is the problem? What should I do?
Thank you
Regards
UPDATE
After removing the mat security it worked. So I'll change my question:
Is removing the security meta bad for the application?
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
Thank you
Yes, you should comment out this meta section.
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
Related
I didn't used google tag manager url in my code but it still shows the ERROR and HERE is the Error.
ERROR
Refused to load the script 'https://consent.trustarc.com/v2/notice/jznryc' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' https://www.googletagmanager.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
this is the code i am using.
<meta http-equiv="Content-Security-Policy" content=
"default-src *;
style-src 'self' 'unsafe-inline' ;
script-src 'self' 'unsafe-inline' https://consent.trustarc.com ;
script-src-elem 'self' 'unsafe-inline' ">
The most likely explanation is that two (or more) policies are set. Something is setting another CSP, likely in a response header. You will need to find the policy and modify/remove it.
I'm trying to load SVG images and get a CSP error as follows:
I keep getting the error event when I added the meta tag:
<meta http-equiv="Content-Security-Policy" content="default-src *;img-src * 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *" >
The error that you can see tells you that the img-src was not set and it fallbacks to default-src even though that you have added meta tag with your CSP values.
This behaviour can be observed when the CSP header is already set via HTTP. You have to choose whether to set it via HTTP or as meta tag.
I got this error:
Refused to load the image 'blob:file:///cf368042-bf23-42b6-b07c-54189d3b0e01' because it violates the following Content Security Policy directive: "default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
While trying to load a mapboxGL map.
This is my CSP tag:
<meta http-equiv="Content-Security-Policy"
content="
worker-src blob:;
child-src blob: gap:;
default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
This is the fix for both image and base64.
Need to add img-src 'self' blob: data:; As follow:
<meta http-equiv="Content-Security-Policy"
content="
worker-src blob:;
child-src blob: gap:;
img-src 'self' blob: data:;
default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
You need to add img-src blob: in your CSP value.
Since img-src is absent, it is using default-src.
You can set img-src * also.
Please take a look at https://content-security-policy.com/ to check how to add CSP for image.
Normally,set img-src policy will fix the problem, but if you still get the same error.
Note that if you use the "helmet" middleware at the same time, your problem may come from it, and you need to configure it separately.
Add in content security policy
img-src 'self' 'unsafe-inline' blob: data: 'unsafe-eval';
I have a CSP meta tag that looks like so:
<meta http-equiv="Content-Security-Policy"
content="font-src 'self' 'unsafe-inline' data:;
img-src 'self' data:;
style-src 'self' 'unsafe-inline' data:;
script-src 'unsafe-eval' 'unsafe-inline' data:;
default-src 'self' localhost:*">
And I have a local JavaScript file reference inside the body tags:
<script src="js/video.min.js"></script>
And a local stylesheet file reference in the header tag:
<link href="css/video-js.css" rel="stylesheet" />
However, I'm getting the following errors in my browser refusing to load the script or a font from the CSS file.
Refused to load the script 'https://localhost:44356/js/video.min.js' because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' 'unsafe-inline' data:". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
2testvideo.html:1 Refused to load the font 'data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABDkAAsAAAAAG6gAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZRiV3hY21hcAAAAYQAAADaAAADPv749/pnbHlmAAACYAAAC3AAABHQZg6OcWhlYWQAAA3QAAAAKwAAADYZw251aGhlYQAADfwAAAAdAAAAJA+RCLFobXR4AAAOHAAAABMAAACM744AAGxvY2EAAA4wAAAASAAAAEhF6kqubWF4cAAADngAAAAfAAAAIAE0AIFuYW1lAAAOmAAAASUAAAIK1cf1oHBvc3QAAA/AAAABJAAAAdPExYuNeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGS7wTiBgZWBgaWQ5RkDA8MvCM0...2DDXbYkhKc+V0Bqs5Zt9JM1HQGBRTm/EezTmZNKtpcAMs9Yu6AK9caF76zoLWIWcfMGOSkVduvSWechqZsz040Ib2PY3urxBJTzriT95lipz+TN1fmAAAAeJxtkMl2wjAMRfOAhABlKm2h80C3+ajgCKKDY6cegP59TYBzukAL+z1Zsq8ctaJTTKPrsUQLbXQQI0EXKXroY4AbDDHCGBNMcYsZ7nCPB8yxwCOe8IwXvOIN7/jAJ76wxHfUqWX+OzgumWAjJMV17i0Ndlr6irLKO+qftdT7i6y4uFSUvCknay+lFYZIZaQcmfH/xIFdYn98bqhra1aKTM/6lWMnyaYirx1rFUQZFBkb2zJUtoXeJCeg0WnLtHeSFc3OtrnozNwqi0TkSpBMDB1nSde5oJXW23hTS2/T0LilglXX7dmFVxLnq5U0vYATHFk3zX3BOisoQHNDFDeZnqKDy9hRNawN7Vh727hFzcJ5c8TILrKZfH7tIPxAFP0BpLeJPA==' because it violates the following Content Security Policy directive: "font-src *".
The first script doesn't violate the Content Security Policy as far as I can tell and there isn't any documentation describing 'script-src-elem' anywhere I can find (this may be a clue).
As far as the font in the CSS, there's appears to be a bug in the browsers as there was no CSP directive that looks like "font-src *" - so, somehow the browser is overriding this CSP (or it's just a bug).
Regardless, been hair pulling trying all sorts of combinations (I can't put 'self' in the script-src, for example or more errors show up). It doesn't make any sense!
Here's the complete HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Security-Policy" content="font-src 'self' 'unsafe-inline' data:; img-src 'self' data:; style-src 'self' 'unsafe-inline' data:; script-src 'unsafe-eval' 'unsafe-inline' data:; default-src 'self' localhost:*">
<title></title>
<link href="css/video-js.css" rel="stylesheet" />
</head>
<body>
<video id='my-video' class='video-js' controls preload='auto' width='640' height='360'
poster='/videos/Factory_Clearance30_03_16.jpg' data-setup='{}'>
<source src="/videos/Factory_Clearance30_03_16.webm" type="video/webm">
<source src="/videos/Factory_Clearance30_03_16.ogv" type="video/ogg">
<source src="/videos/Factory_Clearance30_03_16.mp4" type="video/mp4">
</video>
<script src="js/video.min.js"></script>
</body>
</html>
The first script doesn't violate the Content Security Policy
The policy says:
script-src 'unsafe-eval' 'unsafe-inline' data:;
You load the script with:
<script src="js/video.min.js"></script>
So, let's check each in turn:
Is it unsafe-eval? No, you aren't using eval() or anything similar to load the script. It is a src attribute.
Is it unsafe-inline? No, it isn't inline; it's a src attribute.
Is it data:? No. It's a relative URL and you can't be relative to a data: scheme URL. You're probably using http:.
So it definitely does violate the CSP.
Likely you want to add 'self' to the allowed origins.
As far as the font in the CSS, there's appears to be a bug in the browsers as there was no CSP directive that looks like "font-src *" - so, somehow the browser is overriding this CSP (or it's just a bug).
The most likely explanation for this is that you are providing a CSP via HTTP headers and <meta> and the HTTP headers are given priority (because the specification requires that).
I have an app, in which the user would be able to copy an image URL, paste it unto an input and the image will be loaded on a box.
But my app, keeps triggering this message:
Refused to load the image 'LOREM_IPSUM_URL' because it violates the following Content Security Policy directive: "img-src 'self' data:".
That's my meta tag:
<meta http-equiv="Content-Security-Policy" content="default-src *;
img-src 'self' data:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
style-src 'self' 'unsafe-inline' *">
I'm using html2Canvas within the app, and when I remove this: "img-src 'self' data:"
It fires this error:
html2canvas.js:3025 Refused to load the image 'data:image/svg+xml,
<svg xmlns='http://www.w3.org/2000/svg'></svg>' because it violates
the following Content Security Policy directive: "default-src *".
Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
Along with a bunch of other errors.
Try replacing this part:
img-src * 'self' data: https:;
So the complete tag:
<meta http-equiv="Content-Security-Policy" content="default-src *;
img-src * 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
style-src 'self' 'unsafe-inline' *">
Content Security Policy Reference
img-src * 'self' data: https:; is not a good solution as it can make your app vulnerable against XSS attacks. The best solution here should be: img-src 'self' data:image/svg+xml. If it doesn't work try: img-src 'self' data:Consider changing it if you still have your directive as img-src * 'self' data: https:;
For helmet users.
Better practice instead of setting contentSecurityPolicy to false which should be the most last option. I used this in my app and it solves the issue very well. My app is hosted here. Checkout my source code here.
app.use(
helmet.contentSecurityPolicy({
useDefaults: true,
directives: {
"img-src": ["'self'", "https: data:"]
}
})
)
In addition to what has been contributed above by #manzapanza, you need to make sure if the CSP hasn't been configured in your application's web config file because if the setting exists it will override your meta tag setting in your index file like in the example below:
Index meta tag:
<meta http-equiv="Content-Security-Policy" content="default-src *;img-src * 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
Being overridden by a CSP setting in your web config file.
Web config setting:
<add name="Content-Security-Policy" value="default-src https: http: 'unsafe-inline'; img-src * 'self' data: https:;" />
In a case like this, consider having one set mostly in the system's web config file.
I was facing this same issue with my jspdf and html2canvas. I had used nginx too, and had configured "Content-Security-Policy" in my "conf/nginx-template.conf" file. Below changes fixed it for me:
add_header Content-Security-Policy <...>; img-src 'self' data: https:; frame-src 'self' data:;
If img-src 'self' data: is not working for you because you manipulate image with JavaScript, try also adding blob objects with img-src * 'self' data: blob: ;
This simply solves the problem:
img-src 'self' data:
But ensure multiple directives are separated using a semicolon (;)