How to show a recovered Blob from PouchDB attachment as ngSrc? - angularjs

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

Related

Refused to load the image because it violates Content policy

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.

SOLR: when trying to delete all documents, error response body is a html string. How can I get error expressed as json instead?

Trying to reset an index (delete all documents) via a POST request.
curl -X POST -H 'Content-Type: application/json' 'http://localhost:8983/solr/my_core/update?wt=json' --data-binary '
{
"delete": { "query":"*:*" }
}'
When there is an error, I don't get json string back in the body. Instead, I am getting html string
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Error 404 Not Found</title>
</head>
<body><h2>HTTP ERROR 404</h2>
<p>Problem accessing /solr/my_core/update. Reason:
<pre> Not Found</pre></p>
</body>
</html>
Is there a way I can get the error expressed as json in the response body instead?
Thank you!
The error message is telling you that the Solr installation and its core or handler wasn't found. The message is not generated as a result from your query; in that case it wouldn't be a 404. This is either created by having the wrong path (i.e. it's not /solr/) , the requested core (/my_core/), or the request handler (/update) not being found.
You might be on Windows and using single quotes under cmd - which will not do what you expect, and could up as part of the URL instead. Try with double quotes (") instead, and if that doesn't work, check that the URL works in your browser.
The error response is HTML so that it will display correctly in a browser. In other words, it's human readable.
The response code -- HTTP code 404 -- is the only part of that error which is meant for machine consumption.
The format of the response will only be whatever was requested (json by default in recent Solr versions) if the request succeeds. This one didn't succeed.

Refused to load the font ''data:font/woff;base64,...." in Ionic Framweork

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).

Ionic ng-pdfviewr

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'">

wpf webBrowser NavigateToString script error

I want to use the Wpf webBrowser control to render math equations.
I've downloaded MathJax, and included it in my Visual studio project.
I've tryed to load one of the MathJax example. This is the html code i'm using:
<!DOCTYPE html>
<html>
<head>
<title>MathJax MathML Test Page</title>
<!-- Copyright (c) 2010-2012 Design Science, Inc. -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="MathJax-Reduced/unpacked/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full"></script>
</head>
<body>
<p>
When
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>a</mi><mo>≠</mo><mn>0</mn>
</math>,
there are two solutions to
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>a</mi><msup><mi>x</mi><mn>2</mn></msup>
<mo>+</mo> <mi>b</mi><mi>x</mi>
<mo>+</mo> <mi>c</mi> <mo>=</mo> <mn>0</mn>
</math>
and they are
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mi>x</mi> <mo>=</mo>
<mrow>
<mfrac>
<mrow>
<mo>−</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>−</mo>
<mn>4</mn><mi>a</mi><mi>c</mi>
</msqrt>
</mrow>
<mrow> <mn>2</mn><mi>a</mi> </mrow>
</mfrac>
</mrow>
</math>
</p>
</body>
</html>
Everything is working fine with the following code:
string curDir = Directory.GetCurrentDirectory();
this.webBrowser1.Navigate(new Uri(String.Format("file:///{0}/test-1.html", curDir)));
But if i try this code:
string s = File.ReadAllText(Directory.GetCurrentDirectory() + "\\test-1.html");
this.webBrowser1.NavigateToString(s);
i get a Script Error:
An error has occurred in the script on this page.
Line: 1
Char: 1
Error: Syntax Error
Code: 0
URL: about:MathJax-Reduced/unpacked/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full
What's wrong? It would be really helpful to use something similar to the last code, so i can avoid to save a file just to load it...
Note that the URL in the error is about:MathJax-Reduced/unpacked..., which is an about URL not the file:// URL that you had in the first case. I suspect that is the cause of the problem. That suggests that the NavigateToString function is using about:blank or a similar URL as the base URL for the page, so MathJax is getting the wrong path to itself. Note that you lose the actual page location when reading it from the file and loading it as a string. That means you may have to load MathJax from an absolute URL rather than a relative one (i.e., include the file:// and path to the MathJax-Reduced directory).

Resources