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

透過宣告物件鍵位於 [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