無需 JavaScript 即可安全地將不受信任的輸入指派給 CSS 自訂屬性：指南

Question

假設我有一個字串鍵和字串值的對象，我想將它們作為 CSS 自訂屬性寫入伺服器產生的一些 HTML 中。我怎樣才能安全地做到這一點？

我所說的安全是指

• 如果可能的話，自訂屬性宣告不應導致 CSS 語法錯誤，從而阻止瀏覽器正確解析其他樣式宣告或 HTML 文件的部分。如果由於某種原因這是不可能的，則應省略鍵值對。
• 更重要的是，這樣應該不可能進行跨站點腳本編寫。

為了簡單起見，我將限制鍵只允許 [a-zA-Z0-9_-] 類別中的字元。

透過閱讀 CSS 規範和一些個人測試，我認為透過以下步驟來取得值可以取得很大的進展：

• 查找字串
• 確保每個引號後面都有另一個相同類型（“或'）的（未轉義的）引號。如果不是這種情況，請丟棄此鍵/值對。
• 確保字串外部的每個左大括號 {([字串外部的 都有一個符合的右大括號。如果沒有，則丟棄此鍵值對。
• 使用 \3C 轉義 << 的所有實例，以及所有使用 3E 轉義 > 的所有實例。
• 使用 \3B 對 ; 的所有實例進行轉義。

我根據這個 CSS 語法規格想出了上述步驟

對於上下文，這些屬性可以由我們在其他地方插入的用戶自訂樣式使用，但同一物件也用作模板中的模板數據，因此它可能包含旨在作為內容的字串和預期的字串的混合作為CSS 變數。我覺得上面的演算法取得了很好的平衡，既非常簡單，又不會冒丟棄太多可能在CSS 中有用的鍵值對的風險（即使考慮到未來對CSS 的添加，但我想確保我沒有遺漏什麼。

---

這裡有一些 JS 程式碼，展示了我想要實現的目標。 obj 是有問題的對象，而 preprocessPairs 是一個函數，它接受該對象並對其進行預處理，刪除/重新格式化值，如上述步驟所述。

function generateThemePropertiesTag(obj) {
  obj = preprocessPairs(obj);
  return `<style>
:root {
${Object.entries(obj).map(([key, value]) => {
  return `--theme-${key}: ${value};`
}).join("\n")}
}
</style>`
}

所以當給定一個這樣的物件時

{
  "color": "#D3A",
  "title": "The quick brown fox"
}

我希望 CSS 看起來像這樣：

:root {
--theme-color: #D3A;
--theme-title: The quick brown fox;
}

雖然 --theme-title 在 CSS 中使用時是一個非常無用的自訂變量，但它實際上並沒有破壞樣式表，因為 CSS 會忽略它不理解的屬性。

Answer 1

我們實際上可能只使用正規表示式和一些其他演算法，而不必依賴特定的語言，希望這是您所需要的。

透過宣告物件鍵位於 [a-zA-Z0-9_-] 內，我們需要以某種方式解析值。

價值模式

因此，我們可以將其分為幾類，然後看看我們會遇到什麼（為了清楚起見，它們可能會稍微簡化）：

1. '.*'（用撇號包圍的字串；貪婪）
2. ".*"（用雙引號括起來的字串；貪婪）
3. [ -]?\d (\.\d )?(%|[A-z] )?（整數和小數，可選百分比或帶單位）
4. #[0-9A-f]{3,6}（顏色）
5. [A-z0-9_-] （關鍵字、命名顏色、「緩入」等內容）
6. ([\w-] )\([^)] \) （類似url()、calc() 的函數> 等等）

第一次過濾

我可以想像在嘗試識別這些模式之前您可以進行一些過濾。也許我們首先修剪值字串。正如您所提到的， 和> 可以在preprocessPairs() 函數的開頭進行轉義，因為它不會出現為我們上面有的任何模式。如果您不希望在任何地方出現未轉義的分號，您也可以轉義它們。

識別模式

然後我們可以嘗試識別值中的這些模式，對於每個模式，我們可能需要再次執行過濾。我們期望這些模式將由一些（或兩個）空白字元分隔。

包括對多行字串的支援應該沒問題，這是一個轉義的換行符。

語言環境

我們需要認識到我們至少要過濾兩個上下文 - HTML 和 CSS。當我們在 元素中包含樣式時，輸入必須是安全的，同時它必須是有效的 CSS。幸運的是，您沒有將 CSS 包含在元素的 style 屬性中，因此這會稍微容易一些。

基於值模式的篩選

1. 由撇號包圍的字串- 除了撇號和分號之外我們不關心任何東西，因此我們需要在字串中找到這些字元的未轉義實例並對它們進行轉義
2. 同上，只是用雙引號
3. 應該沒問題
4. 應該沒問題
5. 基本沒問題
6. 這是有趣的部分

因此第 1-5 點將非常簡單，透過前面的簡單過濾和修剪將覆蓋大部分值。透過一些添加（不知道對效能有什麼影響），它甚至可能會對正確的單位、關鍵字等進行額外的檢查。

但與其他點相比，我認為相對更大的挑戰是第 6 點。您可能決定簡單地禁止此自訂樣式中的url() ，讓您檢查函數的輸入，因此例如您可能想要轉義分號，甚至可能透過微小的調整再次檢查函數內的模式例如對於calc()。

結論

總的來說，這是我的觀點。透過對這些正規表示式進行一些調整，它應該能夠補充您已經所做的工作，並為輸入 CSS 提供盡可能多的靈活性，同時使您不必在每次調整 CSS 功能時調整程式碼。

範例

function preprocessPairs(obj) {
  // Catch-all regular expression
  // Explanation:
  // (                                   Start of alternatives
  //   \w+\(.+?\)|                       1st alternative - function
  //   ".+?(?<!\)"|                     2nd alternative - string with double quotes
  //   '.+?(?<!\)'|                     3rd alternative - string with apostrophes
  //   [+-]?\d+(?:\.\d+)?(?:%|[A-z]+)?|  4th alternative - integer/decimal number, optionally per cent or with a unit
  //   #[0-9A-f]{3,6}|                   5th alternative - colour
  //   [A-z0-9_-]+|                      6th alternative - keyword
  //   ''|                               7th alternative - empty string
  //   ""                                8th alternative - empty string
  // )
  // [\s,]*
  const regexA = /(\w+\(.+?\)|".+?(?<!\)"|'.+?(?<!\)'|[+-]?\d+(?:\.\d+)?(?:%|[A-z]+)?|#[0-9A-f]{3,6}|[A-z0-9_-]+|''|"")[\s,]*/g;

  // newObj contains filtered testObject
  const newObj = {};

  // Loop through all object properties
  Object.entries(obj).forEach(([key, value]) => {
    // Replace <>;
    value = value.trim().replace('<', '\00003C').replace('>', '\00003E').replace(';', '\00003B');

    // Use catch-all regex to split value into specific elements
    const matches = [...value.matchAll(regexA)];

    // Now try to build back the original value string from regex matches.
    // If these strings are equal, the value is what we expected.
    // Otherwise it contained some unexpected markup or elements and should
    // be therefore discarded.
    // We specifically set to ignore all occurences of url() and @import
    let buildBack = '';
    matches.forEach((match) => {
      if (Array.isArray(match) && match.length >= 2 && match[0].match(/url\(.+?\)/gi) === null && match[0].match(/@import/gi) === null) {
        buildBack += match[0];
      }
    });

    console.log('Compare\n');
    console.log(value);
    console.log(buildBack);
    console.log(value === buildBack);

    if (value === buildBack) {
      newObj[key] = value;
    }
  });

  return newObj;
}

請評論、討論、批評，如果我忘記觸及您特別感興趣的某個主題，請告訴我。

來源

免責聲明：我不是以下提到的來源的作者、所有者、投資者或貢獻者。我只是碰巧用它們來獲取一些資訊。

• https://www.w3.org/TR/css-values-3
• #https ://owasp.org/www-project-web-security-testing-guide/v41/4-Web_Application_Security_Testing/11-Client_Side_Testing/05-Testing_for_CSS_Injection
• https://cheatsheetseries.owasp.org/cheatsheets/Securing_Cascading_Style_Sheets_Cheat_Sheet.html

###