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.
<link rel="stylesheet" href="http://example.com/style.css"> <script src="http://example.com/script.js"></script>
<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.
So you could use something like :
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:
But the protocol-relative path would be the way to go.
©2020 All rights reserved.