标签: createobjecturl

我正在尝试将一个 blob 保存到 localforage，然后检索它并显示它。它在一段时间内工作正常，但在几次页面刷新或浏览器关闭后，我在某些 blob 上收到错误。完整错误如下：

Failed to load resource: The operation couldn\xe2\x80\x99t be completed. (WebKitBlobResource error 1.)\n

这是我的其余代码。将项目保存到 localforage：

canvas.toBlob(function(blob){\n  allItems.push({"string":string,"blob":blob});\n  localforage.setItem("savedItems",allItems);\n},"image/jpeg",0.02);\n

从 localforage 加载项目：

localforage.getItem("savedItems").then(function(jsonData){\n  if(jsonData==null){allItems=[];}\n  else{allItems=jsonData;}\n});\n

将 blob 添加到图像源：

let thisURL = window.URL || window.webkitURL;\nlet url=thisURL.createObjectURL(allItems[k]['blob']);\nimg.src=url;\n

这似乎是 Safari 特有的问题，因为我无法在 Chrome 中复制它。

我正在开发一个 iframeable 组件，现在偶然发现了一些看起来像是安全问题的问题。

我有两个网站：

• 站点 A，运行在 http://localhost:3002
• 站点 B，运行在 http://localhost:3000

站点 A 将站点 B 嵌入到 IFrame 中。站点 B 需要使用数据，而这些数据应该由站点 A 提供。但是，目前站点 B 只通过 URL 接受数据，并且由于原始 URL 可能需要身份验证，因此数据由站点 A 获取，并转换为对象 URL （与URL.createObjectURL）然后通过 提供给站点postMessageB。站点 B 现在应该从该 URL 获取数据并使用它。

然而，站点 B 获取对象 URL 被浏览器阻止：

• 铬合金：Not allowed to load local resource: blob:http://localhost:3002/<UUID>
• 火狐浏览器：Security Error: Content at http://localhost:3000/... may not load data from blob:http://localhost:3002/<UUID>

据我所知，这些消息与 CSP 或 CORS 没有关联。但是，我无法理解问题是什么以及它是否可以修复 - 我一直认为对象 URL 目前不存在任何跨站点问题，这正是使用它们的原因。

那么为什么会发生这种情况以及我能做什么呢？

我正在尝试在我的 React 应用程序中使用文件上传功能，但遇到了问题。当我尝试上传第一张图片时，它工作得很好。文件资源管理器对话框关闭并显示我的图片。用我的文件资源管理器中的另一张图片覆盖图片也有效。

但是，当我在覆盖时取消文件资源管理器时，出现以下错误：

类型错误：无法在“URL”上执行“createObjectURL”：重载解析失败。

这是我的相关代码：

showImage = (e) =>{
    this.setState({image: URL.createObjectURL(e.target.files[0])})
  }

render() {
    return (
 <div className="content">
        <input
          accept="image/*"
          className="input"
          id="icon-button-file"
          type="file"
          onChange={this.showImage}
        />
        <label htmlFor="icon-button-file">
       
          <IconButton
            className="image"
            aria-label="upload picture"
            component="span"
          >
             { this.state.image == null ? <AddAPhotoIcon className="icon" /> : 
             <img src={this.state.image} alt="test" className="picture"/> }
             </IconButton>
        </label>
</div>
)

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

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

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