Knowledgebase
Secure Web Page That Contains Insecure Content
Posted by on 16 July 2018 10:32 AM

When visitors access to your website request a page using a secure https:// connection, a broken padlock icon may appear in the web browser's location bar. This happen when content on a secure website is being loaded through a non-secure source. An example would be an image or some JavaScript that is still being loaded via HTTP. As such, visitors will get following warning message:

Internet Explorer
“This page contains both secure and non-secure items. Do you want to display the non-secure items?”

Google Chrome
“This page contains 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.”

Mozilla Firefox
Users will not receive an error, the browser will just show a red line through the padlock.

Safari
Users will not receive an error, a Yellow Padlock icon will appear when the address bar is clicked.


Troubleshooting Insecure Content

This problem occurs if 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, and so on.


Resolving Insecure Content

To resolve this problem, use either of the following methods.

Method 1: Use relative links

You can use relative links in hyperlink URLs to prevent browsers from displaying warning messages about insecure content. For example, we could rewrite the above HTML snippet as follows:

    <a href="/images/picture.jpg">My picture</a>

Because the image file is referenced by a relative link instead of the explicitly insecure http:// URL as above, the browser does not warn users about mixed secure and insecure content.

You may have HTML code that references a resource on another domain (such as a JavaScript library or CSS file). In this scenario, you clearly cannot use a relative link to the external resource. Instead, you can replace any http:// references with secure ones so they loaded through https://. For example, if you want to use a lib.js file hosted on the example.com domain in your own web pages, you could use the following code:

    <script type="text/javascript" src="https://example.com/lib.js" />

Note that this only works if the remote site also supports SSL connections. If content can’t be loaded securely, you shouldn’t be loading it, lest you continue to get security warnings.

Method 2: Redirect all requests to SSL connections

An alternative method is to redirect all user requests to SSL connections. Using this method, even if a user specifies a non-secure URL like http://example.com/page.html, they are automatically redirected to https://example.com/page.html.

(0 vote(s))
Helpful
Not helpful

Comments (0)
Copyright © 1998 - 2021 Shinjiru International Inc. All Rights Reserved.