Chrome loading script over http on https page

Question

We have absolute paths in template, i.e.:

<link rel="stylesheet" href="/media/css/ui.css?v=3" />

When I'm trying to open https page - I get following error:

[blocked] The page at 'https://{{ full_site }}/{{secure_page}}' was loaded over HTTPS, 
but ran insecure content from 'http://{{full_site }}/media/css/ui.css?v=3': 
this content should also be loaded over HTTPS.

But path https://{{full_site }}/media/css/ui.css?v=3 is available...

Tell me, why chrome trying to load content over http on https page? And how to force it to load scripts over https on relative paths?

UPD Page loads perfectly in firefox. So this is only chrome issue. All paths are relative.

Answer 1

This could be the reason that your CSS file ui.css may be referring to resources (e.g. images) via background or background-image property which is loading insecure content (Content from HTTP servers)

If you have resources on your site, use Relative Protocol Links like

url(//example.com/images/some_image.png)

Similarly, update your link to use relative protocol link like

<link rel="stylesheet" href="//{{full site}}/media/css/ui.css?v=3" />