20

I recently applied an SSL certificate to my domain, but I'm having problems with some of the styles when viewing my website on HTTP:// the styles are fine. But, when viewing it through HTTPS:// no styles are applied at all.

I found out what the problem was. I wasn't loading my third party styles through HTTPS. I switched to HTTPS, and all problems were solved.

MrJoshFisher
  • 1,143
  • 5
  • 21
  • 48
  • 1
    Have you checked that the link to your CSS file has the `https` protocol, and that the URL resolves to the correct stylesheet? – David Thomas Mar 16 '13 at 17:46

2 Answers2

25

You're probably using an http:// link to a stylesheet on an https:// website.

Secure websites are not allowed to mix protocols. Everything has to be embedded from a secure server. Browsers will ignore/block HTTP resources on HTTPS pages (with varying degree of strictness).

The reason for this blocking is that insecure HTTP resources like stylesheets and scripts could still be modified by an attacker and used to spoof/hijack secure parts of the site.

If the stylesheet is served from your server, then omit protocol+host part of the URL, i.e. instead of http://example.com/style.css use /style.css as the URL, so it'll work on both HTTP and HTTPS. You can also use protocol-relative URLs.

If you have to have one full URL, then use https://… URLs only.

Kornel
  • 97,764
  • 37
  • 219
  • 309
  • Thanks - This was the fix for me on a MODX based site. I updated my .htaccess but the stylesheet was not being loaded. After fixing the link to the stylesheet, things worked. My next try will be using a free certificate from letsencrypt ... – Xofo Dec 11 '17 at 02:34
9

If the requested URI is https, if you have resources on the page (images, stylesheets, JavaScript files et. al.) that are requested with the http scheme some browsers may block them because they are considered insecure. You can circumvent that per-browser, but you also have alternatives in your code:

  1. Use https to request everything, or at least match the schems.
  2. Use // to indicate the scheme. The browser will match the scheme with the request URI. For example: <link rel="stylesheet" type="text/css" href="//example.com/path/to.css">
Explosion Pills
  • 188,624
  • 52
  • 326
  • 405