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

css, html, https, javascript

Solution

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.

Problem

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?

Original source

Related problems