Secure web page that contains insecure elements
Posted by on 16 July 2018 10:32 AM
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:
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.
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.
Note that this only works if the remote site also supports SSL connections.
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.