Search code examples
httpsblockingmixed-content

Mixed content google chrome, cant find the source

Im developing a golang webpage and am running into some troubles when deploying my page to google app engine (appspot.com). This is because Im running it using http when developing on my machine, but over https when deployed.

Google chrome doesnt like this so it blocks the content trying to be loaded over http. Im fine with this since I like security. But I cant find the source.

All my includes are https or //, or just local files.

Here is a image of the error in chrome.

enter image description here

This is some includes that I use. Maybe some of them is loading a font?

<link href="/static/css/googlefont.css" rel='stylesheet' type='text/css'>
    <link href="/static/css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="/static/css/style.css" rel="stylesheet" type="text/css">
    <link href="/static/css/sweetalert2.css" rel="stylesheet" type="text/css">
    <link href="/static/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="/static/css/modal.css" rel="stylesheet" type="text/css">
        
    <script src="/static/js/jquery.js"></script>
    <!--<script src="/static/js/jquery.min.js"></script>-->
    <script src="/static/js/register.js"></script>
    <script src="/static/js/login.js"></script>
    <script src="/static/js/sweetalert2.min.js"></script> <!-- Sweetalert -->
    <script src="/static/js/spin.min.js"></script> <!-- ?? -->
<script src="/static/js/bootstrap.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="/static/js/jquery.cookie.js"></script>
<script src="/static/js/stuff.js"></script>
<script src="/static/js/flat-ui.min.js"></script>
<script src="/static/js/application.js"></script>
<script src="/static/js/bootbox.js"></script>

I cant seem to find the source..?

Thankful for any help in the right direction, i'm going crazy here..

Solution

  • Check all the CSS stylesheets your document is loading, including any CSS stylesheets that are getting loaded through an @import. In one of the CSS stylesheets, you most likely have a rule with a url(…) call something like this:

    src: local('PT Sans'), local('PTSans-Regular'), url(http://fonts.gstatic.com/s/ptsans/v8/fhNmDCnjccoUYyU4ZASaLVKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');

    Use the Network tab (or equivalent) in your browser devtools to get a view of all the resources your document is loading. You can sort that resource view by type. So, set it to sort by type and then look through the source of all the type=stylesheet or type=css resources to see which one has a url(…) that uses an insecure http scheme.