如何使Blob URL被浏览器标记为安全？含Angular应用场景

Blob URL的安全性完全继承自创建它的父页面的安全上下文，和Blob URL本身的前缀无关，要让它被浏览器判定为安全，得满足这些条件：

• 生成Blob URL的父页面必须处于安全上下文：简单说就是父页面得用HTTPS协议（本地开发的localhost或127.0.0.1是例外，浏览器默认认作安全）。如果你的Angular应用跑在HTTP环境下，哪怕生成的Blob URL前缀带https，浏览器也会标记为不安全。
• 正确设置Blob的内容类型：比如你打开PDF时，一定要把Blob的type参数设为application/pdf。正确的MIME类型能让浏览器准确识别内容，避免因类型未知触发安全警告。
• Blob内容不能包含不安全资源：如果Blob里嵌了未授权的脚本、跨域危险资源，哪怕父页面是安全的，浏览器也会判定这个Blob内容不安全。

针对你的Angular应用场景，补充两个实践要点：

• 部署应用必须用HTTPS，本地开发用ng serve默认的localhost环境没问题；
• 从Base64转Blob时的代码要规范，比如：

// 示例：Base64转PDF Blob并打开
const base64Pdf = '你的PDF Base64字符串';
const rawData = atob(base64Pdf);
const uint8Array = new Uint8Array(rawData.split('').map(char => char.charCodeAt(0)));
const pdfBlob = new Blob([uint8Array], { type: 'application/pdf' });
const blobUrl = URL.createObjectURL(pdfBlob);
window.open(blobUrl);
// 记得在合适时机释放资源
// URL.revokeObjectURL(blobUrl);

内容的提问来源于stack exchange，提问作者Josué Zatarain