排除内容安全策略错误
在 ThingWorx 服务器上启用内容安全策略 (CSP) 会显著影响从外部源加载内容的混搭和扩展的行为。ThingWorx 中应用的默认 CSP 指令会阻止来自外部源的所有内容。ThingWorx 管理员应定义符合混搭安全和功能要求的内容策略。本主题概述了可能受默认 CSP 指令影响的常见用例，并针对标识和解决 CSP 错误提供了相关指导。
标识混搭中受影响的小组件、函数和布局
下表列出了可能会在启用 CSP 后受阻的不同类型的混搭内容。
|
混搭内容
|
CSP 指令
|
解决方案
|
|---|---|---|
|
使用直接链接嵌入内容的小组件，例如 Web 框架小组件。此小组件支持在混搭中嵌入内容，方法是使用 URL 属性指定来自外部源的链接。
|
frame-src
|
测试所有 Web 框架小组件，并确保 frame-src 指令不会阻止 URL 属性值。将所有必要的 URL 添加到 CSP frame-src 指令的值。
|
|
支持从 URL 加载图像的混搭项，例如小组件、函数或具有一个或多个属性的容器。例如，当图像小组件的 ImageSRC 属性设置为从 URL 加载图像时。此选项位于 Mashup Builder 的媒体实体选取器中。  混搭中的以下项包含一个或多个支持从 URL 加载图像的属性： • 小组件：按钮小组件 (可应用主题)、复选框小组件 (可应用主题)、日期时间选取器小组件 (可应用主题)、下拉列表小组件 (可应用主题)、动态面板小组件 (可应用主题)、文件上传小组件 (可应用主题)、栅格小组件、图标小组件 (可应用主题)、图像小组件 (可应用主题)、标签小组件 (可应用主题)、单选按钮小组件 (可应用主题)、文本区域小组件、文本字段小组件 (可应用主题)、切换按钮小组件 (可应用主题)、值显示小组件 (可应用主题)、菜单栏小组件 (可应用主题)、选项卡小组件 (旧版)、选项卡 - 响应式小组件 (旧版) • 函数：确认函数。 • 容器：Flexbox 容器 |
img-src
|
审阅这些项的图像 URL 值，并添加所有指向 img-src 指令的 URL。
|
|
使用状态定义、样式定义或菜单定义实体的小组件可链接至外部 URL 中的图像。
|
img-src
|
审阅小组件样式或状态定义中使用的媒体实体，并添加所有指向 img-src CSP 指令的外部 URL。
|
|
显示栅格和值显示等数据的小组件可能包含 HTML 或执行 JavaScript 代码。在混搭中加载此类型的内容需要多种类型的 CSP 指令。例如，当小组件显示嵌入图像或参考对象的 HTML 时。
|
全部
|
审阅所显示的全部 HTML 代码，并确保所有引用均符合 CSP 策略。更新显示 HTML 数据所需的指令。
|
|
当引用外部图像、字体或样式时，使用自定义 CSS 的混搭可能会受到影响。默认情况下，使用 @import 语句导入 /Thingworx/FileRepositories 外的文件时会遭到阻止。
|
style-src、image-src、font-src
|
审阅任何受影响的混搭或样式主题的“自定义 CSS”选项卡，并更新相关 CSP 指令。
|
|
导入的扩展，例如包含对框架、图像、字体、样式或 URL 的外部引用的自定义小组件。
|
全部
|
审阅加载和使用扩展所需的外部引用，然后更新 CSP 指令值以允许任何所需的引用。
|
查看运行时应用于混搭的 CSP 指令
可使用浏览器中的开发人员工具查看当前应用于混搭的 CSP 指令。
1. 在 Composer 中，打开要检查的混搭，然后单击“查看混搭”。
2. 在浏览器中，打开开发人员工具并重新加载页面以捕获网络流量。
3. 在 Network 选项卡上，选择服务或从 ThingWorx 服务器加载的 index.html 文件。
4. 在 Response Headers 下，检查 Content-Security-Policy 标头。
随即将列出已应用的 CSP 指令。各个指令以分号分隔。
 | 对 PlatformSystem“内容安全策略规则”选项卡上的 CSP 指令的更改将在一分钟内更新。 |
解决混搭中 CSP 指令的错误消息
1. 在 Composer 中，打开要检查的混搭，然后单击“查看混搭”。
2. 打开浏览器的开发人员工具，然后查看“控制台”日志。
混搭内容违反 CSP 指令时，会显示 CSP 错误消息。每条消息都包含违反指令的资源值以及阻止资源载入的 CSP 指令的名称。
3. 与 ThingWorx 管理员协作共同更新 PlatformSubsystem 中定义的 CSP 指令。
有关更新 CSP 指令的详细信息，请参阅 ThingWorx 中的内容安全策略 (CSP)。
下图显示了由于 CSP 指令而无法加载内容的混搭示例：
以下每个小组件均配置有下列值：
• 标签 - 从外部源加载自定义字体的自定义 CSS：https://fonts.google.com/
• 图像 - ImageURL 属性设置为从外部站点加载图像：wikimedia.org
• Web 框架 - URL 属性设置为加载外部网页：https://www.ptc.com
此外，自定义 CSS 规则也可应用于混搭：
@import url("/Thingworx/FileRepositories/Systemrepository/alerts.css");
@font-face {
font-family: "Open Sans";
src: url('https://fonts.google.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
}
@font-face {
font-family: "Open Sans";
src: url('https://fonts.google.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
}
控制台日志在运行时会显示以下 CSP 错误。
以下默认指令会阻止在该混搭中加载内容：
• img-src 'self' data: - 阻止从外部源加载图像。
• font-src 'self' - 阻止使用 @font-face 语句导入字体。
• frame-src 'self' tw-ra-client: - 阻止框架加载与 ThingWorx 服务器不在同一域名上的网页。
要修复这些错误，必须更新阻止此内容加载的相关 CSP 指令。可有选择地为加载内容所需的受信任站点添加 URL。要加载此示例中的内容，可为每个指令添加以下值：
• img-src: *wikimedia.org - 允许从 wikimedia.org 及其任意子域加载图像。
• frame-src: ptc.com - 允许从 ptc.com 加载框架。
• font-src: https://fonts.google.com - 仅允许通过 HTTPS 从 fonts.google.com 加载字体。
有关 CSP 指令及其支持值的详细信息，请参阅以下资源：
• 内容安全策略 (CSP) 标头快速参考
• Mozilla 开发人员网络上的内容安全策略 (CSP)