<think>我们正在使用DOMPurify库，并且希望保留<style>标签及其内容不被过滤。默认情况下，DOMPurify会移除<style>标签，因为它们是潜在的安全风险（可以包含恶意代码）。但是，DOMPurify提供了一些配置选项来允许特定的标签和属性。
根据DOMPurify的文档，我们可以通过设置配置对象中的`FORCE_BODY`或`WHOLE_DOCUMENT`选项，并结合`ADD_TAGS`和`ADD_ATTR`等选项来保留
样式标签。但是，仅仅添加`style`标签到允许列表可能还不够，因为还需要处理
样式标签内的内容（CSS）的安全性。
特别地，DOMPurify提供了一个`SAFE_FOR_TEMPLATES`模式，该模式允许更宽松的配置，但为了安全，我们可能还需要明确地允许`style`标签。
具体步骤：
1. 将`style`标签添加到允许的标签列表中，使用配置项`ADD_TAGS`。
2. 由于
样式内容中可能包含一些特殊规则（如`@import`、`url()`等），这些可能被DOMPurify视为不安全而移除。为了保留完整的
样式，我们可能需要使用`FORCE_BODY`选项，并允许一些CSS属性。
但是，请注意，允许`style`标签会带来安全风险，因此必须确保
样式内容来自可信源。
另外，DOMPurify还提供了一个配置选项`FORBID_TAGS`，默认情况下可能包含`style`，所以我们需要确保不在`FORBID_TAGS`中（默认情况下`style`不在`FORBID_TAGS`中，但会被其内部规则移除）。实际上，DOMPurify默认的允许标签列表（定义在`ALLOWED_TAGS`）中不包含`style`，所以我们需要添加。
因此，配置示例：
```javascript
const clean = DOMPurify.sanitize(dirty, {
ADD_TAGS: ['style'], // 添加style标签到允许列表
// 可选：允许
样式标签内的@import、url等，但DOMPurify默认会对
样式进行清理，可能会有一些限制
// 为了允许
样式中的URL，可能需要添加允许的属性（针对
样式中的属性）
// 但是，DOMPurify对CSS的清理比较严格，如果希望保留所有
样式内容，可以设置一个钩子来跳过
样式内容的清理（但这样不安全）
});
```
然而，仅仅添加`style`标签可能还不够，因为
样式内容会被DOMPurify的CSS清理器处理。如果我们希望完全保留
样式内容（不进行清理），可以使用钩子（hook）来跳过对
样式内容的清理。但请注意，这样会带来安全风险，应确保
样式内容绝对安全。
使用钩子跳过
样式内容清理的方法：
```javascript
DOMPurify.addHook('uponSanitizeElement', function(node, data) {
// 如果是style标签，我们设置一个标志，表示接下来的文本节点不需要清理
if (data.tagName === 'style') {
this.isStyleTag = true;
}
});
DOMPurify.addHook('uponSanitizeShadowNode', function(node) {
// 对于shadow节点，同样处理
if (node.nodeType === 3 && this.isStyleTag) { // 文本节点且在style标签内
// 我们不对文本内容做任何处理，直接跳过
return node;
}
});
DOMPurify.addHook('afterSanitize', function() {
this.isStyleTag = false; // 重置标志
});
```
但是，这种方法比较底层，而且DOMPurify的API可能会变化。实际上，DOMPurify提供了一个更直接的配置选项来允许
样式标签并控制CSS清理：`USE_PROFILES`。我们可以设置`USE_PROFILES`为`{ html: true, svg: true, svgFilters: true, mathMl: true }`，但默认情况下，`html`配置不允许`style`标签。
因此，更推荐的做法是使用`ADD_TAGS`并接受DOMPurify对CSS的清理（它默认会清理掉危险的CSS，比如`expression`、`url`等）。如果我们确实需要保留所有
样式（包括可能包含`url`等），并且信任内容来源，可以禁用CSS清理：
```javascript
const clean = DOMPurify.sanitize(dirty, {
ADD_TAGS: ['style'],
// 禁用CSS清理（危险！）
FORBID_ATTR: ['style'], // 注意：这个选项是禁止使用style属性，不是针对标签
// 实际上，DOMPurify有一个专门针对
样式标签内清理的配置：SAFE_FOR_TEMPLATES
// 但是，为了禁用CSS清理，我们可以设置一个钩子来跳过对
样式内容的清理
// 或者使用以下钩子：
WHOLE_DOCUMENT: true, // 如果需要处理整个文档（包括html和body标签）
// 使用钩子来避免清理
样式内容
ADD_ATTR: ['id'] // 如果需要保留其他属性，可以添加
});
// 或者使用钩子来避免清理style标签内的内容
DOMPurify.addHook('beforeSanitize', function(node) {
// 在清理之前，记录所有style标签
this.styles = [];
const styles = node.querySelectorAll('style');
for (let i=0; i<styles.length; i++) {
this.styles.push(styles[i].innerHTML);
}
});
DOMPurify.addHook('afterSanitize', function(node) {
// 清理后，将原始
样式内容重新放回
const styles = node.querySelectorAll('style');
if (styles.length === this.styles.length) {
for (let i=0; i<styles.length; i++) {
styles[i].innerHTML = this.styles[i];
}
}
this.styles = [];
});
```
但是，这种钩子方法会绕过对
样式内容的任何清理，因此非常危险。只有在完全信任
样式内容的情况下才使用。
实际上，DOMPurify的官方文档中提到了一个配置选项`ALLOW_STYLE`，但我在最新文档中没有找到。在较新的版本中，推荐的做法是使用`ADD_TAGS`并配合CSS清理。
总结：最安全且推荐的方法是使用`ADD_TAGS`添加`style`标签，并让DOMPurify执行默认的CSS清理（它会移除危险的CSS部分）。如果确实需要保留原始
样式（不清理），则使用钩子来保存和恢复
样式内容，但必须确保内容安全。
因此，根据需求，我们可以给出两种方案：
方案一（安全，默认清理CSS）：
```javascript
const clean = DOMPurify.sanitize(dirty, {
ADD_TAGS: ['style']
});
```
方案二（不安全，完全保留
样式内容）：
```javascript
// 首先，添加钩子来保存和恢复
样式内容
DOMPurify.addHook('beforeSanitize', function(node) {
// 保存所有
样式标签的原始内容
this.styles = [];
const styles = node.querySelectorAll('style');
Array.prototype.forEach.call(styles, (style) => {
this.styles.push(style.innerHTML);
});
});
DOMPurify.addHook('afterSanitize', function(node) {
// 恢复
样式内容
const styles = node.querySelectorAll('style');
if (styles.length === this.styles.length) {
Array.prototype.forEach.call(styles, (style, i) => {
style.innerHTML = this.styles[i];
});
}
this.styles = [];
});
const clean = DOMPurify.sanitize(dirty, {
ADD_TAGS: ['style']
});
```
注意：方案二会绕过对
样式内容的任何清理，因此必须确保
样式内容是完全安全的，否则可能导致XSS攻击。
请根据实际的安全需求选择合适的方案。
[^1]: 引用自站内引用[1]，关于0点击事件的标签。
[^2]: 引用自站内引用[2]，关于过滤器分隔符。
§§相关问题§§
1. DOMPurify 还有哪些常用的配置选项？
2. 在保留
样式标签的情况下，DOMPurify 默认会清理
样式中的哪些内容？
3. 除了
样式标签，DOMPurify 还支持保留哪些可能被默认过滤的标签？
</think>
### DOMPurify 保留 `<style>` 标签的方法
DOMPurify 默认会过滤掉 `<style>` 标签，因为它们是常见的安全风险（可能包含恶意 CSS 或脚本）。要保留 `<style>` 标签及其内容，需要通过配置选项显式启用：
```javascript
// 配置 DOMPurify 以允许 <style> 标签
const cleanHTML = DOMPurify.sanitize(dirtyHTML, {
ADD_TAGS: ['style'], // 将 style 添加到允许标签列表
ADD_ATTR: ['type'], // 允许 type 属性（常见于 <style>）
WHOLE_DOCUMENT: true // 确保完整文档解析（适用于包含 <html> 的内容）
});
```
### 关键配置说明
1. **`ADD_TAGS: ['style']`**
显式将 `<style>` 标签加入白名单，否则 DOMPurify 会移除它[^1]。
2. **`ADD_ATTR: ['type']`**
允许 `<style>` 的 `type="text/css"` 等属性（避免属性被过滤）。
3. **`WHOLE_DOCUMENT: true`**
当输入内容包含完整 HTML 结构（如 `<html><style>...</style></html>`）时必需，否则可能解析失败。
### 安全性注意事项
- **谨慎信任来源**：保留 `<style>` 标签会带来风险，因 CSS 可包含 `expression()` 等危险函数或 `@import` 外部
资源。
- **过滤危险 CSS**：建议结合 CSS 清理库（如 [sanitize.css](https://github.com/csstools/sanitize.css)）二次处理：
```javascript
import sanitizeCSS from 'sanitize-css';
const cleanCSS = sanitizeCSS(styleContent); // 清理 CSS 内容
```
### 完整示例
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.8/purify.min.js"></script>
<script>
const dirtyHTML = `
<div>
<style>
body { color: red; }
/* 危险示例：expression() 可能被攻击利用 */
.xss { background: expression(alert('XSS')); }
</style>
<p>保留
样式示例</p>
</div>
`;
// 步骤1: 允许 <style> 标签
let cleanHTML = DOMPurify.sanitize(dirtyHTML, {
ADD_TAGS: ['style'],
ADD_ATTR: ['type'],
WHOLE_DOCUMENT: true
});
// 步骤2: 手动清理 CSS 内容（推荐）
const styleTag = cleanHTML.match(/<style>([\s\S]*?)<\/style>/i);
if (styleTag) {
const safeCSS = sanitizeCSS(styleTag[1]); // 使用 CSS 清理库
cleanHTML = cleanHTML.replace(styleTag[0], `<style>${safeCSS}</style>`);
}
document.body.innerHTML = cleanHTML;
</script>
```
### 引用说明
[^1]: DOMPurify 默认过滤高风险标签如 `<style>`，需显式启用白名单[^1]。
[^2]: 属性分隔符（如换行符 `%0A`）可能影响过滤规则，但 DOMPurify 已内置处理[^2]。
---
本文介绍了Android应用程序中样式资源的使用方法。通过实例演示了如何定义样式资源文件，并展示了如何在布局文件中应用这些样式，包括如何指定样式名称、继承父样式及覆盖父样式属性等。
扫一扫
2261
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
