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

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?



Use protocol-relative paths.

Thus not

<link rel="stylesheet" href="">
<script src=""></script>

but so

<link rel="stylesheet" href="//">
<script src="//"></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"
              + " 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

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


In contradiction to the escaped response (which will also work) you could skip that part and use the correct way to add nodes to your dom tree:

<script type="text/javascript" language="javascript">
    var fileref=document.createElement('script');
    fileref.setAttribute("src", document.location.protocol + '//');

But the protocol-relative path would be the way to go.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.