使用标签包裹敏感字段更安全，因其内容默认不渲染、不进入dom遍历树，仅js显式提取才可见，静态解析器无法直接获取。
HTML静态生成页面里，把敏感信息藏进标签结构或属性里，等于没藏——只要明文出现在初始 HTML 中，requests.get() + BeautifulSoup 一扫就出。真正能起作用的“标记模糊”，不是加密，而是让静态解析器失效、同时不破坏真实用户访问体验的结构干扰。
为什么用 <template></template> 包裹关键字段反而更安全
<template></template> 标签内容默认不渲染，也不出现在 DOM 的可遍历树中（document.querySelectorAll('template') 能拿到节点，但 template.content 需 JS 显式提取）。爬虫若只取 response.text，会看到原始混淆结构；若用 Playwright 等工具等 JS 执行完再取 page.content()，则可能根本拿不到那段内容——除非你主动把它 append 进 DOM。
- 服务端模板渲染时，把价格、订单号这类字段放进
<template id="price-data"><span data-raw="299.00"></span></template> - 前端 JS 在校验登录态后，才读取
document.querySelector('#price-data').content并插入页面 - 别在
<template></template>里写死逻辑（比如直接innerHTML = '¥' + price），否则源码仍暴露数值 - 注意：SEO 友好度会下降，搜索引擎无法索引
<template></template>内容，仅适用于非核心展示字段
data- 属性 + CSS attr() 拼接的致命误区
很多人把数字拆成几段塞进 data- 属性，再用 content: attr(data-a) attr(data-b) 拼起来。这看似模糊，实则极易被还原：
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
-
getComputedStyle(el, '::before').content直接返回拼接后的字符串，无需执行 JS -
lxml或cheerio可直接读取所有data-属性值，正则一捞就全齐 - 若属性名固定（如
data-price-unit,data-price-digits），爬虫写个xpath就能批量提取 - 正确做法：属性名也随机（如
data-k7f2,data-m9x1），且每个字段只在当前页面唯一出现一次；CSS 中避免硬编码attr()，改用 JS 动态注入style.setProperty('--price-part', value)
伪元素混入零宽字符为何仍被绕过
在 ::before 里写 content: "¥" "\u200B" "2" "\u200B" "99"，确实会让 re.findall(r'¥\d+', html) 失效，但对真实爬虫无效：
-
page.evaluate(() => getComputedStyle(el, '::before').content)返回的是已解码字符串，\u200B被视为空格或忽略，结果仍是"¥299" - Playwright/Puppeteer 可直接调用
el.innerText，浏览器会合并伪元素与真实文本，零宽字符不影响最终可读内容 - 真正可用的组合是：伪元素只放单位或后缀（如
%、件），数字部分由 JS 从服务端接口动态 fetch，并通过textContent注入——这样伪元素本身不承载敏感值
静态页面里最常被忽略的明文泄漏点
静态生成页面最容易翻车的地方，往往不是你怎么藏，而是你根本没意识到它已经明文躺在那儿了：
-
<meta name="description" content="用户ID: 87654321">——grep -o 'content="[^"]*"'一键提取 -
<script>window.INIT_DATA = { order_id: "ORD-98765" }</script>—— 即使 JS 被压缩，字符串字面量仍存在 -
<link rel="canonical" href="https://site.com/order/98765">—— URL 路径里的 ID 是最易被正则匹配的模式 -
<!-- order_id=98765 -->—— 注释在lxml解析下会变成Comment对象，soup.find_all(text=True)会混入大量空值，但爬虫只需re.findall(r'<!--.*?-->', html)就能批量提取
所有这些，都逃不过一句：只要出现在初始 HTML 字符串里，就不是“模糊”，而是“明文”。真正的防护边界，永远在服务端接口的鉴权和字段脱敏上，不在前端怎么藏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
