Search code examples
javascripthtmlmixed-content

Modify Mixed-Content HTMLs using JavaScript

At first I didn't have any SSL certificate in my site because hosting providers didn't allow it.

So, I've transferred my domain to CloudFlare & got a SSL certificate for my site.

For a SSL certificate the contents in the site should be like <img src="**https**://www.example.com/image.png (not <img src="http://www.example.com/image.png">), otherwise it will show an issue about Mixed-Content..

So, by following the rules, I did the same thing.. But at the bottom some third-party ads were placed owned by hosting providers which contains http:// connection. So as a result I got an untrusted certificate error in the Browsers.

Hosting providers doesn't allow to edit or remove those items by paying or something else.

But CloudFlare already has a system to change all <script src="http://www.example.com/script.js"></script> into <script src="https://www.example.com/script.js"></script> automatically. But my problem is, it can't change <img src="http://www.example.com/image.png"> into <img src="https://www.example.com/image.png">.

Is it possible to modify <img src="http://www.example.com/image.png"> into <img src="https://www.example.com/image.png"> using JavaScript?? And will it be resolved if I use JavaScript??

Solution

  • Try using String.replace on the document HTML.

    Edit: Upon more research, you might want to try using:

    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

    Instead of a JavaScript solution 

    document.documentElement.innerHTML = document.documentElement.innerHTML.replace("http://", "https://");
console.log(document.documentElement.innerHTML);
    <html>
<head></head>
<body>
</body>
</html>
<img src="http://somethingsomething">