ckEditor 5 字体和 Ident 依赖项/模块包含内联样式并违反我的 CSP

Question

我使用 CKEditor 5 进行自定义构建，将字体和缩进模块包含到 github 上存在的基本构建中。我的 Web 环境 CSP 不允许任何内联样式或 javascript。安全策略也不允许任何到外部服务器的链接，这就是为什么我需要构建与我的应用程序一起分发的 .js 和 .css 文件。

对于我的自定义构建，我按照 CKEditor 文档 (https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/csp.html) 的建议进行了修改，以在编辑器构建过程。当我这样做时，提取的唯一样式是与主题相关的样式。这确实解决了大部分内联样式问题，并允许控件在我的页面中正确显示。但是，当我尝试使用缩进或字体功能时，我仍然收到内联样式错误。

我得到的错误是：

• Content-Security-Policy：页面的设置阻止应用内联样式 (style-src-attr)，因为它违反了以下指令：“style-src 'self' 'nonce-MC4yNDc5NTAyNDgxMTI0Mzc4Mg==' 'report-sample' ”

对于缩进功能，它试图在 JavaScript 中插入 margin-left 或 margin-right 样式，这就是导致错误的原因。

我的 CSP 是：

• Content-Security-Policy","frame-祖先'self'; default-src 'self' 'nonce-" + nonce + "'; script-src 'self' 'nonce-" + nonce + "' '报告样本';对象-src'自我'；字体-src'自我'； style-src 'self' 'nonce-" + nonce + "' 'report-sample'; img-src '自我';框架-src'自我'；连接-src'自我'；媒体-src“自我”

让这些功能通过严格的“无内联”CSP 通过的解决方案是什么？

Answer 1

在我看来，您必须为属性添加一些自定义向下转换（模型到视图）和向上转换（视图到模型）。

这里是如何将 font-size 转换为类而不是内联属性的示例。

    this.editor.conversion.for('downcast').add((dispatcher) => {
    dispatcher.on(`attribute:fontSize`,
        (evt, data, conversionApi) => {
            const modelItem = data.item;

            const consumable = conversionApi.consumable;
            //you need to make sure to consume the attribute so it doesn't get consumed 
            //in lower priority converters such as the default one
            if (!consumable.test(data.item, 'attribute:fontSize')) {
                return;
            }

            consumable.consume(data.item, 'attribute:fontSize');
            const fontSize = modelItem.getAttribute('fontSize');
            const viewItem = conversionApi.mapper.toViewElement(modelItem);
            conversionApi.writer.addClass(
                `text-[${fontSize}]`,
                viewItem
            );

        }, {
            priority: 'highest'
        }
    );
})

上面的沮丧会产生类似的东西

<p class="text-[14px]">test text</p>

兼容tailwindCss

要向上转换（再次将其读入 ckEditor），您需要执行类似的操作

this.editor.conversion.for('upcast').attributeToAttribute({
view: {
    key: 'fontSize',
},
model: {
    key: 'class',
    value: (viewElement) => {
        const classes = Array.from(viewElement.getClassNames());
        const fontSizeClass = classes.find((c) => c.includes('text-'));
        return fontSizeClass ? fontSizeClass.replace('text-', '').replace('[', '').replace(']', '') : null;
    },
},
converterPriority: 'highest',
});

上面的代码应该查找以

text-

开头的类，并从中提取字体大小并将其作为 fontSize 属性分配给模型项。

请注意，我没有机会运行代码，但这是我用来解决此类问题的一般原则