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?

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?

• javascript
• security
• ssl
• https
• selenium

3 Answers 3

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.

You could iterate though the entire DOM and check all links to make sure they are https://.

You can use Mixed Content Scan, a PHP CLI scripts I wrote which scans your site for Mixed Content.

Run this script from the CLI, a such:

$ mixed-content-scan https://www.bram.us/

The script itself will start scanning and give feedback whilst running. When Mixed Content is found, the URLs causing Mixed Content warnings will be shown on screen:

$ mixed-content-scan https://www.bram.us/
[2015-01-07 12:54:20] MCS.NOTICE: Scanning https://www.bram.us/ [] []
[2015-01-07 12:54:21] MCS.INFO: 00000 - https://www.bram.us/ [] []
[2015-01-07 12:54:22] MCS.INFO: 00001 - https://www.bram.us/projects/ [] []
[2015-01-07 12:54:22] MCS.INFO: 00002 - https://www.bram.us/projects/mint-custom-title/ [] []
[2015-01-07 12:54:23] MCS.INFO: 00003 - https://www.bram.us/projects/bramusicq/ [] []
[2015-01-07 12:54:24] MCS.INFO: 00004 - https://www.bram.us/projects/gm_bramus/ [] []
[2015-01-07 12:54:24] MCS.INFO: 00005 - https://www.bram.us/projects/js_bramus/ [] []
[2015-01-07 12:54:26] MCS.INFO: 00006 - https://www.bram.us/projects/js_bramus/jsprogressbarhandler/ [] []
[2015-01-07 12:54:27] MCS.INFO: 00007 - https://www.bram.us/projects/js_bramus/lazierload/ [] []
[2015-01-07 12:54:27] MCS.INFO: 00008 - https://www.bram.us/projects/the-box-office/ [] []
[2015-01-07 12:54:28] MCS.INFO: 00009 - https://www.bram.us/projects/tinymce-plugins/ [] []
[2015-01-07 12:54:29] MCS.INFO: 00010 - https://www.bram.us/projects/tinymce-plugins/tinymce-classes-and-ids-plugin-bramus_cssextras/ [] []
[2015-01-07 12:54:30] MCS.INFO: 00011 - https://www.bram.us/projects/flashlightboxinjector/ [] []

...

[2015-01-07 12:54:45] MCS.INFO: 00036 - https://www.bram.us/2007/06/04/accessible-expanding-and-collapsing-menu/ [] []
[2015-01-07 12:54:45] MCS.ERROR: 00037 - https://www.bram.us/demo/projects/jsprogressbarhandler/ [] []
[2015-01-07 12:54:45] MCS.WARNING: http://www.google-analytics./urchin.js [] []
[2015-01-07 12:54:46] MCS.INFO: 00038 - https://www.bram.us/2008/07/11/ror-progress-bar-helper/ [] []
[2015-01-07 12:54:46] MCS.INFO: 00039 - https://www.bram.us/2008/11/10/jsprogressbarhandler-033/ [] []
[2015-01-07 12:54:47] MCS.ERROR: 00040 - https://www.bram.us/demo/projects/lazierload/ [] []
[2015-01-07 12:54:47] MCS.WARNING: http://farm2.static.flickr./1212/1285026452_0aeb38b6e6.jpg [] []
[2015-01-07 12:54:47] MCS.WARNING: http://farm2.static.flickr./1074/1273115418_a77357040a.jpg [] []
[2015-01-07 12:54:47] MCS.WARNING: http://farm2.static.flickr./1096/1273106588_91f7a736c6.jpg [] []
[2015-01-07 12:54:47] MCS.WARNING: http://farm2.static.flickr./1324/1216309045_31ca82f9d9.jpg [] []
[2015-01-07 12:54:47] MCS.WARNING: http://farm2.static.flickr./1262/1217169586_e4b2bfa7df.jpg [] []
[2015-01-07 12:54:47] MCS.WARNING: http://farm2.static.flickr./1149/1216304291_63fd48d9c4.jpg [] []
[2015-01-07 12:54:47] MCS.WARNING: http://farm2.static.flickr./1366/1216301505_51b3c590ff.jpg [] []
[2015-01-07 12:54:47] MCS.WARNING: http://farm2.static.flickr./1184/1216299847_c57975bed2.jpg [] []
[2015-01-07 12:54:47] MCS.WARNING: http://farm2.static.flickr./1085/1217158084_a9b059d25b.jpg [] []
[2015-01-07 12:54:47] MCS.WARNING: http://farm2.static.flickr./1040/1216293529_3b7c044815.jpg [] []
[2015-01-07 12:54:47] MCS.WARNING: http://farm2.static.flickr./1029/1084232736_5b8c023f46.jpg [] []
[2015-01-07 12:54:47] MCS.WARNING: http://farm2.static.flickr./1318/1043062251_17071a8cc7.jpg [] []
[2015-01-07 12:54:47] MCS.WARNING: http://farm2.static.flickr./1221/1043059543_05713e6156.jpg [] []
[2015-01-07 12:54:47] MCS.WARNING: http://www.google-analytics./urchin.js [] []
[2015-01-07 12:54:47] MCS.INFO: 00041 - https://www.bram.us/2011/09/30/css-regions-and-css-exclusions/ [] []
[2015-01-07 12:54:47] MCS.INFO: 00042 - https://www.bram.us/2014/06/04/good-looking-shapes-gallery/ [] []

...

It's also possible to pass in a file containing a list of URLs to scan, and to change the output to JSON. Ignore patterns are also supported.