React项目升级后GrapeJs中外部图片URL无法加载问题求助

问题背景 #

升级React项目依赖包后：

"grapesjs": "^0.18.1",
"grapesjs-preset-webpage": "^0.1.11",
"react": "^18.2.0",
"react-device-detect": "^2.2.2",
"react-dom": "^18.2.0",
"next": "^13.1.1",
"next-images": "^1.8.4",

GrapesJS编辑器中通过外部URL引入的图片突然无法加载，但将图片下载到本地public文件夹后可正常显示，且项目其他区域的外部URL图片不受影响。相关代码示例：

export const customBlocks = (editordata) => {
    const blockManager = editordata.BlockManager
    blockManager.add('footer1', {
        content: `<img id="ioje" src="https://img.icons8.com/windows/32/00a6a6/left2.png" class="ioje"/>`,
        category: 'Footers',
        attributes: {
            title: 'Predefined Footer',
        },
    })
    blockManager.add('footer12', {
        content: `<img id="ioje" src=${require("../../../public/left2.png")} class="ioje"/>`,
        category: 'Footers',
        attributes: {
            title: 'Predefined Footer1',
        },
    })
}

其中footer1（外部链接图片）加载失败，footer12（本地图片）正常显示。

排查方向 #

1. GrapesJS内容安全策略（CSP）限制：新版本GrapesJS可能默认收紧了资源加载规则，阻止外部图片资源加载。
2. HTML内容转义错误：代码中使用的HTML实体转义可能导致图片URL解析异常。
3. 跨域访问限制：外部图片服务器的CORS策略可能阻止GrapesJS的iframe编辑器加载资源。

解决方案 #

1. 调整GrapesJS的CSP配置 #

在初始化GrapesJS时，修改contentSecurityPolicy选项，允许加载外部HTTPS图片：

const editor = grapesjs.init({
  // 其他原有配置
  contentSecurityPolicy: "img-src 'self' https: data:;",
});

如果需要更宽松的配置（根据项目安全需求调整）：

contentSecurityPolicy: "default-src *; img-src * data:; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';"

说明：新版本GrapesJS默认的CSP可能仅允许本地资源，通过添加https:到img-src规则，放开外部HTTPS图片的加载权限。

2. 修正HTML内容的转义方式 #

代码中使用的HTML实体转义（<、"）容易引发解析错误，建议直接使用模板字符串编写原始HTML：

blockManager.add('footer1', {
    content: `<img id="ioje" src="https://img.icons8.com/windows/32/00a6a6/left2.png" class="ioje"/>`,
    category: 'Footers',
    attributes: {
        title: 'Predefined Footer',
    },
})

说明：模板字符串中无需转义双引号，既提高可读性，也避免转义错误导致的URL无法识别。

3. 处理跨域访问问题 #

如果外部图片服务器存在跨域限制，可调整GrapesJS的iframe配置：

const editor = grapesjs.init({
  // 其他原有配置
  iframe: true,
  iframeOptions: {
    allow: "cross-origin-isolated",
  },
});

若对方服务器未配置CORS头，可考虑通过项目后端代理转发图片请求，避免跨域限制。

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