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

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


Use protocol-relative paths.

Thus not

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

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.


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....


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://