When a visitor requests a secure page (https://) on your site, browsers expect all elements (images, scripts, CSS, etc.) to load securely. If some resources load via http://, the page mixes secure and insecure content. This causes browser warnings and may compromise security.
Symptoms
-
Broken padlock icon in the browser’s address bar.
-
Warning messages such as:
-
Firefox: “The connection to this website is not fully secure because it contains unencrypted elements.”
-
Chrome: “This page includes other resources which are not secure. These resources can be viewed by others while in transit.”
-
Internet Explorer: “This webpage contains content that will not be delivered using a secure HTTPS connection.”
-
Cause
-
The page contains hyperlinks or embedded resources using
http://instead ofhttps://. -
Examples:
<img src="http://www.example.com/images/picture.jpg"> <script src="http://www.example.com/js/script.js"></script> <link rel="stylesheet" href="http://www.example.com/css/style.css">
Resolution Methods
Method 1: Use Content‑Security‑Policy (CSP) Header
Add the following to your server configuration or .htaccess file:
Apache
<IfModule mod_headers.c>
Header always set Content-Security-Policy "upgrade-insecure-requests;"
</IfModule>
This instructs browsers to automatically upgrade insecure requests to HTTPS.
Method 2: Use Meta Tag in Page Source
Add this line inside the <head> section of your HTML:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
Method 3: Update Resource Links
-
Replace all
http://references withhttps://. -
Ensure images, scripts, and stylesheets are served securely.
Notes
|
