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">
Related
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
My chrome extension should fetch some remote resources from 3rd party API through HTTP request.
const getBoards = callback => {
fetch("https://gloapi.gitkraken.com/v1/glo/boards", {
credentials: "include"
})
.then(response => { ... })
.catch(err => { ... });
};
Unfortunately it throws the following error:
Refused to connect to 'https://gloapi.gitkraken.com/v1/glo/boards' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
After a bit of research, I found the chrome requirements to include the url in the manifest permissions and CSP string.
"permissions": [ ..., "https://gloapi.gitkraken.com/" ],
"content_security_policy": "default-src 'self' gloapi.gitkraken.com; script-src 'self' 'sha256-[...]'; style-src * 'unsafe-inline'; img-src 'self' data:;"
But instead of solving the first error these changes just caused another.
Ignored insecure CSP value "gloapi.gitkraken.com" in directive 'default-src'.
Is my CSP formatting wrong, or there's something else I should do in order to make this GET HTTP request work.
After a bit more of research I found a solution. The URL of the GitKraken API should be in connect-src property, instead of default-src. So my manifest now looks like this:
permissions: [ ..., "https://gloapi.gitkraken.com/" ],
"content_security_policy": "default-src 'self'; script-src 'self' 'sha256-[...]'; style-src * 'unsafe-inline'; img-src 'self' data:; connect-src https://gloapi.gitkraken.com/;"
More information:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src#Syntax
I am getting the following error while setting the content-security-policy.
Error:
Refused to connect to 'http://localhost:3000/articles' because it
violates the following Content Security Policy directive: "default-src
'self' 'unsafe-eval' ws:". Note that 'connect-src' was not explicitly
set, so 'default-src' is used as a fallback.
I am explaining my code below.
<meta http-equiv="Content-Security-Policy"
content="default-src 'self' 'unsafe-eval' ws:;
style-src 'self' 'unsafe-inline';
script-src 'self' http://localhost:4200 'unsafe-inline' 'unsafe-eval';">
In my code I am also connecting to json server to read/write the data into json file which run at http://localhost:3000/articles but here I am getting those related error and this is my angular4 code. I need some help to resolve this error.
If I understand your question right, I think your angular app runs on localhost:4200 and the API service on localhost:3000? This would explain why you have got that CSP warning as the request is from different source according to your current CSP configuration.
Also, ideally, the CSP should be delivered via HTTP header which means you will need some kind of server backing to support that. For example, you can have a ASP.NET app that hosts the angular app and the CSP then can be configured via web.config file.
In your case, if it's purely frontend, then perhaps you could alter your CSP setting to something like this. Hopefully it works for you.
<meta http-equiv="Content-Security-Policy"
content="default-src 'self' http://localhost:3000/ 'unsafe-eval' ws:;
style-src 'self' 'unsafe-inline';
script-src 'self' http://localhost:4200 'unsafe-inline' 'unsafe-eval';">
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.
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