Reputation: 23

Integrating with web services in Electron

I'm brand new to Electron and I'm about to start development of a desktop application using Electron/AngularJS. The desktop application is just going to be GUI that interacts with a backend server via a RESTful web service and web sockets.

Now my question: what is the best way in Electron to issue HTTP requests to the web service and update the UI? In normal web apps I'd just interact with the web service directly using something like Angular's $http service. However, I'm unable to do this in Electron because the same-origin policy will block the request (from what I understand the renderer runs in the file:// origin so I cannot communicate with mysite.com).

I've come up with a couple of potential solutions, but they don't seem ideal:

Disable the same-origin policy issue by setting the BrowserWindow preference 'web-security' to false. This does not seem like a good idea because if I have any sort of cross-site scripting in my UI code, then the attacker can accessing any files on my box.
Proxy all my HTTP requests through the IPC interface. The main process can then make the HTTP requests without the restrictions of the same-origin policy. This just seems like overkill, though.

Am I missing a simpler solution?

Upvotes: 2

Answers (3)

maksbd19

Reputation: 3830

The view html file is loaded in electron via file protocol and ajax does not work in file protocol. In my case I setup an IPC event emitter in the html and an IPC event handler in the main process. Once I needed to make any http call I used the event emitter and then made the http request from the main process. After the request completed I made another IPC event from the main process and handled it in the html. I don't know if its the most elegant way but it worked in my case.

// sample code in the html

<script>
    const ipc = require("electron").ipcRenderer;

    function sendAjaxCall(params){
        // handle the params 
        // and make a ipc event to the main process
        ipc.send("call-AJAX", params)
    }

    // call the sendAjaxCall function somewhere with proper params

    ipc.on("complete-AJAX", function(evt, arg){
        // process your args and handle the return data
    })
</script>


// sample code in the main js file

const ipc = require("electron").ipcMain;
const request = require("request"); // request is not required, but I found it quite fascinating...


ipc.on("call-AJAX", function(evt, arg){
    // process the args and make the ajax call
    request("http://some-url.com/some/endpoint/", function(e, resp, body){
        // handle the response
        // send ipc event to renderer process
        ipc.send("complete-AJAX", resp)
    })
})

Warning This code above is just some boilerplate code to get you the basic idea. I found a great article on medium Electron’s IPC Modules and How to Use Them where you can get some basic understanding of IPC.

Further Resources-

Upvotes: 1