Nous pourrions en fait simplement utiliser des expressions régulières et d'autres algorithmes sans avoir à nous appuyer sur un langage spécifique, j'espère que c'est ce dont vous avez besoin.

En déclarant que la clé de l'objet est à l'intérieur [a-zA-Z0-9_-], nous devons analyser la valeur d'une manière ou d'une autre.

Modèle de valeur

Nous pouvons donc le diviser en catégories et voir ce que nous rencontrons (elles peuvent être légèrement simplifiées pour plus de clarté) :

1. '.*' (chaîne entourée d'apostrophes ; gourmand)
2. ".*" (Chaîne entre guillemets doubles ; gourmande)
3. [+-]?d+(.d+)?(%|[A-z]+)? (entier et décimal, pourcentage optionnel ou avec unité)
4. #[0-9A-f]{3,6}(couleur)
5. [A-z0-9_-]+ (Mots clés, dénomination des couleurs, "facilité d'entrée", etc.)
6. ([w-]+)([^)]+) （类似 url()、calc() fonction > etc.)

Premier filtre

J'imagine que vous pourriez effectuer un filtrage avant d'essayer d'identifier ces modèles. Peut-être que nous coupons d'abord la chaîne de valeur. Comme vous l'avez mentionné, 和 > 可以在 preprocessPairs() est échappé au début de la fonction car il n'apparaîtra comme aucun des modèles que nous avons ci-dessus. Si vous ne souhaitez pas que les points-virgules non échappés apparaissent n'importe où, vous pouvez également les échapper.

Modèle de reconnaissance

Nous pouvons ensuite essayer d'identifier ces modèles dans values, et pour chaque modèle, nous devrons peut-être réexécuter le filtrage. Nous nous attendons à ce que ces modèles soient séparés par quelques (ou deux) caractères d'espacement.

Cela devrait être bien d'inclure la prise en charge des chaînes multilignes, qui sont une nouvelle ligne échappée.

Local

Nous devons réaliser que nous avons au moins deux contextes à filtrer : HTML et CSS. Quand on est dans l'attribut 元素中包含样式时，输入必须是安全的，同时它必须是有效的 CSS。幸运的是，您没有将 CSS 包含在元素的 style, c'est donc un peu plus facile.

Filtrage basé sur un modèle de valeur

1. Chaînes entourées d'apostrophes - nous ne nous soucions de rien d'autre que des apostrophes et des points-virgules, nous devons donc trouver des instances sans échappement de ces caractères dans la chaîne et leur échapper
2. Idem que ci-dessus, utilisez simplement des guillemets doubles
3. Ça ne devrait poser aucun problème
4. Ça ne devrait poser aucun problème
5. En gros, pas de problème
6. C'est la partie amusante

Les points 1 à 5 seront donc très simples et la plupart des valeurs seront couvertes par un simple filtrage et découpage depuis l'avant. Avec quelques ajouts (je ne sais pas quel impact sur les performances), il pourrait même effectuer des vérifications supplémentaires pour les unités, mots-clés, etc.

Mais par rapport à d’autres points, je pense que le défi relativement plus important est le point 6. Vous pourriez décider de simplement désactiver url() ，让您检查函数的输入，因此例如您可能想要转义分号，甚至可能通过微小的调整再次检查函数内的模式例如对于calc() dans ce style personnalisé.

Conclusion

Dans l’ensemble, c’est mon avis. Avec quelques ajustements à ces expressions régulières, cela devrait compléter ce que vous faites déjà et vous donner autant de flexibilité que possible lors de la saisie de CSS, tout en vous évitant d'avoir à modifier votre code à chaque fois que vous modifiez une fonctionnalité CSS.

Exemple

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;
}

Commentez, discutez, critiquez et faites-moi savoir si j'ai oublié d'aborder un sujet qui vous intéresse particulièrement.

Source

Avertissement : je ne suis pas l'auteur, le propriétaire, l'investisseur ou le contributeur des sources mentionnées ci-dessous. Il se trouve que je les utilise pour obtenir des informations.

• 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