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?

73302 次浏览
小开

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

小开
最佳答案

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

小开

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("type","text/javascript");
fileref.setAttribute("src", document.location.protocol + '//www.mydomain.com/script.js');
document.getElementsByTagName("head")[0].appendChild(fileref);
</script>

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


提交答案