假設我有一個字符串鍵和字符串值的對象，我想把它們作為CSS自定義屬性寫到服務器生成的HTML中。我怎么能這么安全地做呢？

我說的安全是指

如果可能的話，自定義屬性聲明不應該導致CSS語法錯誤，從而阻止瀏覽器正確解析其他樣式聲明或HTML文檔的一部分。如果由于某種原因這是不可能的，那么鍵值對應該被省略。 更強烈的是，不應該有跨站點腳本的可能性。 為了簡單起見，我將把鍵限制為只允許類[a-zA-Z0-9_-]中的字符。

通過閱讀CSS規范和一些個人測試，我認為我可以通過以下步驟獲取值:

尋找字符串 確保每個引號后面都跟有另一個相同類型的(非轉義)引號(& quot或者’)。如果不是這樣，就放棄這個鍵/值對。 確保字符串外部的每個左大括號{([都有一個匹配的右大括號。如果不是，就丟棄這個鍵值對。 轉義& lt與\3C和所有& gt和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忽略了它不理解的屬性。

我們實際上可能只使用正則表達式和一些其他算法，而不必依賴于一種特定的語言，希望這是你在這里需要的。

通過聲明對象鍵在[a-zA-Z0-9_-]內，我們需要以某種方式解析值。

價值模式 因此，我們可以將其分為幾類，看看我們會遇到什么(為了清楚起見，可能會稍微簡化):

。* '(用撇號括起來的字符串；貪婪) "。* & quot(雙引號括起來的字符串；貪婪) [+-]?\d+(\。\d+)？(%|[A-z]+)？(整數和小數，可選百分比或單位) #[0-9A-f]{3，6}(顏色) [A-z0-9_-]+(關鍵字、命名顏色、類似& quot放松& quot) ([\w-]+)\([^)]+\](像url()、calc()等函數。) 首次過濾 我可以想象，在試圖識別這些模式之前，你可以做一些過濾。也許我們首先修剪值串。正如你提到的，& lt并且& gt可以在preprocessPairs()函數的開頭進行轉義，因為它不會出現在上面的任何模式中。如果您不希望在任何地方出現未轉義的分號，您也可以對它們進行轉義。

識別模式 然后，我們可以嘗試識別值中的這些模式，對于每個模式，我們可能需要再次運行過濾。我們預計這些模式將由一些空白字符(或兩個)分隔。

包括對多行字符串的支持應該沒問題，那是轉義換行符。

語言環境 我們需要認識到，我們至少在過濾兩種上下文——HTML和CSS。因為我們在& ltstyle & gt元素，輸入必須是安全的，同時它必須是有效的CSS。幸運的是，您沒有在元素的style屬性中包含CSS，所以這稍微容易一些。

基于價值模式的過濾 被撇號包圍的字符串——除了撇號和分號之外，我們什么都不關心，所以我們需要在字符串中找到這些字符的非轉義實例，并對它們進行轉義 同上，只是用了雙引號 應該沒問題 應該沒問題 非常好 這是有趣的部分 因此，第1-5點將非常容易，通過前面的簡單過濾和修整將覆蓋大多數值。通過一些添加(不知道對性能有什么影響)，它甚至可以對正確的單位、關鍵字等進行額外的檢查。

但我認為，與其他要點相比，第六點是一個相對更大的挑戰。您可能決定在這種自定義樣式中簡單地禁止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-we b-Security-Testing-guide/v 41/4-Web _ Application _ Security _ Testing/11-Client _ Side _ Testing/05-Testing _ for _ CSS _ Injection https://cheatsheetseries . owasp . org/Cheat Sheets/Securing _ Cascading _ Style _ Sheets _ Cheat _ sheet . html