Bluehost: Post Secure Content and SSL

If the page you wish to make secure has already been designed, there are different security methods and features based on your needs for your website. 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 common 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://example.com/ and the page uses the following code to load your logo:

<img src="http://example.com/images/logo.png" />

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 to 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 you link to may be on your own server and may be accessed with your domain. This is known as an internal link.
• External Links: When you need to link 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 (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.

If using a relative path for the secure page https://example.com/category/page.html, the image will be assumed to be at https://example.com/category/images/banner.jpg.

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://exampledomain.com/category/page.html, this example makes the browser assume the image to be at the root of the domain https://example.com/images/banner.jpg instead of in relation to where the link was found, https://example.com/category/.

Many users may prefer to use a leading forward slash, as this allows the page to be moved without breaking links.

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://example.com/images/banner.jpg" />

<img src="https://example.com/images/banner.jpg" />

Unsecure External Links

There are many times when 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.

Additional Resources

There is a variety of SSLs Bluehost offers if you need an SSL, and we can help with your SSL too, with these guides below:

• A Guide to Free SSL Certificates with Let's Encrypt
• Adding a Comodo Positive SSL Certificate
• How to Configure SSL Certificate and Submit Validation
• Troubleshooting SSL

Summary

To maintain a secure website and display the padlock icon, you must ensure all content, including images and links, is loaded via HTTPS. The most efficient way to achieve this is to have an SSL, or get an SSL with Bluehost, and use absolute paths with HTTPS, or utilize a URL shortener if the source does not natively support secure connections, depending on your website's needs.