Electron+React集成TinyMCE遇CSP报错，求安全解决方案

我基于 electron-react-boilerplate 搭建 Electron + React 桌面应用，集成 TinyMCE 编辑器后出现以下错误，编辑器无法正常显示。我找到过一些解决方案，但担心安全性，想寻求安全的解决办法。

错误信息 #

Refused to load the script 'https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

我的代码 #

index.ejs #

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'" />
    <title>Pecan</title>
</head>

<body>
    <div id="root"></div>
</body>

</html>

App.tsx #

import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
import Editor from './pages/editor';

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Editor />} />
      </Routes>
    </Router>
  );
}

编辑器组件 #

import { useRef } from 'react';
import { Editor } from '@tinymce/tinymce-react';

export default () => {
  const editorRef = useRef(null);
  const log = () => {
    if (editorRef.current) {
      console.log(editorRef.current.getContent());
    }
  };

  return (
    <>
      <Editor
        onInit={(evt, editor) => {
          editorRef.current = editor;
        }}
        initialValue="<p>This is the initial content of the editor.</p>"
        init={{
          height: 500,
          menubar: false,
          plugins: [
            'advlist',
            'autolink',
            'lists',
            'link',
            'image',
            'charmap',
            'anchor',
            'searchreplace',
            'visualblocks',
            'code',
            'fullscreen',
            'insertdatetime',
            'media',
            'table',
            'preview',
            'help',
            'wordcount',
          ],
          toolbar:
            'undo redo | blocks | ' +
            'bold italic forecolor | alignleft aligncenter ' +
            'alignright alignjustify | bullist numlist outdent indent | ' +
            'removeformat | help',
          content_style:
            'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
        }}
      />
      <button onClick={log} type="button">
        Log editor content
      </button>
    </>
  );
};

安全解决方案 #

方案1：本地托管 TinyMCE 资源（最安全） #

直接将 TinyMCE 资源下载到本地项目，完全不依赖外部 CDN，彻底规避外部脚本的安全风险：

1. 安装 TinyMCE 核心包：

npm install tinymce

2. 修改编辑器组件的 <Editor> 配置，添加 tinymceScriptSrc 指定本地资源路径：

<Editor
  tinymceScriptSrc={`${window.location.origin}/node_modules/tinymce/tinymce.min.js`}
  // 保留原有其他配置
/>

3. 保持原 CSP 配置不变，无需添加外部域名：

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'" />

方案2：严格配置 CSP 允许可信 CDN（安全且便捷） #

若必须使用 CDN，不要放宽 CSP 到允许任意外部脚本，仅添加 TinyMCE 官方可信域名：

1. 修改 index.ejs 中的 CSP 配置，将 TinyMCE CDN 域名加入 script-src：

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' https://cdn.tiny.cloud" />

2. 确保编辑器使用官方 CDN 地址，避免不可信来源的脚本。

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