jQuery Ajax Cross Domain Mixed Content. How is this happening? - php

Question

I am working on a Chrome Extension that will run on a 3rd party website. On page load it will make an API call to the 3rd party API and display some of the API information on the page.
Important bits of info
The extension will be running on https://app.example.com.
The API endpoints are under https://api.example.com.
I cannot modify the code or server configurations for either of the above.
Since my browser extension runs as if it were on the page it obviously introduces cross-domain ajax issues so to get around this I have put together a PHP script on https://forward.example.com. I can modify the code and server configuration for this.
https://forward.example.com
Purpose: To accept requests from any domain, and forward the request to the domain specified in the X-Destination-Url header. It should also respond back to the original request with the headers and content of the X-Destination-Url request.
forward.php
I know this is messy, but I just threw it together in a couple of minutes.
$headers = getallheaders();
$destinationKey = 'X-Destination-Url';
$destination = null;
$removeHeaders = array('Origin', 'X-Destination-Url', 'Referer');
if (array_key_exists($destinationKey, $headers)) {
$destination = $headers[$destinationKey];
unset($headers[destinationKey]);
}
foreach ($removeHeaders as $h) {
unset($headers[$h]);
}
$authTokenKey = 'X-Destination-Auth-Token';
$authToken = null;
if (array_key_exists($authTokenKey, $headers)) {
$authToken = $headers[$authTokenKey];
unset($headers[$authTokenKey]);
$headers['X-Auth-Token'] = $authToken;
}
if ($destination === null) {
die('Invalid X-Destination-Url');
}
$preparedHeaders = array();
foreach ($headers as $k => $v) {
$preparedHeaders[] = "{$k}:{$v}";
}
$responseHeaders = array();
function handleHeaderLine($ch, $headerLine)
{
global $responseHeaders;
$responseHeaders[] = $headerLine;
return strlen($headerLine);
}
$ch = curl_init();
// Note that at this point $destination == 'https://api.example.com'
$opts = array(
CURLOPT_URL => $destination,
CURLOPT_RETURNTRANSFER => 1,
CURLOPT_HEADERFUNCTION => 'handleHeaderLine',
CURLOPT_CUSTOMREQUEST => $_SERVER['REQUEST_METHOD'],
CURLOPT_HTTPHEADER => $preparedHeaders,
CURLOPT_SSL_VERIFYPEER => false,
);
curl_setopt_array($ch, $opts);
$resp = curl_exec($ch);
foreach ($responseHeaders as $header) {
header($header);
}
echo $resp;
die;
.htaccess
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, X-Auth-Token, X-Destination-Url, X-Destination-Auth-Token"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
Chrome Extension
The Chrome Extension just runs as javascript on-page.
This is the bit of code that interacts with the above.
$.get({
async: true,
url: 'https://forward.example.com/forward.php',
beforeSend: function(xhr){
xhr.setRequestHeader('X-Destination-Auth-Token', 'api-key ' + self.apiKey);
xhr.setRequestHeader('X-Destination-Url', 'https://api.example.com');
},
success: function (d) {
console.log(d);
}
});
When the above runs, Chrome spits out the following error...
Mixed Content: The page at 'https://app.example.com' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.example.com'. This request has been blocked; the content must be served over HTTPS.
Finally...
How on earth has https://api.example.com been changed to http://api.example.com?
At the point that forward.php makes the curl request to X-Destination-Url it is using the correct https url, and it is set up to accept any SSL Certificate, so I'm quite confused as to how this is happening.
Can anyone give me some insight into what's going on here?