前端 XSS 防护：layui util 与 js-xss 的实用写法

# npm
npm install xss --save
# yarn
yarn add xss

浏览器环境

直接引入 CDN 或本地文件：

<!-- CDN -->
<script src="https://cdn.jsdelivr.net/npm/xss/dist/xss.min.js"></script>
<!-- 本地 -->
<script src="path/to/xss.min.js"></script>

核心 API 基础使用

核心函数是 xss()，传进去一段字符串，返回过滤后的安全 HTML。

基础过滤（默认规则）

默认会去掉 <script>、<iframe> 之类的危险标签，也会清理 onclick、onerror 这类事件属性，常规标签则保留。

// Node.js 环境
const xss = require('xss');
// 浏览器环境直接使用全局变量 xss

const dangerousHtml = `
<div onclick="alert('xss')">点击我</div>
<script>stealData()</script>
<img src="x" onerror="alert(1)">
`;

const safeHtml = xss(dangerousHtml);
console.log(safeHtml);
// 输出：<div>点击我</div><img src="x">

自定义过滤规则

实际项目里通常不能只靠默认配置。能放什么、能留哪些属性，最好按业务自己收紧。

(1) 允许特定标签

const safeHtml = xss(dangerousHtml, {
    whiteList: {
        div: [],      // 允许 div，无属性
        p: ['class'], // 允许 class
        img: ['src', 'alt'] // 允许 src 和 alt
    }
});

(2) 允许特定属性

const html = '<div onclick="alert(1)">内容</div>';
const safeHtml = xss(html, {
    whiteList: {
        div: ['class', 'data-id'] // 移除 onclick
    }
});
console.log(safeHtml); // <div>内容</div>

(3) 自定义标签处理

可以用 onTag 钩子直接拦标签。这个做法不花哨，但在需要明确禁掉某些标签时挺直接。

const safeHtml = xss(dangerousHtml, {
    onTag: function(tag, html, options) {
        if (tag === 'h1') return ''; // 禁止 h1
        return undefined; // 其他按默认处理
    }
});

(4) 自定义属性处理

onTagAttr 更适合控制属性值，比如把 javascript: 这种链接直接替换掉。

const html = '<a href="javascript:alert(1)">链接</a>';
const safeHtml = xss(html, {
    onTagAttr: function(tag, name, value, isWhiteAttr) {
        if (tag === 'a' && name === 'href') {
            if (value.startsWith('javascript:')) {
                return 'href="#invalid"';
            }
        }
        return isWhiteAttr ? `${name}="${xss.escapeAttrValue(value)}"` : '';
    }
});
console.log(safeHtml); // <a href="#invalid">链接</a>

(5) 转义特定字符

默认已经会处理一批危险字符，如果你要更细一点，也可以自己接管转义逻辑。

const safeHtml = xss('<p>hello & world</p>', {
    escapeHtml: function(html) {
        return html.replace(/&/g, '&amp;').replace(/</g, '&lt;');
    }
});
console.log(safeHtml); // <p>hello &amp; world</p>

常见场景示例

1. 过滤用户评论

const userComment = `
<p>我的评论</p>
<script>偷取 cookie</script>
<img src=x onerror="alert('xss')">
`;

const safeComment = xss(userComment, {
    whiteList: {
        p: ['class'],
        img: ['src', 'alt']
    }
});
document.getElementById('comment').innerHTML = safeComment;

2. 富文本编辑器内容

const richTextWhiteList = {
    h1: ['class'], h2: ['class'], p: ['class', 'style'],
    a: ['href', 'target', 'class'],
    img: ['src', 'alt', 'class', 'width', 'height'],
    strong: [], em: []
};

const richText = '<p>富文本<a href="javascript:alert(1)">危险链接</a></p>';
const safeRichText = xss(richText, {
    whiteList: richTextWhiteList,
    onTagAttr: function(tag, name, value) {
        if (tag === 'p' && name === 'style') {
            if (/^color:\s*[a-zA-Z0-9#]+;?$/.test(value)) {
                return `style="${value}"`;
            }
            return '';
        }
        if (tag === 'a' && name === 'href') {
            if (value.startsWith('javascript:')) {
                return 'href="#"';
            }
            return `href="${value}"`;
        }
        return `${name}="${value}"`;
    }
});

注意事项

1. 不要完全依赖默认规则，白名单最好按业务收紧，不然容易把不该放的标签也放进去。
2. 富文本场景要单独对待，尤其是 style、href、src 这类属性，放宽一点就可能出事。
3. 前端过滤只能改善体验，服务端还得再过一遍。攻击者不一定会走页面表单，直接请求接口就够了。
4. 如果业务确实要放行少量脚本或特殊标签，校验逻辑要写死，别留给配置随便开口子。

更多配置

完整配置项还是得看官方文档，常用的就是 whiteList、onTag、onTagAttr、escapeHtml 这些。大多数项目做到这里，已经够用了。

前端能做的是减少风险，不是替后端兜底。只在前端做过滤，防线太薄，接口一旦被绕过，问题还是会回到服务端。