Firefox下Fabric.js+Next.js图片编辑器存S3报DOMException安全错误

在Next.js项目中基于Fabric.js实现图片编辑器，支持两种图片添加方式：

• 本地上传图片：功能正常
• 从S3用户图库选图（弹窗加载）：图片可正常显示在画布，但点击保存按钮触发handleDownload函数，将最终图片保存到另一S3存储桶时，仅Firefox浏览器报错DOMException: The operation is insecure，Chrome、Edge、Safari均无此问题。

相关代码 #

保存功能代码 #

const handleDownload = async () => {
  canvas.discardActiveObject().renderAll();
  if (canvasRef.current) {
    const canvasR = canvasRef.current;

    const dataURL = canvasR.toDataURL("image/png");
    const blob = await fetch(dataURL).then((res) => res.blob());
    const file = new File([blob], "canvasImage.png", {
      type: "image/png",
    });

    const formData = new FormData();
    formData.append("file", file);
    formData.append("bucket", process.env.NEXT_PUBLIC_MEDIA_BUCKET);

    uploadMediaAPI(formData)
      .then((res) => {})
      .catch((err) =>{});
  }
};

S3图片添加到画布的代码 #

const handleFiles = function (file, type) {
  const imgSelected = type ? URL.createObjectURL(file) : file.src;
  setSelectedImage(imgSelected);
  if (imgSelected && canvas) {
    fabric.Image.fromURL(imgSelected, (img) => {
      img.set({
        left: 50,
        top: 50,
      });
      img._element.crossOrigin = "Anonymous";
      canvas.add(img);
      setLayers([...layers, { object: img }]);
    });
  }
  setOpened(false);
};

解决方案 #

1. 调整跨域图片加载方式，提前设置crossOrigin #

Firefox对跨域图片的crossOrigin设置时机要求更严格，需在图片加载前就设置该属性，而非Fabric.js加载完成后修改：

const handleFiles = function (file, type) {
  const imgSelected = type ? URL.createObjectURL(file) : file.src;
  setSelectedImage(imgSelected);
  if (imgSelected && canvas) {
    // 先创建原生图片元素并设置跨域
    const imgElement = new Image();
    imgElement.crossOrigin = 'Anonymous';
    imgElement.src = imgSelected;
    
    imgElement.onload = () => {
      // 基于已加载的跨域图片创建Fabric.Image实例
      const img = new fabric.Image(imgElement, {
        left: 50,
        top: 50,
      });
      canvas.add(img);
      setLayers([...layers, { object: img }]);
    };
  }
  setOpened(false);
};

2. 改用toBlob替代toDataURL + fetch转换Blob #

Firefox中fetch(dataURL)可能触发安全限制，直接使用Canvas原生的toBlob方法生成Blob，避免中间转换环节：

const handleDownload = async () => {
  canvas.discardActiveObject().renderAll();
  if (canvasRef.current) {
    const canvasR = canvasRef.current;
    
    // 直接调用toBlob生成图片Blob
    canvasR.toBlob((blob) => {
      if (!blob) return;
      
      const file = new File([blob], "canvasImage.png", {
        type: "image/png",
      });

      const formData = new FormData();
      formData.append("file", file);
      formData.append("bucket", process.env.NEXT_PUBLIC_MEDIA_BUCKET);

      uploadMediaAPI(formData)
        .then((res) => {})
        .catch((err) =>{});
    }, "image/png");
  }
};

3. 验证S3存储桶CORS配置 #

确保提供图片的S3用户图库已配置正确的CORS规则，允许你的Next.js域名跨域访问，示例配置：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>https://你的Next.js域名.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

原因说明 #

• Firefox对跨域资源的安全限制比其他浏览器更严格，当画布包含未正确设置跨域的图片时，toDataURL会触发安全异常。
• fetch(dataURL)在Firefox中可能被识别为不安全操作，改用原生toBlob方法直接从Canvas获取Blob，避免了这一限制。

内容的提问来源于stack exchange，提问作者yassine-eluharani