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?
To link a CSS file with your HTML file, you have to write the next script on your HTML file inside the head tag. To link a Js file with your HTML, you only have to add the source of the script inside the body tag or outside; it doesn't matter.
You should put the stylesheet links and javascript <script> in the <head> , as that is dictated by the formats.
To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.
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://
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With