How to Include CSS and JS files via HTTPS when needed?

Question

I am adding an external CSS file and an external JS file to my headers and footers. When loading an HTTPS page, some browsers complain that I am loading unsecured content.

Is there an easy way to make the browser load the external content via HTTPS when the page itself is HTTPS?

Answer 1

If you use relative paths ( and the content is on the same domain) then the content should use whichever protocol the page was requested in.

However if you are going across domain to a CDN or resource site, or if you need to use absolute paths, then you will need to use server side script to change the links, or always use https://

Answer 2

Use protocol-relative paths.

Thus not

<link rel="stylesheet" href="http://example.com/style.css"&gt;
<script src="http://example.com/script.js"&gt;&lt;/script&gt;

but so

<link rel="stylesheet" href="//example.com/style.css">
<script src="//example.com/script.js"></script>

then it will use the protocol of the parent page.

Answer 3

nute & James Westgate are right when comenting on the later answer.

If we take a look at miscelanous industry-grade external javascript includes, the successfull ones use both document.location.protocol sniffing and script element injection tu use the proper protocol.

So you could use something like :

<script type="text/javascript">
  var protocol = (
      ("https:" == document.location.protocol) 
      ? "https" 
      : "http"
  );
  document.write(
      unescape(
          "%3Cscript"
              + " src='"
                  + protocol 
                  + "://"
                  + "your.domain.tld"
                  + "/your/script.js"
              + "'"
              + " type='text/javascript'
          + "%3E"
          + "%3C/script%3E"
      ) // this HAS to be escaped, otherwise it would 
        // close the actual (not injected) <script> element
  );
</script>

The same can be done for external CSS includes.

And by the way: be careful to only use relative url() path in your CSS, if any, otherwise you might still get the "mixed secure and unsecure" warning....