How to fix mixing of secure and insecure content on a web page

Last modified: Tuesday November 28th, 2023

This article describes an issue that occurs when visitors to your website request a secure web page that contains insecure elements.

Problem

When visitors to your website request a page using a secure https:// connection, a broken padlock icon may appear in the web browser’s address bar. In addition, they may receive a warning message in their browser:

  • Mozilla Firefox:
    “The connection to this website is not fully secure because it contains unencrypted elements (such as images).”
  • Microsoft Internet Explorer:
    “Do you want to view only the webpage content that was delivered securely?
    This webpage contains content that will not be delivered using a secure HTTPS connection, which could compromise the security of the entire webpage.”
  • Google Chrome:
    “Your connection to example.com is encrypted with 256-bit encryption. However, this page includes other resources which are not secure. These resources can be viewed by others while in transit, and can be modified by an attacker to change the look of the page.”

Cause

This issue occurs because a web page contains hyperlinks to insecure elements. For example, consider a web page that contains the following HTML snippet:

<a href="http://www.example.com/images/picture.jpg">View my picture</a>

In this HTML snippet, the hyperlink references a non-secure http:// resource (a .jpg file). If a user requests this page using an https:// connection, the page itself is encrypted, but the hyperlinked image file is not. As a result, the page contains secure and insecure content, and the browser displays a warning message to the user.

This problem can occur with any type of hyperlinked resource file: a JavaScript library, a CSS file, etc.

Resolution

Consider ways to solve this problem:

1: Send a Content-Security-Policy response header directly from the web server

To resolve this problem, you can send a Content-Security-Policy HTTP response header. This header instructs web browsers to upgrade insecure requests to HTTPS.

For Apache web servers on Linux, add the following lines to the .htaccess file (or files) that you use on your website:

<IfModule mod_headers.c>
    Header always set Content-Security-Policy "upgrade-insecure-requests;"
</IfModule>

 

2: Send a Content-Security-Policy directive from page source files

Alternatively, you can use the following meta tag in the source files of your site pages:

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

More Information

If you need more information about the upgrade-insecure-requests directive, please visit https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests.

Looking for reliable protection for your site? Get the right level of website protection with our SSL options

Was this article helpful?
Views: 177

10 Years Beehosting!
Celebrate with 70% OFF + FREE Site Transfer.

Beehosting.pro website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Menu