Problem

While inserting images in a Confluence page using the "insert files and images" add-on, the image is not previewed nor displayed correctly if the url contains ':' character

Environment

Tested on 7.16.4, 7.18.3

Steps to Reproduce

1. Go to Confluence > General Configuration > choose Whitelist or Allowlist and add the following domain to whitelist:

https://en.wikipedia.org

and save (or you can also use any combination of wildcards to allow all forms of the above domain). You can also enable the Allow Incoming and Allow Anonymous users
2. In the "Test a Url" option, use the below url and check if all the checks are coming up as green:

https://en.wikipedia.org/wiki/Tesla_Model_Y#/media/File:2020_Tesla_Model_Y,_front_8.1.20.jpg

You can also wget or curl the above url and make sure that the image is downloaded correctly or use curl to view the response code is 200 (eg  : curl -I https://en.wikipedia.org/wiki/Tesla_Model_Y#/media/File:2020_Tesla_Model_Y,_front_8.1.20.jpg)
2. Next, create a new page or edit an existing page
3. Press the *Insert files and images * option
4. Choose images from the web option
5. Use the following url, which we had validated in the whitelist section:

https://en.wikipedia.org/wiki/Tesla_Model_Y#/media/File:2020_Tesla_Model_Y,_front_8.1.20.jpg

as image url
6. Preview the image and save

Expected Results

The preview should work with the image being displayed and when saved, the image should be displayed on the page.

Actual Results

The preview does not display the image and the image appears broken on the saved page.
Try steps 1 - 6 using the below url:

https://upload.wikimedia.org/wikipedia/commons/c/c8/Volkswagen_ID.4.png

and the image is displayed correctly in preview as well as when the page is saved

Workaround

None

Notes

Some customers tend to use port numbers with these images urls and these are not previewed or displayed correct as expected. Example : https://abc123:1406/data.png