Heroku error: page was loaded over HTTPS, but requested an insecure script 'angular-route.js'

1
votes

I've deployed my nodejs app to heroku. I have this file below as my index.html but somehow heroku is throwing me this error message to the chrome developer console (F12).

Error:

Mixed Content: The page at 'https://small-talkz.herokuapp.com/' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js'. This request has been blocked; the content must be served over HTTPS.

index.html:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    $http.get('https://code.angularjs.org/1.4.9/angular.js').success(successCallback);
</script>
<script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9">
</script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="script.js"></script>

    <link rel="stylesheet" type="text/css" href="../css/style.css">
</head>

<div ng-app="mymodule" ng-view>
</div>     
</html>
1
javascriptangularjsnode.jsheroku
two things to solve this load if via http or change every http request with an https, heroku will invoke your all http request if you render your application via https ( like h2oo said just use //ajax.googleapis.com ) – elreeda

1 Answers

3
votes

Notice your CDN that's hosting angular-route does not have HTTPS in it - means it is not served in secure protocol.

Either host a copy of it on Heroku (naturally - HTTPS) or find a new CDN to work with.

Edit: as mentioned you can just replace http:// with https:// since Google's APIs can be served through https.