前端做假名化处理时，CSS样式会影响数据脱敏效果吗？

毓君提问于 2026-03-08 11:47:20 阅读 23

安全

我们最近在做用户隐私保护，要求前端展示时对手机号、身份证等敏感字段做假名化（比如 138****1234）。我试过用 CSS 的 content + attr 来遮盖部分字符，但发现这样其实原始数据还在 DOM 里，是不是有泄露风险？

比如下面这段代码，虽然页面上看起来是脱敏的，但审查元素就能看到完整号码，这算合规吗？

.masked-phone::after {
  content: attr(data-prefix) "****" attr(data-suffix);
}
.phone {
  visibility: hidden;
}

隐私保护

我来解答赞 4 收藏

反馈

1 条解答

雨路~ Lv1

哈，这种CSS假名化方式确实只是表面功夫，DOM里原始数据全在，根本不算是真正的脱敏。我在WP里面处理这类需求都是直接在后端就把数据处理好再输出。

简单暴力的解决方案：在后端处理数据时就直接替换成带星号的格式，比如用PHP的substr_replace：

function mask_phone($phone) {

    return substr($phone, 0, 3) . '****' . substr($phone, -4);

}

这样输出到前端的就是已经脱敏的字符串，审查元素也看不到原始数据。如果非要保留原始数据用于某些功能，可以放data属性里，但得确保后端接口响应也不返回完整数据。

顺便吐槽下，现在隐私合规越来越严，这种前端自欺欺人的做法真不行，审计一抓一个准。

2026-03-08 12:06