Post Secure Content With an SSL
If the page you wish to make secure has already been designed, the hard work is behind you. However, if your designer has used incorrect coding, you may need to correct some of the HTML to ensure that URLs work properly. Your content should load securely when using the https address (URL).
One of the most commons issues that may prevent an SSL secured site from properly displaying a padlock is when the page contains links to content that is not secure. For example, if your website is visited securely at https://domain.com/ and the page uses the following code to load your logo:
Because this code specifies HTTP instead of HTTPS, it will prevent the padlock from displaying properly on your page. This article will cover the following topics which will help you understand the different types of links and how best to secure them:
Internal vs. External Links
The types of links that you can use depend on where the content is located. The two types of links that this article will reference and provide direction for are as follows:
- Internal Links: Some content that you link to may be on your own server and may be accessed with your domain. This content is known as an internal link.
- External Links: When you need to link to content hosted on an external server that you cannot access through your own domain, this is known as an external link.
Relative Paths vs. Absolute Paths
When referring to pages or images that are hosted by your domain, or internal links, a relative path may be used. Using a relative path will ensure that your browser will assume that any internal link on your site is using the same access protocol as the link the visitor used to load the page.
This ensures that links will function fully in numerous circumstances (such as both with or without an SSL) without the need for rewriting code.
However, if you are using a link to an external URL, you must use an absolute path to link to the desired content.
Relative Paths
Media content (an image, movie, audio) or internal links that you wish to make secure should be referenced with a relative path such as the following:
<img src="images/banner.jpg">
By using a relative path, part of the file location is left to be assumed. A web browser will use the actual URL of the web page and follow the relative path. Therefore, when you post content with a relative path on a secure page, the content will automatically load securely.
Forward Slash
When creating a relative link or path, be careful about whether or not you add an initial forward slash. Using a leading forward slash, such as in the example listed below, tells the browser to navigate to the link from the root of your domain:
<img src="/images/banner.jpg">
The example shown above specifically tells the browser to check for the content at the root of the domain. If your secure page is https://domain.com/category/page.html, this example makes the browser assume the image to be at the root of the domain https://domain.com/images/banner.jpg instead of in relation to where the link was found, https://domain.com/category/.
Many users may prefer to use a leading forward slash, as this allows the page to be moved without breaking links as they are .
Absolute Paths
By using an absolute path, no part of the image location is left to be assumed. A web browser will use the actual URL of the web page based only on the path provided, regardless of the actual URL of the web page.
This can be used to force a browser to try to load a site from a specified domain and either HTTP or HTTPS. Internal links may use absolute paths, and external links must use absolute paths.
The leading cause of insecure content on a page is referencing media with an absolute path such as the one listed below:
<img src="http://domain.com/images/banner.jpg">
The absolute path listed above references http and not https, resulting in a problem for a secure site. Change it to https must be used to force the browser to load the image or URL through an SSL:
<img src="https://domain.com/images/banner.jpg">
Unsecure External Links
There are many times where it may be beneficial to link to an external resource while developing your website, and frequently those resources may not be secured with an SSL. Attempting to force these resources to load with HTTPS will cause an error to be generated for visitors who attempt to follow the link.
As a workaround for this, when creating a link (This work around will not work for images. It is always recommended that you host images locally in order to serve them securely), you may use a URL shortener to serve a link via HTTPS that will resolve to an HTTP served site.
Google hosts a URL shortener that may be used for this service:
https://goo.gl/
Simply use the service to convert an HTTP url to a shortened HTTPS served one as in the following example:
<a href="http://domain.com/images/banner.jpg">
Can be converted to:
<a href="https://goo.gl/rsXxti">
The URL will still be fully functional and resolve correctly, but will not generate issues with your SSL.