如何使用angularjs检测混合内容? [英] How to detect mixed content with angularjs?

问题描述

我有一个 angularjs 应用程序在 tomcat 上运行，并在 loadbalancer

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

如果应用是通过负载均衡器通过 https 请求的，那么均衡器当然仍然通过 http 内部请求应用.

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

问题:在这种情况下，我想隐藏一个显示混合内容的选项卡(因为我必须嵌入不支持 https 的外部 pdf 链接，因此我想隐藏它们).

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).

我不能使用 $location.protocol() 因为应用程序在负载均衡器后面并且总是只获取 http.

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?

推荐答案

您无法通过简单的方式检测到它.您可以尝试在 iframe 上监听加载事件并设置超时，当超时触发时，阻止 iframe 因为 iframe 没有像这样加载 (jsfiddle 示例):

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);
    }

}

这篇关于如何使用angularjs检测混合内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！