Serve Image over https with javascript

Question

I have a Amazon ec2 instance with apache webserver installed. I have used Certbot to install a SSl certificate. I want to display a Image on my site using javascript. When a user enters in a edit text box I want to dynamically change a image. Im currently using javascript to change it. When I access the image I get this message "requested an insecure image 'http://myurl.jpg'. This content should also be served over HTTPS. How do I use Https so serve the image?

document.getElementById("img").src="http://myurl.jpg"

change to 'https://myurl.jpg' ... simple security issue attempting to serve http over https — otherstark, Oct 28 '16 at 00:27
Related: https://stackoverflow.com/questions/13804590/making-all-images-sources-https-using-user-js — Jesse Nickles, Aug 19 '22 at 11:07

score 0 · Answer 1 · answered Oct 28 '16 at 00:33

0

Replace this: "http://myurl.jpg" with this: "https://myurl.jpg"

easy enough?

answered Oct 28 '16 at 00:33

John Doe

399
1
4
23

score 0 · Answer 2 · answered Oct 28 '16 at 01:56

Leave out the protocol in the URL. Then it will default to the same protocol as was used for the page. So if the page was loaded with https, it will also use https for the image, and there won't be an error:

document.getElementById("img").src="//myurl.jpg"

score 0 · Answer 3 · answered Oct 31 '16 at 22:34

If you want for example image filepaths to load as HTTPS while still using relative paths you must set a <base href="URL"/>.

I use file paths like this <img src="img/xxx.png" alt="xxx"> but without setting a base URL it will load by default as HTTP. To resolve this add something like this in your head.

<head> <?php $BaseDir = 'https://' . $_SERVER['SERVER_NAME'] .substr($_SERVER["SCRIPT_NAME"], 0, strrpos($_SERVER["SCRIPT_NAME"], "/") + 1); echo '<base href="' . $BaseDir . '" />'; ?> </head>

Serve Image over https with javascript

3 Answers3