React+MUI中MSE代码在Firefox触发Blob安全错误的原因？

问题现象 #

在React + MUI项目中使用Media Source Extension API实现摄像头驱动类时，将生成的Blob URL通过React状态绑定到<video>的src属性，在Chrome和Safari中可正常运行，但Firefox 118.0.1会抛出安全错误：

Security Error: Content at http://localhost:3000/ may not load data from blob:http://localhost:3000/26794ddf-bbc7-4aec-8eec-d2bc0cd61eef.

而通过useRef直接设置video元素的src、或使用旧版ReactDOM.render时无此问题。

错误原因 #

Firefox对Blob URL的跨上下文安全校验更为严格：

• React状态更新触发组件重渲染时，Blob URL通过状态传递给src属性的过程中，虚拟DOM的diff机制可能导致该URL在不同渲染上下文被处理，触发Firefox的安全策略拦截。
• 直接通过useRef操作真实DOM元素的src属性，是在当前上下文完成赋值，不会触发跨上下文的安全检查。
• React的并发渲染机制（即使未显式启用）可能导致状态更新与DOM渲染的时机存在间隙，进一步触发Firefox的安全校验逻辑。

解决方案与规避要点 #

1. 使用useRef直接操作video DOM元素
   避免通过React状态传递Blob URL，在驱动实例创建完成后直接通过ref获取真实DOM并设置src：

   function App() {
     const videoRef = React.useRef<HTMLVideoElement>(null);
     const [camera, setCamera] = React.useState(...);
   
     React.useEffect(() => {
       let driver: Driver | null = null;
       if (camera) {
         driver = new Driver(camera);
         videoRef.current?.setAttribute('src', driver.url);
       }
       return () => {
         if (driver) {
           URL.revokeObjectURL(driver.url);
           driver.destroy();
         }
       };
     }, [camera]);
   
     return <video ref={videoRef} autoPlay muted />;
   }
   

2. 不要将Blob URL存入React状态
   Blob URL是浏览器生成的临时资源标识，不适合作为状态存储。状态应仅保存驱动MediaSource的核心数据（如camera实例），Blob URL的赋值直接在DOM操作层完成。
3. 严格管理Blob URL的生命周期
   在组件卸载或camera切换时，必须调用URL.revokeObjectURL()释放Blob URL资源，既避免内存泄漏，也能降低触发安全策略的概率。

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