保护层叠样式表备忘录¶

简介¶

本 CSS（并非 XSS，而是层叠样式表）备忘录旨在告知程序员、测试人员、安全分析师、前端开发人员以及任何对 Web 应用程序安全感兴趣的人，在使用 层叠样式表 进行编写时，应采纳这些建议或要求以实现更好的安全性。

让我们通过一个例子来演示这个风险

Santhosh 是一名程序员，在一家名为 X 的公司工作，负责编写层叠样式表来实现 Web 应用程序的样式设计。他编写 CSS 代码的应用程序具有各种角色，如学生、教师、超级用户 和 管理员，这些角色拥有不同的权限（PBAC - 基于权限的访问控制）和角色（RBAC - 基于角色的访问控制）。这些角色不仅具有不同的访问控制，而且还可能拥有针对个人或角色组的特定网页样式。

Santhosh 认为创建一个包含所有角色 CSS 样式/选择器的“全局样式”CSS 文件是一个很好的优化想法。根据他们的角色，将渲染特定的功能或用户界面元素。例如，管理员将拥有与学生、教师或 超级用户 不同的功能。但是，某些权限或功能可能对某些角色是通用的。

示例：此处所有用户均可使用“个人资料设置”，而“*添加用户*”或“*删除用户*”仅适用于 管理员。

示例

.login
.profileStudent
.changePassword
.addUsers
.deleteUsers
.addNewAdmin
.deleteAdmin
.exportUserData
.exportProfileData
...

现在，让我们审视一下这种编码风格相关的风险。

风险 #1¶

动机明确的攻击者即使在未登录的情况下，也总是会查看 *.CSS 文件来了解应用程序的功能。

例如：Jim 是一位动机明确的攻击者，在进行其他攻击之前，他总是试图从“查看源代码”中查看 CSS 文件。当 Jim 查看 CSS 文件时，他会发现基于 .profileSettings、.editUser、.addUser、.deleteUser 等 CSS 选择器存在不同的功能和角色。Jim 可以利用 CSS 进行情报收集，以帮助获取对敏感角色的访问权限。这是一种攻击者在尝试执行危险攻击以获取 Web 应用程序访问权限之前的尽职调查形式。

简而言之，使用全局样式可能会泄露对攻击者有利的敏感信息。

风险 #2¶

假设 Santhosh 习惯于编写描述性的选择器名称，如 .profileSettings、exportUserData、.changePassword、.oldPassword、.newPassword、.confirmNewPassword 等。优秀的程序员喜欢让代码易于阅读，并可供团队中的其他代码评审员使用。风险在于攻击者可以将这些选择器映射到 Web 应用程序的实际功能。

缓解攻击者动机的防御机制¶

防御机制 #1¶

作为一名 CSS 编码人员/程序员，请始终根据访问控制级别隔离 CSS。这意味着学生将拥有一个名为 StudentStyling.CSS 的不同 CSS 文件，而 管理员 则拥有 AdministratorStyling.CSS，以此类推。请确保这些 *.CSS 文件仅供具有适当访问控制级别的用户访问。只有具有适当访问控制级别的用户才能访问其 *.CSS 文件。

如果拥有学生角色的已认证用户尝试通过强制浏览访问 AdministratorStyling.CSS，则应记录入侵警报。

防御机制 #2¶

另一种选择是修改您的 CSS 文件以删除任何标识信息。通常，建议您的网站在页面之间保持一致的样式，并且最好以通用 CSS 规则能够应用于多个页面的方式编写。这首先减少了对特定选择器的需求。此外，通常可以在不使用 ID 或类名的情况下创建针对特定 HTML 元素的 CSS 选择器。例如，#UserPage .Toolbar .addUserButton 可以重写为更模糊的样式，例如 #page_u header button:first-of-type。

还存在可用于混淆类名的构建时和运行时工具。这可以降低攻击者猜测应用程序功能的可能性。一些示例：

JSS（JS 中的 CSS）有一个 minify 选项，它可以生成诸如 .c001、.c002 等类名。
CSS Modules 有 modules 和 localIdentName 选项，其功能类似于 JSS，但允许导入任何 CSS 文件而无需对您的应用程序进行重大结构更改。
.Net Blazor CSS 隔离可用于将 CSS 作用域限制在其使用的组件中，并生成诸如 button.add[b-3xxtam6d07] 之类的选择器。
诸如 Bootstrap 和 Tailwind 等 CSS 库可以减少对特定 CSS 选择器的需求，因为它们提供了强大的基础主题供您使用。

防御机制 #3¶

允许用户通过 HTML 输入编写内容的 Web 应用程序可能容易受到 CSS 恶意使用的攻击。上传的 HTML 可能会使用 Web 应用程序允许的样式，但这些样式可能被用于非预期目的，从而导致安全风险。

示例：您可以阅读有关 LinkedIn 如何存在一个漏洞，该漏洞允许恶意使用 CSS 来执行点击劫持攻击。这导致文档进入一种状态，即点击页面上任何位置都会导致加载潜在的恶意网站。您可以在此处阅读更多关于缓解点击劫持攻击的信息。