Explaining how mixed content (HTTP with HTTPS) degrades the security of your web page

If you use Chrome as your browser you must have noticed little security icons that show up on the address bar.

Chrome is trusting these sites as secure-

But for this site, Chrome has a flag that it is not fully secure- 

* These screenshots were taken on 1st December 2017 around 4:30 PM PST.

First, what does that secure padlock icon mean?

It means that your interaction with the domain in the address bar are confidential and you can trust it's integrity and authenticity.

• Confidentiality - Internet traffic travels a great distance, from the client (browsers or apps on your mobile phones, laptops, and desktop) to the wifi router, from their to the ISP and then ISP will route it to the server. Confidentiality is to ensure that nobody can intercept and read the traffic, so when you are login to your bank, no one can catch your username and password over the wire.
• Integrity  - Integrity is the assurance that the information is trustworthy and accurate and the content of the page was not modified in the transit before it was presented to you.
• Authenticity - In simple terms it is to ensure that you are talking to who you think you are talking with. When you navigate to a domain, you are exchanging information with the owner of the domain and no imposter can present himself as the owner of the domain.

Why is Chrome suggesting that https://developer.salesforce.com as not fully secure?

To find out, navigate to the URL and start the Chrome Developer Tools, click on the Security tab-

Security Overview tells us that the website has a "Valid Certificate" and has a secure "Secure Connection".Valid Certificate means that the domain has presented a valid certificate which is issued by GlobalSign CloudSSAL Certificate Authority and it is trusted by Chrome. Secure Connection tells us that the communication over HTTPS was secured by TLS 1.2.

Now navigate to the Console tab on the developer console- 

Here it is, the page is accessing a resource that is not served over HTTPS, if you click on the URL, it is this image that is being served over HTTP causing Chrome to mark the page as not fully secure.

Chrome's warning on the page - "Attackers might be able to see the images you’re looking at on this site and trick you by modifying them." What does that mean?

It means that attackers can potentially modify the image while in network, replace it with another image, which will attract your attention by catchy texts like - "We are giving $100 for every badge you earn, to enroll go to www.XXXXXXXXXXXXXX.com" luring you into a trap.

How does this apply to pages (force.com sites, Visualforce, community and lightning pages) hosted on Salesforce?

All pages and resources hosted on Salesforce are served over HTTPS, but if your force.com site, Visualforce, lightning and community pages are accessing external resources over HTTP, your pages are vulnerable and you should take steps to secure your pages.

There are several various ways to do this, listing a few without going into their details.

1. Setting the "Content Security Policy" on your page's header
2. Ensuring all the resources accesses are accessed through HTTPS
3. Setting all Cookies used as secure

This blog is intended to spread awareness about how accessing an external resource over HTTP into your secure page can lead to degraded security indicator on the browsers, and make your website prone to potential attacks.