Load mixed content on page load with Javascipt

Question

Modern browsers are constantly forcing https for all situations.

Issue: Need to load mixed content

Before the https requests were being force, I could use JS to force the page to reload as http for the camera part of the page. It's no longer working in many browsers. I have tried all of the easy basic javascript tricks but they have all failed. I'm using squarespace so I can't override the browser requests server side.

Currently, if the page loads as http: it does the following:

displays a Image from the camera over static IP: http://96.57.87.254:91/live/1/jpeg.jpg with the option to click on a button which goes to another page that loads the RTP video stream.

My only thoughts are to

1. Force the page down to http, but the browser ignores the protocol and loads the page say http://google.com as https no matter what.

2. Use a CORS proxy for the http content parts? I am not sure how to get that to work with a static IP

3. Use some 3rd party webste to host it as https.

I'm hoping someone can help me solve one of these or suggest something else.

For example this fails:

<script> 
if (!(window.location.href.indexOf("squarespace") > -1) && (location.protocol == 'https:')) {
    alert("Cameras require that your browser use http connection, switching to it now");
    var URL = 'http://URL.org/'
    var httpAnchor = document.createElement('a');
    httpAnchor.href = URL;
    
    // Trigger a click on the anchor element
    httpAnchor.click();
}


</script>

This for example also fails:

    if (!(window.location.href.indexOf("squarespace") > -1) && (location.protocol == 'https:')) {
    alert("Cameras require that your browser use http connection, switching to it now");
    var URL = 'http://URL.org'
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    xmlhttp.open("GET", URL, true);
    xmlhttp.send();
}

Answer 1

As pointed out by Peter, this cannot be solved with JavaScript, especially on the client side only.

You are already on the right track to use some 3rd party website to host the image as https or using a CORS proxy. Here are your options:

Use a 3rd party website to host it as https

This is the simplest and quickest option, you can use wsrv.nl (not affiliated) to essentially proxy your image through their CDN. You will load your image as follow

<img src="https://wsrv.nl/?url=http://96.57.87.254:91/live/1/jpeg.jpg" />

But this has it's caveats, their CDN caches image for at least 7 days. So depending on your requirements, this may or may not be suitable.

We cache images in different ways, depending on the rate of requests, no more than 31 days, and most often at least 7 days.

Reference: https://wsrv.nl/faq/#how-are-images-cached-by-your-servers

Use a CORS proxy for the http content parts

For this you can either use a self-hosted (cors-anywhere) or a hosted CORS proxy (Corsfix). When you request the image from the client, the CORS proxy will relay the request and return it in HTTPS.

Similar with the previous example, you will add the service URL before the target url.

<img src="https://proxy.corsfix.com/?http://96.57.87.254:91/live/1/jpeg.jpg". 
  crossOrigin="anonymous"
/>

(The crossOrigin="anonymous" attribute is to tell the proxy which Origin requested the resource, this is usually for allowlist validation. But it will depend on which CORS proxy you use.)

---

Here is how it will look, comparing the original http, CORS proxy, and wsrv.nl

• As expected the original HTTP didn't load due to Mixed Content
• The CORS proxy shows the image, with the current timestamp following the original image
• The wsrv.nl also shows the image, but due to cache, the image does not show the current timestamp

(I am affiliated with Corsfix)