How to solve "Mixed content"-issue on Google-Chrome Console

Question

I have an issue where the following is being displayed:

Mixed Content: The page at 'https://www.feelhome.se/produkt/fighting-elephants/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,600italic,600,400italic,300italic,300,200italic,200'. This request has been blocked; the content must be served over HTTPS.

Does anyone have an idea on how I can solve this so it won't appear?

Just use https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,600italic,600,400italic,300italic,300,200italic,200 notice the `https` instead of `http` — Bobby Tables, Jul 17 '16 at 12:31
@toby where does this http appear? Can I somehow which file it is obtained from? — Robin Lundgren, Jul 17 '16 at 12:34
I've updated my answer to show you which files cause this problem — Bobby Tables, Jul 17 '16 at 12:42

Bobby Tables · Accepted Answer · 2016-07-17T13:10:44.893

1

The problems is that the you are loading the fonts using http instead of https if you change the font url to use https you'll be ok.

So you need https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,600italic,600,400italic,300italic,300,200italic,200

instead of http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,600italic,600,400italic,300italic,300,200italic,200

The fonts seam to be loaded from the template.css and bootstrap.css files. Have a look at the attached image.

edited Jul 17 '16 at 13:10

answered Jul 17 '16 at 12:33

Bobby Tables

2,953
7
29
53

How can I, by using google chrome, see in which files to modify these? For example is it style.css or any other? – Robin Lundgren Jul 17 '16 at 12:39
@RobinLundgren in chrome dev tools just press `Ctrl+Shift+F` for find in all files. – Bobby Tables Jul 17 '16 at 12:42
fantastic Toby... I learned something new there, thanks! How did you know it was specifically the bootstrap + template.css? Did you look manually? – Robin Lundgren Jul 17 '16 at 12:46
@RobinLundgren I used `Ctrl+Shift+F` to search for fonts.googleapis and it gave me a list of all the files, just had to see which one use `http` and not `https` – Bobby Tables Jul 17 '16 at 12:49
https://s31.postimg.org/4yzljv8a3/Stack.jpg I did like the image but it does not give me a list of all the files? – Robin Lundgren Jul 17 '16 at 13:06
@RobinLundgren that's not the search all files window, that's the open file window, I've added a new picture. – Bobby Tables Jul 17 '16 at 13:11
I know now exactly how to do it thanks to the image you sent above. – Robin Lundgren Jul 17 '16 at 13:17

score 1 · Answer 2 · answered Jul 17 '16 at 12:45

1

A secure page only has https resources (like stylesheets or images). When one or more resources are loaded via http, the security might be comprimised. That is the warning you're getting, you have some http resourcce on a https page.

Some have suggested placing https://example.com in front of everything, I'm going to suggest something else: //example.com, note the lack of https and http. The browser will now add https automatically.

The benefit here is that when you have to switch between the two, you're done with the minimal amount of work. Say you have a site which is allready build and running, and after a time decides to go https... All you have to do is change your htaccess and done, all your resources are prepared.

answered Jul 17 '16 at 12:45

Martijn

15,791
4
36
68

So you mean having a relative link and not hard coded? For example in @tobys answer above I use: `//fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,600italic,600,400italic,300italic,300,200italic,200` instead of `http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,600italic,600,400italic,300italic,300,200italic,200` – Robin Lundgren Jul 17 '16 at 12:52
Yes that is what I mean. That is not relative though, relative is when you link to something on your own domain and then link without the domain (eg `/images/`) – Martijn Jul 17 '16 at 18:10

score 0 · Answer 3 · answered Jul 17 '16 at 12:42

0

The content you have could be insecure, so you need to load it with https instead of http.

answered Jul 17 '16 at 12:42

Rootel

149
16

How to solve "Mixed content"-issue on Google-Chrome Console

3 Answers3