I'm using the angular d3 package to place charts into my app and am getting the error shown at the bottom:
A couple things that did not yield results:
Setting a nonce on the content security policy of the server response header as script-src 'self' nonce-nRfqpuKWNuYyUAFPTr6WVNZk9 and passing it in as nonce="nRfqpuKWNuYyUAFPTr6WVNZk9" on the script tag of the nvd3 javascript package import which I am hosting. See here
Setting a nonce on the content security policy of the header as style-src nonce-nRfqpuKWNuYyUAFPTr6WVNZk9 and passing it in to the associated nvd3 stylesheet import
Including the ngCsp package and importing the angular-csp.css per the angular docs
Any ideas on how to get around this issue?
nv.d3.min.js:3 Refused to apply inline style because it violates the
> following Content Security Policy directive: "style-src 'self'
> nonce-nRfqpuKWNuYyUAFPTr6WVNZk9". Either the 'unsafe-inline' keyword,
> a hash ('sha256-Sd940mhg11baB1cb1LWCO1WC3mgZyv2jlD9Z3wJqMoQ='), or a
> nonce ('nonce-...') is required to enable inline execution. (anonymous
> function)
># nv.d3.min.js:3a.dom.write
># nv.d3.min.js:3c
># nv.d3.min.js:3(anonymous function)
># nv.d3.min.js:6t
># d3.min.js:1m
># nv.d3.min.js:3(anonymous function)
># d3.min.js:1
Related
I've been stuck with this for days and finally decided to ask out. I've read dozens of issues, pages here but none of them solved my problem. I have an application built on top of this boilerplate: https://github.com/codesbiome/electron-react-webpack-typescript-2022 (the boilerplate isn't important as much, but there are some webpack configs there). I've read the documentation and it says that I should define a protocol for rendering images in this case, like this
app.whenReady().then(() => {
protocol.registerFileProtocol('atom', (request, callback) => {
const filePath = url.fileURLToPath(
'file://' + request.url.slice('atom://'.length),
);
callback(filePath);
});
});
This responds with an error "refused to load resource", even with content security policy set like this:
<meta
http-equiv="Content-Security-Policy"
content="
worker-src atom:;
child-src atom: gap:;
img-src 'self' atom: data:;
default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:"
/>
If I change atom to something like blob or file it errors with "it is not allowed to load resource".
I'm rendering it inside react, like this
const image_path = `atom://${image.path}`;
<img src={image_path} />
Turning off security doesn't work, and even if it did I don't find it as an acceptable answer. I'm trying to read the file off of the local machine and I've looked up how some other applications that use electron are doing it (by uploading it to their servers). But I'm still wondering if something like this was even possible without an additional server as I want the app to work offline. Thank you.
I'm getting this error in the console:
Refused to load the font 'data:font/woff;base64,d09GRgABAAAAAGVUABEAAAAAxuQAAQABAAAAAAAAAAAAAAAAAAAAA…eLo4GBkcWhIzkkAqQkEggceHw5HFkM2VRZJFlYebR2MP5v3cDSu5GJwWUDW9xG1hQXAFAmKZU=' because it violates the following Content Security Policy directive: "font-src *".
My Content-Security-Policy meta tag looks like this:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; font-src *; script-src * 'unsafe-inline' 'unsafe-eval'; child-src *">
What would be the issue?
Star isn't quite the wildcard you'd think it is in Content Security Policy. You have to manually specify certain directives including data: and blob:. Star will match any domain but not any protocol.
Adding data: to font-src list will let the font load. (Additionally I would remove the asterisk to trust as few things as possible).
I am having a hard time showing a blob as ngSrc following the PouchDB's Working with attachments Page. My pertinent html is:
<img src="" ng-src="{{$root.images.myImgNameX}}" alt="">
it gets compiled into this:
<img src="http://localhost:8100/fcba0867-bf49-4fe0-b4f2-3490bb65761f" ng-src="blob:http://localhost:8100/fcba0867-bf49-4fe0-b4f2-3490bb65761f" alt="">
But the image is not showed. But if I copy and paste the url in ng-src I can see the image.
I get this error:
:8100/#/app/news:1 Refused to load the image 'blob:http://localhost:8100/754f38af-0246-4b33-85c9-049f6d9ce1df' because it violates the following Content Security Policy directive: "img-src 'self' data: *".
How can I use that blob in my img tag?
I found a solution looking into the error here : Content-Security-Policy object-src blob
I Added img-src 'self' blob: to my <meta http-equiv="Content-Security-Policy"> tag
In chrome app I am trying to load images from external link but getting error
Refused to load the image
'unsafe:https://www.google.co.in/images/srpr/logo11w.png' because it
violates the following Content Security Policy directive: "img-src
'self' blob: filesystem: data: chrome-extension-resource:
I already added content_security_policy in manifest.json file
"content_security_policy": "img-src 'self' https://www.google.co.in/ blob: filesystem: data: chrome-extension-resource:;"
and
also explicitly added URL protocols to Angular's whitelist using a regular expression
.config(['$compileProvider',
function ($compileProvider) {
var currentImgSrcSanitizationWhitelist = $compileProvider.imgSrcSanitizationWhitelist();
var newImgSrcSanitizationWhiteList = currentImgSrcSanitizationWhitelist.toString().slice(0, -1)
+ '|chrome-extension:'
+ currentImgSrcSanitizationWhitelist.toString().slice(-1);
console.log("Changing imgSrcSanitizationWhiteList from " + currentImgSrcSanitizationWhitelist + " to " + newImgSrcSanitizationWhiteList);
$compileProvider.imgSrcSanitizationWhitelist(newImgSrcSanitizationWhiteList);
}
]);
but still error is there.
You cannot override CSP for Chrome Apps (that key is only for extensions).
You will need to adapt your App to fetch then locally cache the images - you can't embed them directly. See Google's guide on Referencing external resources.
Also, take another look at this question - if you're getting unsafe: in your URLs you aren't doing it correctly.
I'm getting the following error in one of my functions on ionic:
Error: [$interpolate:interr] Can't interpolate: {{detailMl.file}}
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. URL: http://192.168.1.105/sonschool/upload/mm_learning/44ec994b4e8892932d979ac93d045fa0.pdf
http://errors.angularjs.org/1.3.13/$sce/insecurl?p0=http%3A%2F%2F192.168.1.…%2Fsonschool%2Fupload%2Fmm_learning%2F44ec994b4e8892932d979ac93d045fa0.pdf
http://errors.angularjs.org/1.3.13/$interpolate/interr?p0=%7B%7BdetailMl.fi…school%252Fupload%252Fmm_learning%252F44ec994b4e8892932d979ac93d045fa0.pdf
at REGEX_STRING_REGEXP (ionic.bundle.js:8890)
at parseStringifyInterceptor (ionic.bundle.js:19022)
at regularInterceptedExpression (ionic.bundle.js:21679)
at Object.expressionInputWatch (ionic.bundle.js:21583)
at Scope.$get.Scope.$digest (ionic.bundle.js:23062)
at Scope.$get.Scope.$apply (ionic.bundle.js:23333)
at done (ionic.bundle.js:18486)
at completeRequest (ionic.bundle.js:18676)
at XMLHttpRequest.requestLoaded (ionic.bundle.js:18617)
help me please..
this code work :
$scope.pdfURL = "school.pdf";
and then i change this code with:
var baseUrl = 'http://192.168.1.105/sonschool/api/';
$http.get(baseUrl+'ambilDetailML/?id='+$stateParams.mlId).success(function(dataML) {
//console.log(dataML);
$scope.pdfURL = dataML.url_pdf;
});
Any idea about what might be causing the error?
In order to be able to use external resource you have to whitelist them (that's why the local 'school.pdf' file works and the one using IP doesn't). The tutorial on how to do this can be found here.
But, shortly, you should install the cordova-plugin-whitelist plugin and add
the following to your www/index.html file right below the other meta tags:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">