Violates the following Content Security Policy directive - javascript

When I upload an image into my web application, it is showing the below error
Refused to load the image ' <URL> because it violates the following Content Security Policy directive: "default-src * data: 'unsafe-eval' 'unsafe-inline'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
I try to solve this error by using the following code
<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' *">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
But it is not working. How can I fix this problem?

I am not sure why you are using an "*". I am using a similar kind of stuff, but my meta tag looks something like this and it works fine for me:
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src 'self';font-src 'self'; img-src 'self' data: https:; style-src 'self' ; script-src 'self'">

Related

CSP, Refused to load the script, violates the following Content Security Policy directive: "script-src 'self'"

Can someone explain me how can i add CSP meta tag to my header?
i tried adding different meta tag to my header but i get more error from CSP
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https:*//api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js;">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data:gap 'unsafe-eval' ws: ; style-src 'self' 'unsafe-inline' script-src *; media-src *; font-src *; connect-src *; img-src 'self' data: content:;">
console error stack
It looks like you already have a published CSP via an HTTP header because a console error saying:
it violates the following Content Security Policy directive "default-src 'self'"
while your meta tag contains other default-src sources: default-src 'self' https:*//api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js
You can check the CSP response HTTP header that you have, the tutorial is here.
In this case by adding meta tag you'll have 2 CSPs which will work independently each other, therefore CSP in HTTP header will continue to block your scripts.
Node.js has a Helmet middleware in dependancies, Helmet 4 automatically publishes a default CSP via HTTP header. Check it.
In this case you have 2 opts:
disable Helmet's CSP: app.use( helmet({ contentSecurityPolicy: false, }) ); and use a meta tag.
configure CSP header via Helmet (preferred way).
BTW you have errors in the:
default-src 'self' data:gap 'unsafe-eval' ws: ; style-src 'self' 'unsafe-inline' script-src *; media-src *; font-src *; connect-src *; img-src 'self' data: content:;
data:gap is a wrong source, use data: or data: gap: depending on what you need.
missed ; before script-src

Cordova issue with $.getJSON API

I'm working on a developing an app for a university project using Cordova so it's my first time using it. As part of it, I've managed to implement an API from Reed Jobs and this is working fine in Chrome, however it won't work on the iOS emulator - there are no errors but the page just doesn't load any data.
I'm using $.getJSON("reed.php", function(data) in my JavaScript to call my data, and then my PHP is as follows...
<?php
$username = "username";
$password = "";
$remoteUrl = 'https://www.reed.co.uk/api/1.0/search?locationName=leeds&distancefromlocation=15&partTime=true&temp=true';
$opts = array(
'http'=>array(
'method'=>"GET",
'header' => "Authorization: Basic " . base64_encode("$username:$password")
)
);
$context = stream_context_create($opts);
// Open the file using the HTTP headers set above
$file = file_get_contents($remoteUrl, false, $context);
print($file);
?>
After reading some suggestions, I've tried adding <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 *;**script-src 'self' https://www.reed.co.uk/ 'unsafe-inline' 'unsafe-eval';** "> to my html page, but this presents me a list of errors in my console:
Unrecognized Content-Security-Policy directive '**script-src'.
Unrecognized Content-Security-Policy directive '**'.
Refused to load the script 'https://code.jquery.com/jquery-3.3.1.min.js' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
Refused to load the stylesheet 'https://use.fontawesome.com/releases/v5.6.3/css/all.css' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.
Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Poppins:300,500,700,900' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.
Refused to load the script 'https://code.jquery.com/jquery-3.3.1.min.js' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
Uncaught ReferenceError: $ is not defined
at index.js:31
Uncaught ReferenceError: $ is not defined
at window.onload
And then I also tried adding <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'; connect-src http://reed.co.uk https://reed.co.uk"> which gave me the error of:
Refused to connect to 'https://example.com/reed.php' because it violates the following Content Security Policy directive: "connect-src http://reed.co.uk https://reed.co.uk".
Can anybody help me? My understanding of the meta tags is not very established.
Your CSP is set to http://reed.co.uk https://reed.co.uk but your call points to https://example.com
Try this?
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'; connect-src http://reed.co.uk https://reed.co.uk https://example.com">

