如何在没有 JavaScript 的情况下安全地将不受信任的输入分配给 CSS 自定义属性？

Question

假设我有一个字符串键和字符串值的对象，我想将它们作为 CSS 自定义属性写入服务器生成的一些 HTML。我怎样才能安全地这样做？

安全地我的意思是

• 如果可能的话，自定义属性声明不应导致阻止浏览器正确解析其他样式声明或部分 HTML 文档的 CSS 语法错误。如果由于某种原因这是不可能的，那么应该省略键值对。
• 更强烈的是，不应该有跨站点脚本的可能性。

为了简单起见，我将限制键只允许类中的字符

[a-zA-Z0-9_-]

.

通过阅读 CSS 规范和一些个人测试，我认为我可以通过以下步骤获得价值：

• 寻找字符串
• 确保每个引号后跟另一个（未转义的）相同类型（“或'）的引号。如果不是这种情况，请丢弃此键/值对。
• 确保字符串外的每个左大括号

  {([

  都有匹配的右大括号。如果不是，则丢弃此键值对。
• 用

  <

  转义

  \3C

  的所有实例，用

  >

  转义所有

  3E

  的实例。
• 用

  ;

  转义

  \3B

  的所有实例。

对于上下文，这些属性可能被我们插入其他地方的用户自定义样式使用，但同一对象也用作模板中的模板数据，因此它可能包含混合用作内容的字符串和用作 CSS 的字符串变量。我觉得上面的算法在非常简单之间取得了很好的平衡，但也不会冒险丢弃太多可能在 CSS 中有用的键值对（即使考虑将来添加到 CSS，但我想确保我没有遗漏任何东西。