内容安全策略

CKEditor 5 与使用 CSP 规则 的应用程序兼容，并帮助开发人员构建安全的网络。

# 推荐的 CSP 配置

推荐的 CSP 配置允许富文本编辑器开箱即用，并使用来自外部主机的图像或媒体等内容，所有标准功能都可以正常运行，如下所示

default-src 'none'; connect-src 'self'; script-src 'self'; img-src * data:; style-src 'self' 'unsafe-inline'; frame-src *

# CSP 对编辑器功能的影响

某些 CSP 指令会影响某些富文本编辑器功能。以下是指令及其在编辑器中的特定作用的汇总

• default-src 'none': 重置策略并阻止所有内容。所有后续指令都充当白名单。只要它后面跟着其他指令，它本身就不会影响编辑器。

• connect-src 'self'

  • 允许 编辑器上传功能 使用 XMLHttpReqests (Ajax) 将文件上传到服务器，例如，当图像粘贴或拖放到编辑器内容中时。'self’ 值确保请求保留在同一主机内。
  • 允许使用 XMLHttpRequest 自动保存编辑器数据。

  注意: 要使用 CKEditor 云服务，请在 connect-src 指令中包含 http://*.cke-cs.com 域名，例如：connect-src 'self' http://*.cke-cs.com。

• script-src 'self': 仅允许执行来自当前主机的 JavaScript，并且只有在 CKEditor 5 脚本文件 (<script src="[ckeditor-build-path]/ckeditor.js"></script>) 也从该主机提供时才能应用。

  注意: 如果 CKEditor 5 从另一个主机提供，例如官方 CDN，请确保 script-src 的值包含该主机 (script-src 'self' https://cdn.ckeditor.com)。

• img-src * data

  • * 指令值允许编辑器内容中的图像来自任何主机。
  • data: 值允许
    • 将 图像从剪贴板 和 从 MS Office 粘贴到编辑器内容中。粘贴的图像通常表示为 Base64 编码的字符串 (<img src="data:..." />)，如果没有 data:，它们将无法显示和上传。
    • 显示已插入媒体的 媒体嵌入 功能占位符。

  注意: 如果编辑器内容中的所有图像都托管在与您的应用程序相同的域名下，并且您不希望启用 媒体嵌入 和 从 Word 粘贴 功能，请使用更严格的 img-src 'self'。

• style-src 'self' 'unsafe-inline':

  • self 指令允许从站点的自有域名加载样式。从 v42.0.0 开始，编辑器 分发其样式表。如果您需要从其他域名加载样式，请显式添加它们：style-src https://trusted-styles.example.com;。
  • 指令 unsafe-inline 是为了使某些功能的样式正常工作所必需的。例如，如果您想启用诸如 字体 或 文本对齐 或任何其他在内容中使用内联 style="..." 属性的功能，您将需要它。

• frame-src *: 媒体嵌入 功能需要使用预览 (包含 <iframe>) 加载媒体。

  注意: 如果编辑内容中的所有媒体都来自与您的应用程序相同的域名，请使用更严格的 frame-src 'self'。

# 最严格的工作配置

了解每个指令的作用后，允许 CKEditor 5 运行的最严格的规则集如下

default-src 'none'; connect-src 'self'; script-src 'self'; img-src 'self'; style-src 'self'; frame-src 'self'

但这有一些权衡。例如，它要求您

• 从同一主机加载内容中的图像。
• 从同一主机加载内容中的可预览媒体。
• 放弃某些使用内联样式的功能，例如 字体 或 文本对齐。
• 放弃从剪贴板或 从 Office 粘贴图像。