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