Detect mixed content with javascript

Question

I'm looking for a way to detect (in javascript / angular) whether there is one or more mixed content issue in order to inform the users that this page uses http links instead of correct https ones.

It's a crucial feature, this project is only about user created content, and content not showing up because of https is regarded as a major failure if no information message is provided.

So far I stumbled on, iframe / Image load failure detection but this could also be numerous other issues (broken links, ...).

Any ideas on the matter would be highly appreciated !

Answer 1

I just had the same issue, look at this document:

https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content#content_security_policy

It has very useful information, especially this is useful:

Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri https://example.com/reportingEndpoint

It took me a while to understand what it means, but basically it reads: don't allow to load urls of any kind that are not https, but allow inline scripts/styles and eval scripts in script blocks. Don't act on matches, just report them to this url