javascript - How to detect mixed content with angularjs?

Question

I have an angularjs application running on tomcat, and behind a loadbalancer

If the app is requested via the loadbalancer with https, the balancer still requests the application internally via http, of course.

Problem: I'd like to hide one tab that shows mixed content in this case (because I have to embed external pdf links which do not support https, thus I'd like to hide them).

I cannot use $location.protocol() because the app is behind the loadbalancer and always only gets http.

Question: is there a chance I could detect if the browser is actually showing mixed content?

Answer 1

You can't detect it in the simple way. You can try to listen load event on iframe and set timeout, and when timeout triggered, block iframe because iframe didn't loaded like this (jsfiddle example):

checkMixedContent(urlToCheck, function(urlToCheck) {
    // For example, change location
    alert('ok');
    // load iframe
}, function() {
    alert('Error: resource timed out');
    // hide iframe / show message
}, checkDelay);

function checkMixedContent(urlToCheck, successCallback, errorCallback, checkDelay, dontCheckOnError) {
    checkDelay = checkDelay || 10000;
    // 1. Create invisible iframe and append it to body
    var iframeHelper = document.createElement("iframe");
    iframeHelper.src = urlToCheck;
    iframeHelper.height = 0;
    iframeHelper.width = 0;
    iframeHelper.style.visibility = 'hidden';
    document.body.appendChild(iframeHelper);

    // 2. Set time out and while content on iframeHelper.src should be definitely loaded
    var checkTimeout = window.setTimeout(function() {
        errorCallback(urlToCheck);
    }, checkDelay);

    var onLoad = function() {
        window.clearTimeout(checkTimeout); // if OK - not show error => clearTimeout

        iframeHelper.removeEventListener('load', onLoad);
        iframeHelper.removeEventListener('error', onError);
        document.body.removeChild(iframeHelper);
        successCallback(urlToCheck);
    };

    var onError = function() {
        window.clearTimeout(checkTimeout); // if OK - not show error => clearTimeout

        iframeHelper.removeEventListener('load', onLoad);
        iframeHelper.removeEventListener('error', onError);
        document.body.removeChild(iframeHelper);
        errorCallback(urlToCheck);
    };

    // 3. If everything is fine - "load" should be triggered
    iframeHelper.addEventListener('load', onLoad);


    // Turn "true" in case of "X-Frame-Options: SAMEORIGIN"
    if (!dontCheckOnError) {
        iframeHelper.addEventListener('error', onError);
    }

}