Strapi保存裁剪图片至媒体库失败，画布污染报错求助

问题根源 #

你遇到的SecurityError: Tainted canvases may not be exported，是因为从S3/CDN加载的跨域图片缺少正确的跨域配置，导致浏览器将Canvas标记为"污染"，禁止执行toBlob这类导出操作。

解决步骤 #

1. 给图片加载添加crossorigin="anonymous"属性 #

Strapi Admin渲染媒体库图片时，必须让图片以跨域模式加载：

• 若使用Strapi内置裁剪工具，可尝试升级到最新版本（部分新版本已默认处理该属性）；若不想升级，可通过自定义Admin插件修改图片渲染逻辑，给<img>标签加上crossorigin="anonymous"。
• 若你自行实现裁剪逻辑，创建Image实例时需显式设置：

  const img = new Image();
  img.crossOrigin = 'anonymous'; // 关键配置
  img.src = '你的CDN/S3图片URL';
  

2. 校验并修正S3的CORS配置 #

即便你设置了allowOrigins: *，仍需确认S3桶的CORS规则完整，示例正确配置如下：

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>ETag</ExposeHeader>
  </CORSRule>
</CORSConfiguration>

确保允许GET方法（图片加载依赖该方法），同时暴露必要响应头，避免浏览器拦截跨域响应。

3. 确认CDN的跨域配置 #

CDN需正确转发S3的CORS响应头，或直接在CDN上配置匹配规则：

• 禁止CDN缓存Access-Control-Allow-Origin等跨域头，确保每个请求都能获取到正确的跨域响应头。
• 若CDN有独立CSP设置，同步配置AllowedOrigin: *，并允许对应的请求方法和头。

4. 微调Strapi的CSP配置（可选） #

当前你的CSP配置已包含S3和CDN源，若useDefaults: true带来规则冲突，可禁用默认规则并手动配置所有必要指令：

module.exports = ({env}) => [
  'strapi::logger',
  'strapi::errors',
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
  {
    name:'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: false,
        directives: {
          "default-src": ["'self'"],
          "connect-src": ["'self'", "https:"],
          "img-src": [
            "'self'",
            "data:",
            "blob:",
            "dl.airtable.com",
            `https://${env("aws_bucket")}.s3.${env("AWS_REGION")}.amazonaws.com/`,
            env("CDN_URL"),
          ],
          "media-src": [
            "'self'",
            "data:",
            "blob:",
            "dl.airtable.com",
            `https://${env("aws_bucket")}.s3.${env("AWS_REGION")}.amazonaws.com/`,
            env("CDN_URL"),
          ],
          "frame-src": [env("CLIENT_URL")],
          "script-src": ["'self'", "'unsafe-inline'"],
          "style-src": ["'self'", "'unsafe-inline'"],
        },
      },
    },
  },
];

总结 #

核心是让跨域图片以anonymous模式加载，同时确保S3/CDN返回正确的跨域响应头，两者缺一不可。完成配置后重启Strapi，清除浏览器缓存后测试。

内容的提问来源于stack exchange，提问作者Aslann59