Menu
Suppose the page below is loaded from https://127.0.100.1. The page makes an XMLHttpRequest to http://127.0.100.2. This seems like mixed content: The page is loaded over a secure connection and a resource is loaded over an insecure connection. Mixed content should be blocked by the browser. Yet, the page below works just fine.* Why does it work: Why isn't the request blocked?
Update: Going beyond the accepted answer, browsers can be configured to block mixed content for such addresses.
* Wireshark confirms browsers aren't loading the resource over a secure connection.
<html>
<body>
<img id="dst"/>
<script>
let xhr = new XMLHttpRequest();
xhr.open('get', 'http://127.0.100.2/img.jpg');
xhr.responseType = 'blob';
xhr.onload = function(){
document.getElementById('dst').src = URL.createObjectURL(xhr.response);
}
xhr.send();
</script>
</body>
</html>
859
The most straightforward fix for mixed content warnings is to simply load all content over a secure HTTPS connection. This can be done by setting up your server to redirect all HTTP traffic to HTTPS, or by using a plugin or extension that will automatically do this for you.
http://127.0.100.2/img.jpg isn’t considered mixed content because the Mixed Content spec defines it as a special case of an a priori authenticated URL, due to it being in the range 127.0.0.0 - 127.255.255.255 (that is, a host with the CIDR notation 127.0.0.0/8), which per the Secure Contexts spec is defined as a secure context — even if the protocol isn’t https.
The same goes for http://localhost/img.jpg or http://foo.localhost/img.jpg
75
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
