Load a PDF document from remote server into base64 encoded data - javascript

Is there any any option available to load a PDF from a website (e.g. http://mywebsite.com/mydoc.pdf) and read it into base64 (or) binary data using javascript. The XHR (ajax) request not helps me due to cross domain scripting restrictions. The HTML5 FileReader API works with user file input control. I could not think of any other option. Any ideas greatly appreciated. Thank you.

As you have said there are cross domain restrictions that prevent you from downloading any old file from another domain. There are a couple of ways round this.
If the server you're downloading from supports CORS requests then you should be able to download the file as a binary object. If you're downloading from a server you control then you could update it to support CORS requests.
If CORS support on the originating server isn't an option then you could create a proxy on your server to download the PDF and pass it on to the client. Either host it on the same domain or make sure it supports CORS requests from your domain.

Related

API request to a local client page

Could you please advise on the following?
Let's assume I have a local html page stored on my local drive "c:\test.html".
If I open it in a browser, it's treated as a GET request to this page, right?
Is it possible to send, for example, POST request to the same local page, with "fetch"?
And inside "c:\test.html" to check if it was requested with POST method, return something?
It would be something like a local-PC API.
Static HTML pages do not have any request capabilities. What's actually happening here is that there is some sort of server that takes your request and responds with the HTML document. You would need to host your own server of some sort that could take and respond to requests. For this, libraries like express.js work well.
Edit: If you are accessing it through a file:// url, your browser is just reading the file off your drive directly, so you would need some sort of localhosted server.
This is not how it works. When you open a file with your browser, it uses a file protocol, not a HTTP protocol. Look at the URL. You'll see what kind of protocol was used to retrieve the resource.
So no, you cannot sent a fetch request to a local file. You have to establish a proper sever in your localhost and let it handle requests. Local files do NOT handle requests. Servers do.

Are there any CORS workaround without server side change in Javascript?

I am trying to access a publicily shared google drive video file from my react website , since google drive file is not a absolute downloadable file,I am trying to play google drive video with a Custom Player ,so before showing the video in the player , I need to extract absolute file url with an XHR request.But I cannot access googledrive.com with XHR beacause it will only get CORS errors.Is there a way to request other server domains from a client domain without any serverside changes?
Short Answer
No. It's impossible to get around CORS without modifying server-side code.
Long Answer
CORS (Cross Origin Resource Sharing) is a browser's way of letting developers connect to external APIs from your website.
But that is an obvious security risk, not all APIs are meant to be public. To fix this risk, CORS only allows you to communicate to servers that have CORS enabled.
Unless the owners of the server suddenly decide to enable CORS, you cannot make a request from your website to the server.
The only way
The only way to achieve your goal is to send the request from a server. When making requests from server to server, there is no CORS (it only exists on browsers).
You would have to create a server yourself, make the request there, and send the response to the client.

Resolve cross-origin issue without proxy

I'm trying to make a webservice call from an html page to the server using XmlHttpRequest. What is the easiest way to get around the cross-domain issue without using a proxy? The remote server takes XML as the request and the response is also in XML. I have access to the server (IIS). I'll need to do GET and POST across the domains. Here's what I've researched so far -
Crossdomain.xml
CORS
JSONP
Is Crossdomain only for for flash players and stuff? CORS kind of seems hard to implement for BOTH client and server. Can JSONP be used for POST?
Thanks for any help.
Edit: I'm trying to run this on a smart device.
It depends on the version of IIS you are using.
At this URL, http://enable-cors.org/ they describe the solutions which you can take to enable Cross Domain access.
For example calling a Data Service www.abc.com/Service from www.zzz.com can be done by enabling a cross domain protocol.
Note that the method for configuring IIS6 and IIS7 / 8 are different.

Intercepting image load request of the browser

I would like to know if there is a way to intercept the image loading requests of a browser and add some request headers expected by the server.
The actual scenario is this. The web app sends an XHR to the server and completes an authentication handshake. All the subsequent requests have to include the auth header. The images are broken because the browser does not send the headers for the image requests.
Thanks in advance.
You can request the image using AJAX with the appropriate headers. Then you must base64 encode the image binary and insert it into the DOM by setting
<img src="data:image/png;base64,[base64 encoded image]" />
There is a way to intercept image requests in the browser: checkout the Capturing API in Mobify.js: https://hacks.mozilla.org/2013/03/capturing-improving-performance-of-the-adaptive-web/
No, there is not a way to do that, and it's a very good thing too.
(Well, there's no way to do it from your code. The browser owner can install a tool that alters requests if they so desire, of course.)
The fact that browsers issue HTTP requests for scripts and images in their own strict ways means that a site using XHR can prevent some kinds of CSRF attacks (cross-site request forgery) by having the server refuse certain requests if they don't include a special header that the site's own XHR code adds.
You can't control exactly what a browser does to the header with form posts, either.

How to specify an external website for XMLHTTPRequest

When using an XMLHTTPRequest in javascript, I want to send it to an external website, rather than the one where the .js file is hosted. To send it to test.php on the current server, I would use
request.open("POST", "test.php", true);
but for the second arguemnt, how do I send it to another website. "example.com/test.php" looks for a file on the current server, and "http://example.com/test.php" justseems to outright fail.
You can't for security reasons. See the same origin policy for JavaScript.
There are some workarounds that exploit browser bugs or corner cases, but using them is not recommended.
The best approach is having a server-side proxy that receives Ajax requests, and in turn, sends HTTP requests to other servers. This should be carefully implemented by sanitizing input and whitelisting the types of requests that are sent, and the servers that are contacted.
This sounds like a bad case of Same Origin Policy, my friend :)
You can't (for the most part) use XmlHttpRequest to get data from an external website. What you can do, however, is dynamically create a SCRIPT tag and reference an external address. jQuery wraps this functionally as part of its ajax handling.
Indeed you can. Not in any browser although.
In Internet Explorer 8.0 there is XDomainRequest, an object enabling cross-domain requests. You would need to properly handle request made with this object on server by sending Access-Control-Allow-Origin header first with "*" or requester domain name.
Since you are doing some hacky things anyway, why not trying to use it on IE8 first?
If you have control over the server, you can use this header in the HTTP reply, although it may not work with all browsers.
Access-Control-Allow-Origin: *

Categories

Resources