security - Detect broken lock icon (mixed secure/insecure content) from Javascript

Question

I'm working on making a site fully functional under HTTPS. As part of this, I'd like to ensure we never "break the lock." That is, we should never load non-SSL content on an SSL page, which can trigger a warning or other indicator depending on the browser. To verify this is the case, I'd like to do two things:

1. Write Selenium tests that verify various actions don't break the lock.
2. Write logging code in JS that checks during a user session whether the lock is broken, and logs back to the server if it is.

Is there any method that can be used in JS to check the broken / not broken state of the browser's HTTPS lock icon? Or equivalently, the mixed / non-mixed state of the current page's content?

Answer 1

You can't detect this from JavaScript itself, but you can use the Content-Security-Policy (CSP) HTTP header to instruct the browser to send reports of mixed content to either your server, or a third-party aggregation service.

Here's an example of a CSP header that reports mixed content to a third-party service, report-uri.io:

Content-Security-Policy-Report-Only: default-src https:; report-uri https://report-uri.io/report/<YOUR_NAME_HERE>

This article by the maintainer of Report URI goes into more detail about how this works. You can also configure your CSP header to report to your own URL if you prefer.