UEditor上传视频后src属性丢失

Question

在使用UEditor编辑器上传视频时，常见问题之一是视频标签的 `src` 属性上传后丢失或被清空。该问题通常出现在富文本内容提交或回显过程中，表现为视频预览正常，但保存后无法播放。主要原因包括：UEditor默认过滤机制将 `

Answer 1

一、问题现象与初步定位

在使用UEditor编辑器上传视频时，开发者常遇到一个典型问题：视频在编辑器内预览正常，但提交保存后回显时无法播放。通过检查生成的HTML内容发现，<video>标签存在，但其src属性为空或被完全移除。

• 现象：前端富文本中视频可预览，但保存后src丢失
• 影响范围：内容管理系统（CMS）、在线教育平台、新闻门户等富文本场景
• 初步判断方向：可能是UEditor的XSS过滤机制触发了安全策略

二、核心原因深度剖析

层级	可能原因	技术影响
前端配置	videoAllowInsecureUrl: false	阻止非HTTPS资源加载
编辑器过滤	UEditor默认HTML白名单过滤规则	src被视为潜在XSS入口被清除
后端返回	路径为相对URL或未补全协议头	跨域或协议不匹配导致加载失败
浏览器策略	CSP（Content Security Policy）限制	动态插入的src被同源策略拦截

三、排查流程图解

```mermaid
graph TD
    A[视频上传并预览] --> B{保存后src丢失?}
    B -->|是| C[检查UEditor配置项]
    C --> D[确认videoAllowInsecureUrl设置]
    D --> E[查看后端返回的JSON数据]
    E --> F[验证url是否为完整绝对路径]
    F --> G[审查服务端XSS过滤逻辑]
    G --> H[检测浏览器控制台CSP警告]
    H --> I[调整配置或绕过策略]
    I --> J[重新测试全流程]
```

四、关键配置与代码修复方案

解决该问题需从前端初始化配置入手，确保允许视频资源加载：

// UEditor 初始化配置示例
var ue = UE.getEditor('container', {
    toolbars: [...],
    videoAllowInsecureUrl: true,           // 允许HTTP视频源
    allowDivTransToP: false,
    retainOnlyLabelPars: []                // 清空仅保留标签的过滤规则
});

同时，在服务器端返回上传结果时，必须确保返回的是完整的绝对URL：

// 示例：Java后端构建绝对路径
String domain = "https://cdn.example.com";
String relativePath = "/uploads/video/123.mp4";
return domain + relativePath;  // 确保协议+域名+路径

五、服务端HTML净化策略调优

许多系统集成了Jsoup、Commons Text等HTML清理工具，若规则过于严格，会误删video[src]属性。建议调整白名单策略：

• 添加video标签至允许列表
• 明确授权src、controls、autoplay等属性
• 避免使用正则表达式粗暴过滤HTML片段

以Jsoup为例：

Cleaner cleaner = new Cleaner(Whitelist.basic()
    .addTags("video", "source")
    .addAttributes("video", "src", "controls", "preload")
    .addProtocols("video", "src", "http", "https"));

六、浏览器安全策略兼容处理

现代浏览器对动态脚本和媒体资源有严格限制。可通过以下方式增强兼容性：

1. 启用CORS支持：服务端响应头包含Access-Control-Allow-Origin: *
2. 部署CDN时统一使用HTTPS协议
3. 在Meta中声明宽松的CSP策略（开发环境）：
   <meta http-equiv="Content-Security-Policy" content="media-src 'self' https:">
4. 监控控制台错误日志，识别被阻止的资源请求