2

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 !

fbhcf
  • 111
  • 1
  • 8
  • 1
    Unless you can specify an exact list of tags that you want to check, I'd say the only way to do this is to load the rendered markup as a string and do a search for "http:". – Reinstate Monica Cellio Jan 31 '17 at 09:12
  • This is a good idea, but some browsers( not recent ones) don't block those links. Displaying this message when no error did occur is somewhat wrong. – fbhcf Jan 31 '17 at 09:16
  • 1
    You'd obviously need to do a replace if you were trying to fix it, but you only asked how to detect it. That should do exactly that. I'd recommend removing the protocol altogether, so you end up with `href="//www.somedomain.com/etc"`. That will then work if (for any reason) you have to disable https. – Reinstate Monica Cellio Jan 31 '17 at 09:17
  • I definetly will do that if I find no other way. It's really the error I want to catch by any means, not the misformated links which may or may not trigger this error. But I agree, this approach could just do the trick – fbhcf Jan 31 '17 at 09:19
  • Possible duplicate of [Detect broken lock icon (mixed secure/insecure content) from Javascript](https://stackoverflow.com/questions/4129496/detect-broken-lock-icon-mixed-secure-insecure-content-from-javascript) – jsha Aug 28 '18 at 17:38

1 Answers1

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

santiago arizti
  • 4,175
  • 3
  • 37
  • 50