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

Question

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

需要什么条件才能将其标记为安全？

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

Answer 1

通过 blob URL ( ) 查看 pdfblob:https://...并不危险（当然，除非 pdf 内部有危险的东西）。您可以安全地忽略该警告。

该警告消息来自以下事实：您当前的 URL 未使用 HTTPS，但 blob url 指向浏览器中的一段本地数据，您不需要为此使用传输协议。

这是详细描述 blob url 的一个很好的答案：/sf/answers/2161701111/

但 Blob URL 并不是真正用于导航的。它们用于srcHTML 元素的属性，或用于通过标签的下载链接a。以下是支持的元素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>

下面是如何允许下载 blob 的示例。

// This function would retrieve a blob from somewhere
// I'm just fetching a pdf and converting it for convenience
function getBlob() {
  return fetch('https://uclit.ca/assets/documents/dummy.pdf').then((res) =>
    res.blob()
  );
}

getBlob().then((blob) => {
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.textContent = 'DOWNLOAD';
  a.download = 'dummy.pdf';
  document.body.append(a);
});

这在沙盒 iframe 中无法像代码片段一样工作，所以这里是一个 stackblitz：https://stackblitz.com/edit/typescript-t5dqpa ?file=index.ts,index.html

要在没有警告的情况下查看 pdf，您可以：

1. 将其嵌入到 html 页面中
2. 将文件托管在服务器上
3. 让用户下载文件