How to identify if Chrome is showing the security icon

Question

I have some problems in my app with browser security stuff.

Initially, it was not a concern, because all my javacript codes worked fine. But since I've started to use ckEditor it became a problem, because my ckEditor only work if I enable the unsafe scripts("Load unsafe script"). It's happening only on Chrome.

I found out this useful link Content Security Policy and I am trying to work around it.

However, I would like to know if there is any way to detect by javascript if the app is being blocked by the browser. Actually I am not talking about the tag <noscript></noscript>, because the rest of my javascript codes on my app still working fine. It's about this particular Chrome's security.

While I am working on this issue following the Content Security Policy's instructions. Maybe I could identify if Chrome is showing this security icon and give some instructions to the users.

Is it possible?

Answer 1

I may assume that your website is protected with SSL (HTTPS), while you are referencing scripts from another sources than your domain, like the CKEditor tool.

What if you download the CKEditor script file to your server and change the script reference to your domain address?

In addition, take a look at this open issue: CKEditor does not load in Chrome when included in a https site , which if understand currectly, means that you should refer to the CKEditor with HTTPS instead of HTTP if you are at a SSL-Protected website.

Answer 2

This is what i did to work around this:

I loaded a script over the unsecure http connection, which just sets a global variable. In the onload event i checked if the variable was set. If not, i show a warning.

Script to load over HTTP:

var unsecureContentLoaded = true;

Example code which checks if content was loaded (loaded over HTTPS):

$(document).ready(function(){
    if(typeof unsecureContentLoaded === "undefined"){
        alert("unsafe content could not be loaded!");
    }
});