在https上阻止了Angular templateUrl。 内容必须通过HTTPS提供。”

Question

As the title states, I have an angular directive loading a template within my project "/views/modals/help.html"

The templateurl works perfectly on localhost, and on the test servers that use http only. However, when I get to a server that uses https I get the error: "This request has been blocked; the content must be served over HTTPS."

I can't find any documentation that talks about how to use templateUrl with https. Any help is appreciated!

Answer 1

Ok, so the problem was that Angular was loading a templateUrl while on an HTTPS page. I had expected it to try to load the template via HTTPS since angular, the controller, the directive, etc. were loading via relative URLs on an HTTPS page, which in my mind, means they were loaded with HTTPS.

For whatever reason, angular did not load the template via HTTPS. So I changed my directive slightly:

templateUrl: function() {
    var useHTTPS = window.location.href.indexOf('https') > -1;
    if (useHTTPS) {
        return 'https://www.example.com/path/to/htmlfile.html';
    } else {
        return '/path/to/htmlfile.html';
    }
}

Answer 2

The thing is if you load a https webpage all the resources on the page have to be retrieved using https also.

So if your templates are retrieved from http host to https host they will blocked. The source host would have to implement https.

ps another thing https://letsencrypt.org/ has started offering free https certification for your servers. Looks like a promising project when they have partnered up with giants like Cisco, Chrome and Mozilla.