.innerHtml with external source on Edge browser adds a warning to the console:

Question

Using javascript to set the .innerHtml of a div to a image on another site with Edge browser (85.0.564.51) adds a warning message to the console:

Tracking Prevention blocked access to storage for https://pbs.twimg.com/profile_images/1126815136352735233/dAGSYPXz_normal.png.

How can I set the innerhtml of the div in a way Edge browser is not complaining about potentially unsafe code? Chrome does not have a problem with this code

<div id="divTweets" class="col-md-8"></div>

const divTweets = document.querySelector("#divTweets"); divTweets.innerHTML = '<img src="https://pbs.twimg.com/profile_images/1126815136352735233/dAGSYPXz_normal.png" alt="WoonzorgNL" />';

Answer 1

Using aspnet Core i created a "proxy" for the images. This way the images are served by the same server as the webpage.

<img src="/Twitter/Proxy?externalUri=https://pbs.twimg.com/profile_images/1126815136352735233/dAGSYPXz_normal.png" alt="WoonzorgNL">

public async Task<IActionResult> Proxy(Uri externalUri)
{
    using (HttpClient client = new HttpClient()) {
        var file = await client.GetAsync(externalUri);
        return new FileContentResult(await file.Content.ReadAsByteArrayAsync(), file.Content.Headers.ContentType.MediaType);
    }
}