疑難排解內容安全性原則錯誤
在 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 值，並將任何 URL 新增至 img-src 指令。
|
|
使用「狀態定義」、「樣式定義」或「選單定義」實體的小器具可以連結至外部 URL 上的圖像。
|
img-src
|
檢閱小器具樣式定義或狀態定義中使用的媒體實體並新增任何外部 URL 到 img-src CSP 指令。
|
|
顯示資料的小器具 (如「格點」與「值顯示」) 可能包含 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 指令及其支援值的詳細資訊，請參閱下列資源：
• Content-Security-Policy (CSP) 標題快速參考
• Mozilla 開發者網路上的內容安全性原則 (CSP)