跳到主要內容
版本：v8

安全性

清理使用者輸入​

對於像是 ion-alert 等組件，開發人員可以允許自訂或使用者提供的內容。此內容可以是純文字或 HTML，並且應視為不受信任的內容。如同任何不受信任的輸入一樣，在對其進行任何操作之前，務必先進行清理。特別是，在沒有清理的情況下使用像是 innerHTML 等功能，會為惡意人士輸入惡意內容，並可能發動跨網站指令碼攻擊（XSS）提供攻擊途徑。

Ionic 內建有針對其提供的組件的基本清理實作。然而，這並非全面的解決方案。開發人員有責任確保傳遞的所有資料都經過清理。不同的框架針對清理使用者輸入有不同的解決方案，因此開發人員應該熟悉其特定框架提供的功能。

對於未使用框架的開發人員，或是框架未提供所需清理方法的開發人員，我們建議使用sanitize-html。此套件提供簡單的 HTML 清理器，讓開發人員可以指定他們想要在其應用程式中允許的確切標籤和屬性。

Angular​

Angular 內建有 DomSanitizer 類別。這有助於透過確保值在 DOM 中安全使用來防止 XSS 問題。預設情況下，Angular 會將其認為不安全的值標記為不安全。例如，以下連結會被 Angular 標記為不安全，因為它會嘗試執行一些 JavaScript。

public myUrl: string = 'javascript:alert("oh no!")';

...

<a [href]="myUrl">Click Me!</a>

若要瞭解更多關於 Angular 提供的內建保護，請參閱Angular 安全性指南。

React​

React DOM 會在呈現 JSX 之前，透過將嵌入在 JSX 中的值轉換為字串來逸出這些值。例如，以下程式碼是安全的，因為 name 在呈現之前會轉換為字串

const name = values.name;
const element = <h1>Hello, {name}!</h1>;

然而，這無法阻止有人將 JavaScript 注入到像是錨點元素的 href 屬性等位置。以下程式碼是不安全的，並且可能會發生 XSS 攻擊

const userInput = 'javascript:alert("Oh no!")';
const element = <a href={userInput}>Click Me!</a>;

如果開發人員需要更全面的清理，他們可以使用sanitize-html套件。

Vue​

Vue 並未提供任何類型的內建清理方法。建議開發人員使用像是sanitize-html的套件。

若要瞭解更多關於繫結至像是 v-html 等指令的安全性建議，請參閱Vue 語法指南。

透過 innerHTML 啟用自訂 HTML 解析​

ion-alert、ion-infinite-scroll-content、ion-loading、ion-refresher-content 和 ion-toast 可以接受自訂 HTML 字串作為特定屬性。這些字串會使用 innerHTML 新增至 DOM，並且必須由開發人員正確清理。此行為預設為停用，這表示傳遞至受影響組件的值永遠會被解譯為純文字。開發人員可以透過在IonicConfig中設定 innerHTMLTemplatesEnabled: true 來啟用此自訂 HTML 行為。

退出內建清理器​

對於想要將複雜 HTML 新增至像是 ion-toast 等組件的開發人員，他們需要退出 Ionic Framework 內建的清理器。開發人員可以選擇在整個應用程式中停用清理器，或是根據個別情況繞過它。

注意

繞過清理功能可能會使您的應用程式容易遭受XSS 攻擊。停用清理器時請務必格外小心。

透過設定停用清理器​

Ionic Framework 提供名為 sanitizerEnabled 的應用程式設定選項，預設值為 true。將此值設定為 false 可以全域停用 Ionic Framework 的內建清理器。請注意，這不會停用其他框架（例如 Angular）提供的任何清理功能。

根據個別情況繞過清理器​

開發人員也可以選擇在某些情況下退出清理器。Ionic Framework 提供 IonicSafeString 類別，讓開發人員可以執行此操作。

注意

若要在相關的 Ionic 組件中繞過清理器並使用未清理的自訂 HTML，必須在 Ionic 設定中將 innerHTMLTemplatesEnabled 設定為 true。

如果 innerHTMLTemplatesEnabled 設定為 false，則不應使用 IonicSafeString。

請參閱啟用自訂 HTML 解析以取得更多資訊。

用法​

import { IonicSafeString, ToastController } from '@ionic/angular';

...

constructor(private toastController: ToastController) {}

async presentToast() {
  const toast = await this.toastController.create({
      message: new IonicSafeString('<ion-button>Hello!</ion-button>'),
      duration: 2000
  });
  toast.present();
}

內容安全原則（CSP）​

內容安全原則 (CSP) 是一種安全機制，有助於保護 Web 應用程式免受某些類型的攻擊，例如跨網站指令碼 (XSS) 和資料注入。它是透過 HTTP 標頭實作，該標頭會指示瀏覽器，允許在網頁上載入和執行哪些內容來源，例如指令碼、樣式表和影像。

CSP 的主要目的是降低與程式碼注入攻擊相關的風險。透過定義原則，Web 開發人員可以指定瀏覽器應允許從哪些網域或來源載入和執行各種類型的內容。這有效地限制了惡意指令碼或未經授權的內容可能造成的潛在損害。

啟用 CSP​

開發人員可以透過設定帶有原則詳細資訊和指令碼和樣式標籤上預期 nonce 值的 meta 標籤，將 CSP 指派給他們的應用程式。

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; script-src 'self' 'nonce-randomNonceGoesHere'; style-src 'self' 'nonce-randomNonceGoesHere';"
/>

Ionic 和 CSP​

Ionic Framework 提供一個函式，以協助開發人員設定建構 Web 組件樣式表時使用的 nonce 值。此函式應在載入任何 Ionic 組件之前呼叫。這是將 nonce 值傳遞至 Web 組件的必要條件，以便它們可以在 CSP 環境中使用。

import { setNonce } from '@ionic/core/loader';

setNonce('randomNonceGoesHere');
提示

在 Angular 中，可以在應用程式啟動之前的 main.ts 檔案中呼叫此函式。

若要瞭解更多關於如何將 CSP 與 Stencil Web 組件搭配使用的資訊，請參閱Stencil 文件。

Angular​

從 Angular 16 開始，Angular 提供了兩種設定 nonce 值的方法。

  1. 在根應用程式元素上設定 ngCspNonce 屬性，例如 <app ngCspNonce="randomNonceGoesHere"></app>。如果您可以存取伺服器端範本，在建構回應時將 nonce 新增至標頭和 index.html，請使用此方法。
  2. 使用 CSP_NONCE 注入令牌提供 nonce。如果您可以在執行時存取 nonce，並且希望能夠快取 index.html，請使用此方法。
提示

如果提供 CSP_NONCE 注入令牌，請在模組專案的 AppModule 中或在獨立專案的 bootstrapApplication 中設定 provider。

有關如何在 Angular 中使用 CSP 的更多資訊，請參閱 Angular 文件。

目錄

編輯此頁面