CODEWITHSUNDEEP
javascriptmicrosoft-edgeinnerhtml
Mark Muller
Mark Muller

Reputation: 1

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

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" />';

Upvotes: 0

Views: 635

Answers (2)

Mark Muller
Mark Muller

Reputation: 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);
    }
}

Upvotes: 0

A Haworth
A Haworth

Reputation: 36664

I think you are getting the warning on Edge but not on Chrome because of Edge's tracking feature. This blocks or warns about images which it thinks may be tracking. In Edge go to the menu (top right ...) Settings>Privacy etc and and there you can set tracking to Basic, which does almost nothing, Balanced, which is the default, or Strict. Try setting these and see what you get in the console.log.

I do not know why that particular image is thought to be tracking (maybe it is, or maybe there is suspicion about the source) but using a 'normal' image your code works fine with no warnings even with tracking set at Strict.

Try for example:

<div id="divTweets" class="col-md-8"></div>
<button onclick="useimg('https://pbs.twimg.com/profile_images/1126815136352735233/dAGSYPXz_normal.png');">Click to get the twimg.com image</button>
<button onclick="useimg('https://rgspaces.org.uk/wp-content/uploads/may-morning-in-lockdown.jpg');">Click to get the rgspaces.org.uk image</button>

<script>
const divTweets = document.querySelector("#divTweets");

divTweets.innerHTML = '<img id="img" src="https://rgspaces.org.uk/wp-content/uploads/may-morning-in-lockdown-100x100.jpg" alt="WoonzorgNL" />';

function useimg(img) {
  document.getElementById('img').src=img;
  document.getElementById('img').style.width='20vw';//just so we can see the image
}
</script>

Upvotes: 2

Related Questions