CODEWITHSUNDEEP
httpsblockingmixed-content
Simon Guldstrand
Simon Guldstrand

Reputation: 488

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

Upvotes: 1

Views: 987

Answers (2)

Vishnar Tadeleratha
Vishnar Tadeleratha

Reputation: 371

If someone hasn't already, there really should be a feature request lodged with Google. The fact that Chrome knows the location of the error but just displays "(index):1" in the developer console just doesn't cut it.

In the meanwhile, the easiest way to find the offending CSS in Chrome (ver 68) is to "Customize and control DevTools" by clicking on the 3 dots in the top right corner of the development console and clicking "Search" ) or "Ctrl+Shift+S". You might have to drag up the horizontal pane at the bottom of the screen.

Upvotes: 0

sideshowbarker
sideshowbarker

Reputation: 88336

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.

Upvotes: 1

Related Questions