Chrome Extension Post Data to Rails Server Cross-Origin XMLHttpRequest

Question

I'm currently trying to develop a chrome extension that can retrieve text from a https webpage to my server which only deals with http. I've looked into this tutorial and this question.

From these, I deduced that in order for me to have cross-origin xhr working, I need to

1. set manifest permissions to include the urls that I am targetting

For this, my permissions look like the following:

"permissions": [
    "tabs", "<all_urls>"
]

I had specific urls typed in but had to take them out after I've packed mine and change mine to be "< all_urls >".

2. create a XMLHttpRequest to the designated url

For this, excerpt of my code look like this:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
   if (xhr.readyState == 4 && xhr.status == 200) {
        document.getElementById("response").innerText = xhr.responseText;
        console.log(xhr.responseText);
   }
};
xhr.open("POST", MY_SERVER_URL, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(message.toString());

MY_SERVER_URL is a valid url that I've checked over and over but for many reasons I am unable to specify with this question ;(

message is an array that holds a series of different messages that I would like to send to my server.

3. pack my extension code and install it

Following the packaging guide from google, I have pacakged my folder into a .crx file and drag-dropped it into my chrome://extensions page for installation.

4. on my server, have rack cors gem installed.

I have the following line in my Gemfile in the server:

gem 'rack-cors', :require => 'rack/cors'

Yet, I still get the following error message when I try to send data to my server

Mixed Content: The page at MESSAGE_PARSING_URL was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint MY_SERVER_URL. This request has been blocked; the content must be served over HTTPS.

What could I be doing wrong? I would really appreciate any help. Thanks :D

Answer 1

If you're making an insecure (http) request from a content script of a secured page (https), then you'll get Mixed Content error.
You have 3 options to solve the problem:

1. Make secure requests from the content script to your server
2. Still use the insecure requests, but make them from the background script. And pass the result to your content script using message passing
3. Start chrome with --allow-running-insecure-content flag. But it's not a practical solution, useful only for development (when your staging is on http).

Answer 2

You should apply a certificate for your server and use https instead. According to W3C Recommendation for Cross-Origin Resource Sharing:

1. The origin of the resource blacklisted.
2. The origin of the resource is known to be part of an intranet.
3. The URL <scheme> is not supported.
4. https to http is not allowed.
5. https is not allowed because of certificate errors