"mixed content blocked" when running an HTTP AJAX operation in an HTTPS page

web-development

mixed-content

https-implementation

security-best-practices

byNikita Barsukov·Jan 20, 2025

Fix "Mixed content blocked" by making AJAX requests to HTTPS on your HTTPS page. Browsers block HTTP content on safe, HTTPS pages. If the service you request lacks HTTPS, use a server-side proxy. Your AJAX should look like this:

$.ajax({
  url: "https://your-secure-api.com/data",
  success: function(data) { // when you're on a roll
    console.log(data);
  },
  error: function() { // or when life gives you lemons
    console.error("Request failed");
  }
});

If you're unable to modify the external resource to use HTTPS, your server could create a proxy to relay the HTTP response over an HTTPS connection.

Making Server-Side Secure

Server-side scripting is a versatile tool. By creating a PHP proxy, you enable your server to handle HTTP API calls safely. Essentially, it acts as a translator between the client and the HTTP destination, sending data securely via HTTPS.

Header Upgrades for Security

HTTP security headers like Content-Security-Policy are vital security measures. Add the upgrade-insecure-requests directive to auto switch HTTP into HTTPS. Add this using a <meta> tag:

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

Or by amending the settings of your server such as nginx:

add_header Content-Security-Policy "upgrade-insecure-requests"; //We got 'em now, boys!

The header instructs browsers to silently upgrade insecure requests, taking load off you!

Protocol Alignment for APIs

Ensure alignment between your website and API endpoints. You should consider the following steps:

Ensure the API provider supports HTTPS.
Dodge services that only offer HTTP to keep your site's suit of armor intact.
Amend your site as a last resort. This is because it opens Pandora's box on security risks.

Security Pre- Submission

Help or at least encourage third-party services to embrace HTTPS. If the service is unattainable, use cURL or similar features to send data securely server-side. Better safe than sorry, right?

Reinforced Content Delivery

The add_header directive and the proxy_set_header are handy tools in nginx. They ensure your content delivery remains on point and secure. It's analogous to security personnel guarding a VIP!

HTTPS Implementation in the API

Ensure that the API endpoint uses HTTPS. For nginx users, this implies setting SSL certificates correctly in addition to configuring the server block to efficiently handle HTTPS requests.

Decoding Browser Signals

Leverage browser developer tools, especially the Network tab, to recognize mixed content issues. This gives you the latitude to investigate each individual request, thereby understanding why certain content gets blocked, and resolving it.

Security Implications

Mull over the security implications ahead of implementing any schemes like upgrade-insecure-requests. Doing so prevents your web content from any unforeseen vulnerabilities caused by blind upgrading.

explain-codes / Web development / "mixed content blocked" when running an HTTP AJAX operation in an HTTPS page

Linked

How does Content Security Policy (CSP) work?



How to allow http content within an iframe on an https site



Detect HTTP or HTTPS then force HTTPS in JavaScript



External resource not being loaded by AngularJs



How to render string with html tags in Angular 4+?

