SSL for relative paths?

Question

I noticed when accessing a site using HTTPS I get errors in the JS console when trying to include CSS or JS files from a relative path such as this:

<link rel="stylesheet" type="text/css" href="css/demo.css?id=14" />

Mixed Content: The page at 'https://mysiste.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://mysiste.com/css/demo.css?id=14'. This request has been blocked; the content must be served over HTTPS.

What's the ideal solution for this scenarios?

• Should I just force all the HTTP accesses to be redirected to HTTPS?
• Or is there a way to tell the server to serve all relative paths using HTTPS?

Answer 1

Relative links will use the protocol and host from the base URL. The base URL is usually the one which can be seen in the URL bar. But it is possible to change the base URL explicitly using the base tag.

This means if you have a base URL with http as protocol set in your page it will still use http instead of https even though you've accessed the site with https and the reference is relative, i.e. like this:

<base href="http://example.com/">

To fix it either remove the base tag or change it to use https instead of http:

<base href="https://example.com">