如何加载未标记为不安全的 blob URL？

Question

如果您转到 https://developer.mozilla.org/en-US/docs/Web/API/Blob#creating_a_blob 中的“创建 blob”示例，您最终会得到一个以“blob”开头的 URL :https://”，但浏览器将站点标记为不安全：

标记为安全需要什么？

给出我正在做的事情的上下文：我有一个角度应用程序，可以在新选项卡中从 base64 数据打开 PDF，并且可以同时打开任意数量的 PDF。

Answer 1

你并不是要导航到 blob url，他们只是在示例中这样做是为了向你展示内容。该错误消息是因为您当前的网址未使用 HTTPS，但 blob 网址指向浏览器中的一段本地数据，您不需要传输协议。

这里有一个很好的答案，详细描述了 blob url：https://stackoverflow.com/a/30881444/12914833

Blob url 用于 HTML 元素的

src

属性。它们几乎只用于图像、音频和视频。以下是支持

src

的元素：https://www.w3schools.com/tags/att_src.asp

这是一个如何使用 blob url 的示例：

// This function would retrieve a blob from somewhere
// I'm just fetching an image and converting it for convenience
function getBlob() {
  return fetch(
    'https://wealthofgeeks.com/wp-content/uploads/2022/07/spongebob-rainbow-meme-imagination.jpg'
  ).then((res) => res.blob());
}

getBlob().then(
  (blob) => (document.querySelector('img').src = URL.createObjectURL(blob))
);

<img width=300></img>