Content security policy. webcomponent. script src DataURI .Can I override HTTP HEADER by META tag?

I am is developing a plugin for Shopify CMS. This plugin use webcomponents.js to load Polymer scripts via
script.src = "data:text/javascript;charset=utf-8," + encodeURIComponent(scriptContent);
webcomponentsjs/src/HTMLImports/parser.js line 307
In FireFox I get the following errors:
Content Security Policy: The page’s settings blocked the loading of a resource at data:text/javascript;charset=utf-8,/**script code*/(“script-src https://domainurl https://* 'unsafe-inline' 'unsafe-eval'”)
The original Content security policy header (I can't change this header on the server, because Shopify is a hosted platform and I don't have any control on it)
Content-Security-Policy:
default-src 'self' https://*;
child-src 'self' https://* blob: data:;
connect-src 'self' https://* wss://*;
font-src 'self' https://* blob: data:;
img-src 'self' https://* blob: data:;
media-src'self' https://* blob: data:;
object-src 'self' https://* blob: data:;
script-src 'self' https://* 'unsafe-inline' 'unsafe-eval';
style-src 'self' https://* 'unsafe-inline';
I am trying to overload this header by meta tag
<meta http-equiv="Content-Security-Policy" content="
default-src * data: 'unsafe-inline' 'unsafe-eval';
script-src * data: 'unsafe-inline' 'unsafe-eval';
" />
Is it possible to overload header value by meta tag?
I found that I can't manage Content security policy.
I have patched webcomponents.js file.I had removed script.src = "data:text/javascript;charset=utf-8," + encodeURIComponent(scriptContent);.
Now I am loading script by script.textContent.

Error when CodePush (Cordova) meta tag is included

I have the next error showed in Chrome console :
Refused to execute inline script because it violates the following Content Security Policy directive: "default-src https://codepush.azurewebsites.net 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-gpnLwpFw97DB28/JjA3G79AHgq5DtCgFiFwjahrA1d4='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
Its happen when add this line to de index.html file :
***<meta http-equiv="Content-Security-Policy" content="default-src https://codepush.azurewebsites.net 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *" />***
Change meta tag to
<meta http-equiv="Content-Security-Policy" content="default-src https://codepush.azurewebsites.net 'self' data: gap: cdvfile: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline' https: http: wss: ws:; style-src 'self' 'unsafe-inline'; img-src * filesystem: cdvfile: data:; media-src * blob:">
has fixed this issue for me.

angular-google-analytics with phonegap issue, "Refused to load the script"

i have issues with google analytics, i am using this angular plugin angular-google-analytics.
and i see this error:
Refused to load the script 'http://www.google-analytics.com/analytics.js' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback
i noticed that when i remove this phonegap meta TAG from my header, i an NOT getting this error
<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 *">
i don't know what this meta TAG is for or how is important. ?
any way after the error is gone, i don't see anything in the realtime view
gameApp.controller('MainController', function($scope, $location, Analytics) {
$scope.$on('$routeChangeStart', function(next, current) {
Analytics.trackPage($location.path());
});
});
can you help me solve this issues.
thank you
This tag is important to prevent XSS or malicious 'foreign' scripts.
<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 *">
Have you tried inserting the following into the above content attribute:
script-src 'self' https://www.google-analytics.com/analytics.js 'unsafe-inline' 'unsafe-eval';
by whitelisting it specifically you should be able to load it.
In my angular apps I use the following code:
$rootScope.$on('$stateChangeSuccess', function(){
$window.ga('send', 'pageview', $location.$$path);
});
read
https://content-security-policy.com
https://www.w3.org/TR/2012/CR-CSP-20121115/#introduction

Categories

Resources