在md-editor-v3中处理Markdown图片请求的Token认证问题

在md-editor-v3中处理Markdown图片请求的Token认证问题

问题背景

在Vue3项目中使用md-editor-v3编辑器时，开发者遇到一个典型问题：Markdown文档中的图片请求需要携带Token进行认证，但这类请求未被项目的前端拦截器处理。例如以下Markdown图片语法：

![](http://test.cn:71/prod-api/image/getImage?imageId=48)

这类动态图片请求需要Authorization头信息，但浏览器直接发起的图片请求无法自动携带Token。

技术分析

1. 常规解决方案的局限性

通常在前端项目中，我们会通过请求拦截器统一添加Token。但对于Markdown中的图片请求：

• 图片请求由浏览器直接发起，不经过axios等HTTP客户端
• <img>标签无法自定义请求头
• 标准的HTTP拦截器对这类请求无效

2. 可行的技术方案

方案一：Base64转换（推荐）

通过预处理将图片转换为Base64格式：

1. 在Markdown解析阶段拦截图片URL
2. 使用同步请求获取图片二进制数据
3. 转换为Base64格式内联显示

// 伪代码示例
function processImage(url) {
  const res = await fetch(url, {
    headers: { Authorization: `Bearer ${token}` }
  });
  const blob = await res.blob();
  return `data:${blob.type};base64,${await blobToBase64(blob)}`;
}

方案二：URL重写

后端提供支持Token的图片访问方案：

• 采用短期有效的签名URL
• 将Token作为查询参数（需注意安全性）
• 使用Cookie认证替代Header

方案三：Sanitize后处理

利用编辑器的sanitize属性对生成的HTML进行后处理：

sanitize: (html) => {
  return html.replace(/<img src="(.*?)"/g, (match, url) => {
    return `<img src="${url}&token=${getToken()}"`;
  });
}

最佳实践建议

1. 接口优化优先：建议后端改造为：

   • 支持签名URL
   • 或改为Cookie认证
   • 或提供永久公开链接

2. 前端处理注意事项：

   • Base64转换会显著增加文档体积
   • 同步请求可能阻塞渲染
   • 需要考虑图片缓存策略

3. 安全提醒：

   • 避免将Token直接暴露在URL中
   • 控制图片访问权限时效
   • 对敏感图片添加水印等保护措施

总结

md-editor-v3作为纯前端Markdown编辑器，对需要认证的图片资源处理需要特殊方案。开发者应根据实际业务场景，在后端接口设计和前端实现方案间找到平衡点。对于高安全要求的场景，建议优先采用后端生成的签名URL方案；对于简单场景，可考虑Base64内联或URL重写方案。