HTTP vs. HTTPS
Http stands for Hypertext Transfer Protocol. It’s essentially a method of communicating information between web servers and clients. When we add the “S” onto the end, not surprisingly, we’re securing the connection. If you go to a bank or eCommerce website, you will most likely see that the URL leads with HTTPS in your address bar. When you transmit your banking or credit card information to that website, your data will be encrypted before being sent over the network. If you’re seeing a HTTP (not https!) in the address bar, your data is being sent in “plain text” and can be viewed by anyone with access to it. In many web browsers, if you access the content securely then you will receive a green bar and a padlock in your address bar.
Mixed Content Pages
If you do not get the padlock or green bar in your address bar but you are accessing the page over HTTPS, you most likely have a Mixed Content Issue. A mixed content page is a page that was fetched using HTTPS but includes content that was fetched using non-secure HTTP. A mixed content page is a page that is only partially encrypted. There are two different types of mixed content : mixed passive/display content and mixed active content.
Examples of mixed HTTP requests that are considered mixed passive content:
- <img>
- <audio>
- <video>
- <object>
Mixed active content is content that has access to the entire Document Object Model. Examples include:
- <script> (src attribute)
- <link> (href attribute, also includes stylesheets)
- <iframe> (src attribute)
- XMLHttpRequest requests
- fetch() requests
- cases in CSS where <url> value is used
- <object> (data attribute)
How to fix
- Identify mixed content using a browsers developer tools
- In Chrome or Firefox, right click anywhere on the page, click inspect, and then click on the “console” tab.
- In the console, you will be shown a list of warnings showing which content is being called over HTTP.
- Located the content on your page, verify content can be displayed over HTTPS, and then change the HTTP reference to HTTPS.
Scenario: you are updating your department website and notice that your site isn’t displaying the green padlock at the top. You right click on the page in question, click “inspect” and then the console tab. You see it’s displaying an image in the post that is referencing the image using http. Like the following <img src=”http://a.website.ufl.edu/yourimage.jpg”>. Copy the http://a.website.ufl.edu/yourimage.jpg, change the http to https and test it in your browser. If it works, then the remote server has HTTPS enabled and you are safe to make the change. You notice three other images on your page that need to be fixed and apply fixes as above.
Why is this important?
As of July 2018, the Google Chrome Browser will begin marking all websites insecure that do not properly use HTTPS. Additionally, HTTPS is used in google’s search ranking algorithm and between two equally ranked sites, it can often be the tie-breaker.
Concluding remarks
Next time you update or add content, be sure that you’re using an HTTPS in your element reference and not including insecure content on your web pages.