Edge 浏览器上带有外部源的 .innerHtml 向控制台添加警告：

Question

使用 javascript 将 div 的 .innerHtml 设置为使用 Edge 浏览器 (85.0.564.51) 的另一个站点上的图像会向控制台添加一条警告消息：

Tracking Prevention 已阻止对 https://pbs.twimg.com/profile_images/1126815136352735233/dAGSYPXz_normal.png.

的存储访问

如何设置 div 的 innerhtml，使 Edge 浏览器不会抱怨可能不安全的代码？ Chrome这段代码没有问题

<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

我认为您在 Edge 上收到了警告，但由于 Edge 的跟踪功能，Chrome 上没有。这会阻止或警告它认为可能正在跟踪的图像。在 Edge 中，转到菜单（右上角...）设置>隐私等，然后您可以将跟踪设置为基本（几乎不执行任何操作）、平衡（默认）或严格。尝试设置这些，看看你在 console.log.

中得到了什么

我不知道为什么那个特定的图像被认为是跟踪（也许是，或者可能对源有怀疑）但是使用 'normal' 图像你的代码工作正常，没有警告，即使跟踪设置为严格。

举个例子：

<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>

Answer 2

我使用 aspnet Core 为图像创建了一个“代理”。这样，图像由与网页相同的服务器提供服务。

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

Edge 浏览器上带有外部源的 .innerHtml 向控制台添加警告：

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

javascript

innerhtml

microsoft-edge