Dealing with the problem of “mixed content” that occurs when setting up Always-On SSL and HTTP/2
HTTP sites that get converted to Always-On SSL and HTTP/2 often encounter the problem of mixed content.
Mixed content occurs when HTML is loaded over a secure SSL connection, but resources on the page are loaded via insecure HTTP, resulting in a page with both HTTP and HTTPS content. Resources loaded over HTTP are not protected by SSL.
Resources like CSS, JavaScript and image files are often loaded over HTTP. Sometimes, mixed content will occur when the CSS or JavaScript file is itself secured by SSL but it makes HTTP calls to other resources.
If a page is completely secured by SSL, it will be shown explicitly in the browser's address bar. For example, in Google Chrome, there is a padlock icon next the word “Secure”. If you click the icon, the message “Secure Connection - Your information (for example, passwords or credit card numbers) is private when it is sent to this site.” will pop up (Image 1).
Image 1: A web page completely secured by SSL
However, if a site has mixed content, there will be an "i mark" instead of a padlock. If you click it, the following message will pop up: “Your connection to this site is not secure - You should not enter any sensitive information on this site (for example, passwords or credit cards), because it could be stolen by attackers.” (Image 2)
Image 2: A site with mixed content
Furthermore, as of version 56, released 01/2017, Google Chrome displays “Not secure“ in the address bar for some HTTP web sites (Image 3). This update targets HTTP sites where users input login information, passwords, credit card numbers, etc like WordPress login pages. However, Google is recommending that all web sites use HTTPS instead of HTTP for user security, and plans to implement even more strict browser warnings in the future.
Image 3 An HTTP website with the “Not secure” warning
(Helpful link) Moving towards a more secure web - Google Security Blog
(Helpful link) HTTPS as a ranking signal
