4 Solutions for Loading HTTP Resources on HTTPS Pages

Source | https://www.fly63.com

Switching to HTTPS may seem like a simple issue of domain pointing, perhaps we just need to redirect HTTP requests to the HTTPS address, and that would complete the switch. However, it’s not that simple.

When an HTTPS address loads HTTP resources, the browser considers these resources insecure and will block them by default, leading to incomplete resources. For example: images may not display, styles may not load, and JavaScript may not load.

Since style classes are usually written locally, they can often still work. However, some public JavaScript files are often hosted on CDN or other servers, and if they cannot be accessed, it may render the service completely non-functional. For instance, if jQuery fails to load, all operations and requests may become ineffective.

If a page on an HTTPS website requests JavaScript, CSS, images, and API resources over HTTP, an error message will appear:

module.exports = Config[Fix];Mixed Content: The page at 'https://www.fly63.com/***/' was loaded over HTTPS, but requested an insecure image 'http://www.fly63.co/***/img.jpg'. This content should also be served over HTTPS.

This is because HTTPS is HTTP over Secure Socket Layer, designed for security, so HTTP requests are not allowed on pages served over HTTPS. If they occur, a warning or error will be displayed.

Below are several solutions for your reference.

Method 1: Server-Side Header Setting

Fortunately, the W3C working group considered the difficulties of upgrading to HTTPS and released a draft for Upgrade Insecure Requests in April 2015. Its purpose is to allow browsers to automatically upgrade requests. We can add the following to our server’s response header: (Of course, if you cannot operate the server, another solution will be introduced below).

header("Content-Security-Policy: upgrade-insecure-requests");

Method 2: Page Meta Header Setting

Add a meta header in the page: (I use this method)

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

If there are many pages that need to be changed uniformly, we can add this statement to the global JavaScript file for global calls.

Method 3: Remove ‘http:’ from Links

This is the recommended method, which does not specify a specific protocol, allowing the resource protocol to adapt. For example, if the current page is HTTPS, then it uses HTTPS resources; if it is an HTTP page, then it uses HTTP resources. The specific method is super simple:

<script src='//cdn.bootcss.com/jquery/3.3.1/jquery.min.js'></script>

Method 4:

The most straightforward method is to directly copy the existing code and write two sets of code, one for HTTP and one for HTTPS, with each pointing to its respective service.

Learn More Skills

Please click the public account below