This article describes an issue that occurs when visitors to your web site request a secure web page that contains insecure elements.
When visitors to your web site request a page using a secure https:// connection, a broken padlock icon may appear in the web browser's location bar. Additionally, they may receive a warning message in their browser:
This problem 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.
There are a few ways you can resolve this problem:
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>
For IIS web servers on Windows, in IIS Manager use the HTTP Response Headers tool to add the following custom header:
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">
For 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.