HTMLScriptElement: text 屬性
Baseline 廣泛可用 *
警告：此屬性表示 script 元素的文字內容，根據 script 的型別，它可能是可執行的。像這樣的 API 被稱為注入點，並可能成為跨站指令碼 (XSS) 攻擊的載體。
您可以透過始終分配 TrustedScript 物件而不是字串，並強制執行受信任的型別來減輕這種風險。有關更多資訊，請參閱安全注意事項。
HTMLScriptElement 介面的 text 屬性表示 script 元素的內聯文字內容。它的作用與textContent 屬性相同。
值
獲取該屬性會返回一個包含元素文字的字串。
設定該屬性可以接受 TrustedScript 物件或字串。
描述
HTMLScriptElement 介面的 text 屬性表示 <script> 元素內的文字內容。
對於可執行指令碼type，例如模組或經典指令碼，此文字是內聯可執行程式碼。對於其他型別，它可能代表匯入對映、推測規則或其他型別的資料塊。
請注意，如果設定了 src 屬性，則會忽略 text 屬性的內容。
text vs textContent vs innerText
HTMLScriptElement 的 text 和 textContent 屬性是等效的：都可以用字串或 TrustedScript 型別設定，並且都返回一個表示 script 元素內容的字串。主要區別在於 textContent 也定義在 Node 上，並且可以與其他元素一起使用來設定它們的字串內容。
innerText 通常以與其它方法相同的方式設定和執行文字，但可能返回略微不同的值。原因是此屬性旨在獲取 HTML 標記字串的渲染文字。設定值時，文字被視為文字節點，它會像可見文字一樣規範化字串（摺疊空格並將 \n 轉換為換行符）。這不會改變文字的執行，但會改變儲存和返回的文字。
安全注意事項
text 屬性是跨站指令碼 (XSS) 攻擊的潛在載體，其中可能會執行使用者提供的潛在不安全字串。例如，以下示例假定 scriptElement 是一個可執行的 <script> 元素，並且 untrustedCode 是由使用者提供的。
const untrustedCode = "alert('Potentially evil code!');";
scriptElement.text = untrustedCode; // shows the alert
您可以透過始終分配 TrustedScript 物件而不是字串，並使用 require-trusted-types-for CSP 指令強制執行受信任型別來緩解這些問題。這可以確保輸入透過轉換函式，該函式有機會在文字被注入之前對其進行清理或拒絕。
轉換函式的行為將取決於需要使用者提供的指令碼的具體用例。如果可能，您應該將允許的指令碼鎖定為正好是您信任執行的程式碼。如果不可能，您可能允許或阻止在提供的字串中使用某些函式。
示例
使用 TrustedScript
為了緩解 XSS 風險，我們應始終將 TrustedScript 例項分配給 text 屬性。
可信型別尚未在所有瀏覽器中受支援，因此我們首先定義可信型別小型填充。這可以作為可信型別 JavaScript API 的透明替代品。
if (typeof trustedTypes === "undefined")
trustedTypes = { createPolicy: (n, rules) => rules };
接下來，我們建立一個 TrustedTypePolicy，它定義了一個 createScript() 方法，用於將輸入字串轉換為 TrustedScript 例項。在本例中，我們只允許我們需要的指令碼。
const policy = trustedTypes.createPolicy("inline-script-policy", {
createScript(input) {
// Here specify what scripts are safe to allow
if (input === "const num = 10;\nconsole.log(num)") {
return input; // allow this exact script
}
throw new TypeError(`Untrusted script blocked: ${input}`);
},
});
接下來，我們將建立 script 元素，並將值賦給該元素，並獲取該元素的控制代碼。
<script id="el" type="text/javascript"></script>
// Get the script element we're injecting the code into
const el = document.getElementById("el");
然後，我們使用 policy 物件從潛在不安全的輸入字串建立 trustedScript 物件，並將結果分配給該元素。
// The potentially malicious string
const untrustedScriptOne = "const num = 10;\nconsole.log(num)";
// Create a TrustedScript instance using the policy
const trustedScript = policy.createScript(untrustedScriptOne);
// Inject the TrustedScript (which contains a trusted string)
el.text = trustedScript;
比較 text 和 textContent
在此示例中，我們將透過將程式碼字串分配給元素的 text 屬性和 textContent 屬性來設定 script 元素的值，並讀取結果以顯示結果是等效的。
請注意，在這種情況下，我們沒有使用策略來建立受信任的指令碼（為簡潔起見，我們假設提供的字串是受信任的）。
// Set the text property
el.text = "const num = 10;\nconsole.log(num)";
console.log(el.text); // Output: "const num = 10;\nconsole.log(num);"
console.log(el.textContent); // Output: "const num = 10;\nconsole.log(num);"
// Set the textContent property
el.textContent = "console.log(10);";
console.log(el.text); // Output: "console.log(10);"
console.log(el.textContent); // Output: "console.log(10);"
規範
| 規範 |
|---|
| HTML # dom-script-text-dev |
瀏覽器相容性
載入中…