在md-editor-v3编辑器中为图片添加referrerpolicy属性

在md-editor-v3编辑器中为图片添加referrerpolicy属性

问题背景

在使用md-editor-v3这个Markdown编辑器时，开发者可能会遇到需要为预览中的图片标签添加referrerpolicy="no-referrer"属性的需求。这个属性可以防止图片请求时发送Referer头信息，对于隐私保护和防止某些防盗链机制非常有用。

技术解决方案

md-editor-v3提供了灵活的XSS配置选项，允许开发者自定义HTML标签的处理方式。要实现为图片标签添加referrerpolicy属性，可以通过以下两种方式：

方法一：使用XSS配置

md-editor-v3内置了XSS防护功能，同时允许开发者通过配置来自定义HTML标签的属性处理。可以通过修改XSS配置来允许并添加referrerpolicy属性：

// 配置示例
const xssOptions = {
  whiteList: {
    img: ['src', 'alt', 'class', 'referrerpolicy']
  }
};

// 在编辑器中使用配置
<MdEditor xssOptions={xssOptions} />

这种方式需要在白名单中明确添加referrerpolicy属性，否则会被XSS过滤器移除。

方法二：使用sanitize方法处理

另一种更灵活的方式是使用sanitize方法通过正则表达式匹配并替换字符串：

const customSanitize = (html) => {
  return html.replace(/<img([^>]*)>/g, (match, attributes) => {
    return `<img${attributes} referrerpolicy="no-referrer">`;
  });
};

// 应用自定义的sanitize方法
<MdEditor sanitize={customSanitize} />

这种方法可以更精细地控制HTML输出，适合需要复杂处理的情况。

实现原理

1. XSS防护机制：md-editor-v3默认会对输出的HTML进行XSS过滤，只保留白名单中的标签和属性
2. 属性添加：通过扩展白名单或后处理HTML字符串，可以安全地添加新属性
3. 图片标签处理：特别针对img标签进行处理，确保不影响其他HTML元素

最佳实践建议

1. 如果只需要添加少量简单属性，推荐使用XSS配置方式，性能更好
2. 如果需要复杂处理或多个标签修改，使用sanitize方法更灵活
3. 在生产环境中，建议同时保留XSS防护的基础配置，只添加必要的自定义规则
4. 测试修改后的输出，确保不会意外破坏原有的Markdown渲染功能

通过以上方法，开发者可以轻松地为md-editor-v3中的图片添加referrerpolicy属性，同时保持编辑器的安全性和稳定性。