字体反爬这个方向,做爬虫的人基本都绕不开。但大多数技术文章都在讲前端怎么生成动态字体、怎么用Canvas去识别,真正把后端这套映射逻辑和部署细节讲清楚的反而不多。我最近正好把一个字体库修改映射的反爬方案完整落地到了后端服务里,从字体生成、码点替换到华为云Stack环境下的容器化部署都走了一遍。这篇文章就把整个过程拆开揉碎,讲讲后端到底怎么实现,以及哪些地方最容易踩坑。
先说清楚这套方案是干什么的。它的核心思路是:服务端内置一套自定义字体,把标准字符映射表整体替换掉,页面上的关键数字和文本在HTML源码里是一堆私有码点,只有配合我们下发的字体文件才能渲染成人类能看懂的内容。爬虫如果直接抓HTML,拿到的就是乱码,如果按标准字体库去解析码点,同样得不到真实数据。后端要做的就是两件事:一是维护好这套字体映射关系,二是在返回页面时把真实内容实时替换成密文码点。
这套方案适合谁来参考?如果你负责的站点有大量结构化数据被频繁抓取,比如价格、销量、手机号、评论内容,而且你已经有了一定的后端开发基础,想在不影响用户体验的前提下提高采集门槛,那这篇文章正好对口。我会把字体映射的原理、后端生成字体的工具链、Spring Boot里的拦截器实现、以及部署到云环境时的配置细节全部过一遍。
1. 整体设计与防爬原理拆解
1.1 字体反爬为什么有效
传统的CSS图片替换、IP封禁、验证码这些手段,要么影响用户体验,要么容易被绕过。字体反爬的优势在于它直接在字符编码层面做文章,爬虫工程师如果没注意到字体文件的存在,或者没有去动态解析字体映射,拿到的数据就全是错的。
它的基本原理其实不复杂。标准字体文件里,每个字符都有一个固定的码点,比如数字“0”对应U+0030,数字“1”对应U+0031。我们做的事情,是拿一个正常字体文件,用工具把里面的cmap表全部改掉,让U+0030这个码点渲染出来的是数字“6”的形状,U+0031渲染出来的是数字“8”的形状。这样一来,页面源码里写的是0,浏览器用我们下发的新字体去渲染,用户看到的是“6”,而爬虫用系统标准字体去解析,得到的就是“0”,数据完全对不上。
这里还有一个关键点:HTML里不能直接用0,因为很多爬虫框架会先做HTML实体解码。更好的做法是把文本内容转换成Unicode私有区的码点,也就是U+E000到U+F8FF这个区间。私有区码点在标准字体里本身就是空白,爬虫即便解出来了也只是拿到一个无法显示的字符,更增加了一层干扰。
1.2 防爬强度的核心在映射策略
字体反爬做得好不好,关键看映射策略。如果所有页面都共用同一套字体映射,那爬虫只要花一次代价把映射关系解析出来,后续所有页面就都能正常读取了。所以线上环境的成熟方案基本都是动态字体:要么定期重新生成字体文件,要么一个页面会话用一套映射,甚至每个关键接口的返回内容都搭配一个独立的字体子集。
我做这套方案时采用的策略是“双层级”动态映射。底层维护一个基础字库,里面包含数字、常用符号和部分高频汉字;上层在每次请求进入时,对字体文件的码点做一次置换洗牌,用当前请求的SessionId作为随机种子。也就是说,同一个数字在不同用户的页面上对应不同的私有码点,同一个人刷新页面后码点也会变化。这样一来,想通过积累样本做统计分析来还原映射,成本会高很多。
当然,动态生成字体是有性能开销的,不可能每个请求都实时跑一遍字体编译。我的做法是预生成一个字体池,服务启动时一次性生成20到30套不同的字体文件,请求进来时按SessionId哈希取模,从池子里选一套使用。这样既能保证每次会话的映射不一致,又不会对后端造成太大压力。
1.3 前后端分工与数据流设计
字体反爬不是后端单方面的事,需要前后端配合好。前端要做的,是根据后端下发的字体文件名动态加载@font-face,并确保页面上所有受保护的内容都使用这个字体渲染。后端的职责则是维护字体文件的生成、码点映射关系的存储、以及内容替换逻辑。
在实际的后端接口设计里,我把它拆成了三个核心模块:字体管理模块负责生成字体文件和对应的映射表;加密替换模块负责在返回页面内容时,遍历所有需要保护的区域,把明文替换成密文码点;会话关联模块负责把字体文件和当前用户请求绑定起来,确保浏览器拿到的字体和页面内容是一套匹配的映射。数据流是这样一个闭环:用户请求页面,后端根据Session分配一套字体并返回字体文件的URL,同时把页面内容动态替换成对应密文,浏览器加载页面时同时拿到内容和字体,渲染出正常文字。
需要模型API调用? 免费领10W Token,多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 后端核心实现:字体生成与码点替换
2.1 字体处理工具链选型
后端起一个字体反爬服务,第一步是如何生成和修改字体文件。这一步选对工具会省掉很多麻烦。在Java技术栈里,我建议直接使用fontTools的Python版本先做预处理,把它作为一个离线构建步骤,而不是集成到Java运行时里。因为字体文件的解析和重写涉及大量底层二进制操作,用Java实现一套完整的字体解析器成本太高,而fontTools是字体行业的事实标准,稳定可靠。
实际业务中,如果后端是Spring Boot,我会在构建阶段用Python脚本预生成一批“混淆字体”,存到静态资源目录或对象存储里。运行时Java服务只做映射选择与内容替换,不碰字体文件本身的二进制结构。这个分工在稳定性和开发效率上都很划算。
下面是一个用fontTools改写字体码点的核心脚本片段,这段代码干的事情就是读入一个标准TTF,把字符码点和目标码点做一个自定义的映射交换:
python复制from fontTools.ttLib import TTFont
import random
def generate_obfuscated_font(src_path, dst_path, mapping):
"""
mapping: {真实字符: 目标私有区码点}
例如 {"0": 0xE000, "1": 0xE001}
"""
font = TTFont(src_path)
cmap = font.getBestCmap()
# 构建逆向映射, 把原字体中真实字符的码点对应字形改名
glyph_order = font.getGlyphOrder()
# 移除原有码点映射,建立新的cmap
new_cmap = {}
for char, glyph_name in cmap.items():
# 保留非目标字符的映射
if chr(char) not in mapping.keys():
new_cmap[char] = glyph_name
# 为真实字符建立到私有区的新映射
for real_char, new_code in mapping.items():
real_code = ord(real_char)
glyph_name = cmap.get(real_code)
if glyph_name:
# 给字形重命名,减少通过字体文件名猜测映射的可能性
new_glyph_name = f"uni{new_code:04X}_{random.randint(1000,9999)}"
font.getGlyphOrder()[font.getGlyphOrder().index(glyph_name)] = new_glyph_name
new_cmap[new_code] = new_glyph_name
font.getBestCmap().clear()
font.getBestCmap().update(new_cmap)
font.save(dst_path)
这段脚本有几个点需要注意。一是getBestCmap()拿到的是当前字体最完整的字符映射表,修改前最好先做一次备份。二是重命名字形这一步容易被忽略,但不做的后果就是爬虫可以通过字体文件里的字形名称反推映射规则,这是一个常见的疏漏。
2.2 映射关系的存储与缓存设计
字体生成之后,每一套字体文件都对应着一张映射表。这张表的结构大概是这样的:
| 字段 | 类型 | 说明 |
|---|---|---|
| font_id | varchar | 字体唯一标识,即文件名主键 |
| session_scope | varchar | 关联的会话范围标识 |
| real_char | varchar | 原始字符,如"0"、"1"、"价" |
| private_code_point | int | 私有区码点,如0xE000 |
| create_time | datetime | 生成时间,用于定时清理 |
映射表必须持久化,因为如果用户刷新页面后新的字体还没生成,而页面上缓存的旧内容还在,那就需要能够找到旧的映射关系去适配。另一个必须持久化的原因是日志排障——线上出了问题,你总得能查出来某个码点在某个时间点代表的是哪个真实字符。
在缓存策略上,我会把映射关系放一份到Redis里,Key就是字体文件名,Value是该字体完整的真实字符到私有码点的字典结构。Redis里只保留最近N套字体的映射,更早的映射直接丢掉,因为对应的页面基本已经不在用户的浏览器里了。字体文件本身则放在Nginx或者对象存储上,配合强缓存策略,这样同一个字体文件不会被重复下载。
2.3 核心内容替换拦截器实现
内容替换是整个后端逻辑里最关键的一环。如果是在Spring Boot框架里做,通常有两种方式:用Filter拦截Response,或者结合TemplateEngine的视图解析器做后处理。更通用的做法是写一个OncePerRequestFilter,在请求处理完成后、响应返回给客户端之前,对响应体做一次内容替换。
这里有一个很重要的技术细节:字体反爬必然涉及到内容加解密,所以response body必须能够被修改,这就要求使用ContentCachingResponseWrapper或者自定义的HttpServletResponseWrapper,把输出内容先暂存在内存里,等所有业务逻辑执行完毕后再统一替换和输出。
下面是一个简化的内容替换逻辑伪代码:
java复制protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain chain) {
ContentCachingResponseWrapper wrapper = new ContentCachingResponseWrapper(response);
chain.doFilter(request, wrapper);
String contentType = wrapper.getContentType();
if (contentType != null && contentType.contains("text/html")) {
byte[] body = wrapper.getContentAsByteArray();
String html = new String(body, StandardCharsets.UTF_8);
// 1. 根据当前会话选择字体
String fontId = fontSelector.select(request.getSession().getId());
// 2. 取出对应映射字典
Map<Character, String> mappingDict = fontService.getMappingDictByFontId(fontId);
// 3. 遍历HTML中受保护的内容区域进行替换
String encryptedHtml = protectSensitiveText(html, mappingDict);
// 4. 在HTML中注入@font-face样式
encryptedHtml = injectFontFace(encryptedHtml, fontId);
response.setContentLength(encryptedHtml.getBytes(StandardCharsets.UTF_8).length);
response.getOutputStream().write(encryptedHtml.getBytes(StandardCharsets.UTF_8));
} else {
// 非HTML内容直接放行
wrapper.copyBodyToResponse();
}
}
实际项目的替换逻辑肯定要比这段代码复杂,因为要考虑到性能损耗。每次请求都做全量字符串扫描和替换,在高并发场景下CPU开销会很大。所以我的方案是在模板渲染阶段就做标记,比如在需要保护的数字外包一层特殊的占位符标签,替换时只处理这些标记区域,而不是全页面扫描。这样做还有一个额外好处:广告位、埋点脚本、统计代码等不希望被误替换的内容可以完全避开。
2.4 映射替换的边界情况处理
做内容替换时,有几个边界情况如果不提前想清楚,上线后很容易出事故。
第一个是JSON接口的场景。现在很多站点是前后端分离架构,核心数据通过JSON接口返回,前端拿到数据后再渲染。这种情况下,如果直接把JSON字段值替换成密文,前端JavaScript能做解码,但爬虫也更容易直接调接口拿到密文。我的实践是:对于纯JSON接口,只在某些自定义Header或响应字段里加上字体文件的URL,前端拿到后动态创建字体,对指定CSS类名的元素做渲染。核心思路是让纯文本接口里保持明文,前端通过字体让用户在视觉上看到的是别的数字,但这套方案对性能要求更高,需要权衡使用。
第二种情况是动态渲染的内容。SPA应用里很多DOM节点是JavaScript后期创建的,这些内容后端根本拦截不到。处理方式有两种:一种是要求前端在渲染关键数据时,统一走一个SDK方法,由SDK负责调用后端接口获取密文码点并生成对应的带字体样式的文本节点;另一种是后端在返回初始HTML时就已经把字体文件内嵌成Base64格式的@font-face,前端SDK只负责码点解析。
第三种情况是性能损耗。Tomcat默认的缓冲大小是8KB,如果页面内容比较大或者做了大范围替换,内存占用会翻倍。我建议只对核心页面做全量拦截,对普通页面或者公告页直接跳过,或者做成白名单配置,减少无谓的性能损耗。
3. 实操过程:从开发到华为云Stack部署
3.1 后端接口协议与前端联动设计
在动手写代码之前,前后端联调协议要提前定义清楚。这一步如果没设计好,后面前端配合起来会非常痛苦。我的建议是设计两个接口:一个是字体下发接口,一个是页面内容接口。
字体下发接口的路径可以设计为/api/font/get,需要传递一个会话标识参数,后端返回一个JSON结构,包含字体文件的URL和这个字体对应的可用字符范围。页面内容接口就是原有的页面接口,但在响应里额外返回一个header,标记当前页面使用哪个字体ID。前端拿到页面内容后,会先调用字体下发接口,动态插入一段@font-face样式,然后设置一个CSS类名,比如.j-aU9x2,把这个字体应用到目标区域。
前后端字段对齐也很重要,这里有几个容易被忽略的字段设计:
| 字段 | 示例 | 说明 |
|---|---|---|
| font_url | /static/fonts/font_8d2f.ttf | 字体文件访问路径 |
| font_family | dyfont_8d2f | 字体族名称,前端DynamicLoad用 |
| version_code | 20240511_001 | 字体版本,便于排查缓存问题 |
| mapping_scope | NUM_DECIMAL_PRICE | 映射范围说明,如仅数字还是含汉字 |
要注意的是:切勿把完整的码点映射表返回给前端,哪怕前端是自家页面也不行。因为前端一旦拿到映射表,爬虫通过Hook前端代码也很容易拿到同一份数据。字体文件本身已经是映射关系的载体,不需要额外再暴露一份明文映射。
3.2 离线字体生成流水线的搭建
整个方案里最容易后期返工的就是字体生成这一步。如果每次手动执行Python脚本去生成字体,然后手动拷贝到资源目录,且不说操作繁琐,还容易在环境切换时漏掉文件版本。我建议把字体生成做成一个独立的一键构建脚本,纳入CI流程。
我的构建流水线是:后端代码编译之前,先执行一个Shell脚本,脚本读取font_config.json配置文件,里面预设了每套字体要保护哪些字符范围、生成多少套字体、输出到哪个目录。然后脚本循环调用Python的生成器,生产N套字体,并把字体拷贝到后端静态资源目录。同时脚本会生成一个font_mapping.json的字典文件,打包进服务端的resources目录,服务启动时加载到内存,后续从这套预生成字库里动态分配。
这里要提醒一点:字体文件不要做得太大。一个标准中文字体文件动辄几MB,页面初次加载会非常慢。实际应用里,我们只需要保护价格、手机号、评论里的数字和少量汉字,完全可以做字体重构——把不需要用到的字形全部删掉,只保留映射需要的字符。一个只包含数字和符号的字体文件,控制在20KB以内完全没有问题。这样对页面加载速度的影响几乎可以忽略。
3.3 华为云Stack环境下的容器化部署要点
这次部署的目标环境是华为云Stack。它本质上是一套私有云环境,跟公有云最大的区别在于网络策略、镜像仓库和负载均衡的配置方式跟常规Kubernetes集群有些差异,需要根据实际环境做适配。
在镜像构建这一步,静态字体文件要打进去。很多人会把字体文件放在NFS或者挂载存储上,但在华为云Stack这种环境里,如果容器实例重启后还没挂载好存储,前端请求字体就会404。所以我的做法是:字体文件打底打包进镜像,镜像里静态资源目录只保留最近一批字体;如果要做字体热更新,再额外挂载一个PVC,让Nginx优先读PVC下的最新文件。这样兼顾了稳定性和灵活性。
Deployment的资源配置也要专门说下。字体反爬的CPU消耗主要在内容替换时的字符串处理上,高并发下GC压力会比较大。我在华为云Stack上部署时给服务设置了requests.cpu: 500m,limits.cpu: "2",内存设了requests.memory: 512Mi和limits.memory: 1Gi。这个配比在实际压测中表现比较理想,单Pod能支撑的QPS取决于页面大小,一般页面在50KB左右时,单Pod大约能扛120QPS。
服务发布方式我选了华为云Stack上兼容性最好的LoadBalancer类型的Service,然后在防火墙上只放行80和443端口,其它端口不暴露到外部。这里有个经验:有些环境里LoadBalancer的会话保持策略默认是按源IP,但我们要求用户在一次会话内始终拿到同一套字体,所以Service的sessionAffinity要设为ClientIP,且超时时间要大于前端页面缓存的有效时间。如果忽略这个配置,用户刷新后字体和页面内容对不上,页面会大量出现乱码。
3.4 Nginx层与HTTP缓存配置细节
部署时我强烈建议在服务前面加一层Nginx,不只是为了做负载均衡,更是为了字体文件的高效缓存。反爬体系里字体文件是高频请求的资源,如果每个字体文件都回源到后端服务去拉,不仅浪费带宽,还占用了后端宝贵的Tomcat线程。
Nginx针对字体文件做的配置可以这样写:
nginx复制location /static/fonts/ {
alias /data/app/fonts/;
expires 7d;
add_header Cache-Control "public, immutable";
try_files $uri =404;
}
immutable这个指令很关键,它告诉浏览器这个文件在过期时间内绝对不会变更,可以直接从本地磁盘缓存读取,不会发起任何条件请求。这样能显著降低字体文件的重复下载。
expires 7d和字体文件的动态性要匹配。如果我们的字体池是每天凌晨重建一次,那缓存时间就不应该超过24小时,否则旧的字体文件和新生成的映射表会对不上。实际操作中我一般把字体池的设计成4小时轮换一次,缓存时间设置成2小时,确保缓存过期时字体池一定已经更新成新一批了。
另外Nginx上要配置Gzip压缩,但注意ttf文件本身已经是压缩过的格式,强行Gzip只会浪费CPU。所以我只在HTML、CSS和JSON的location块里开启Gzip,字体文件的location直接关闭Gzip。
4. 常见问题与排查技巧实录
4.1 页面显示乱码或方块字符
这是字体反爬上线后最容易遇到的问题。表现是用户反馈页面上大量出现方框、问号或者乱码,这是典型的字体加载失败或者码点不匹配。
我之前遇到过一种情况:用户第一次访问页面,HTML已经加载完成,但字体文件因为网络原因晚到了几百毫秒。在字体加载完成前,浏览器会先用默认字体渲染,私有区的码点自然显示成空白或方框。等到字体加载完成,浏览器重排后才会恢复正常。解决这个问题的办法是在@font-face中使用font-display: swap,这类闪烁在慢速网络下依然存在,更彻底的方案是在字体没加载完成前,用一层CSS遮罩或visibility: hidden隐藏目标区域,字体加载事件触发后再显示出来。
如果字体加载完成后依然乱码,那就是字体文件和映射关系不匹配。排查时按两步走:先看浏览器Network面板里字体URL返回的HTTP状态码是不是200,再确认后端给这个请求分配的字体的font_id是不是在HTML里注入的那一个。这两个不一致,必然乱码。
4.2 响应体过大导致的性能问题
ContentCachingResponseWrapper是整体内容都放到内存里的。如果某些页面大小达到几MB(例如动态表格特别多),并发一上来,内存马上吃紧,甚至触发OOM。我压测时曾观察到,在100并发下,一个1.5MB的页面把堆内存直接推高到1.8GB,非常惊人。
解决思路有两个方向。一是限制只对关键内容区域做保护,也就是前面提到的“标记区域替换法”,这样不必缓存整个响应体,而是用流式处理配合字符缓冲去分段替换。二是提高阈值判断,超过2MB的页面直接不做反爬处理,这种页面一般是后台或数据量极大的内部页面,本身也不是爬虫的重点关注对象。实际运营下来发现,爬虫的目标清单往往非常聚焦,保护核心列表页和详情页就够了。
另外补充一点:如果你的业务是国际化站点,需要处理多语言内容,则建议针对不同语言生成对应的字体文件。中文和阿拉伯文这种复杂文本的字体规则完全不同,一套字体覆盖不了所有场景。在做字体裁剪时,需要根据线上字符使用频率统计动态决定保留哪些字符,避免漏字。
4.3 字体缓存命中与版本一致性排查
浏览器缓存引发的问题很隐蔽。用户第一次拿到A字体,页面里的数字映射是A字体的。后来我们重建了字体池,用户再次刷新页面,HTML里配置的是B字体,但浏览器可能因为缓存策略不对仍然在使用A字体文件,这时候用户看到的就是一堆错乱的字符。
排查这类问题时,我在响应Header里加了一个自定义字段X-Font-Version,方便在浏览器开发者工具里直接确认命中的字体版本。同时前端SDK在检测到页面配置的version_code和已加载的字体version_code不一致时,会主动执行一次带query string的强制刷新,query string就是字体文件的版本号,这样可以从缓存层面彻底规避旧文件问题。
在后端层面,字体池的清理逻辑也要注意。如果使用的Redis存储映射关系,一定要设置合理的TTR或过期策略,防止缓存键堆积造成内存膨胀。我在生产环境设置的是字体映射缓存时间为2小时,字体文件在对象存储或磁盘上保存24小时,两者之间的窗口时间足以支撑挂起的用户会话完成页面重新加载。
4.4 爬虫通过OCR或Canvas绕过的应对
字体反爬不是银弹。现在很多高级爬虫会直接用Selenium模拟浏览器渲染,再用OCR识别渲染后的截图,字体反爬在这种场景下基本形同虚设。所以在做方案设计时就要明确:字体反爬是用来抬高采集成本的,不是用来彻底阻止采集的。在实际业务中,它是整体风控体系的第一道门槛,通常情况下会配合行为检测、接口签名、访问频率控制等其他手段一起使用,构成多层次的防护体系。
如果检测到某个IP或Session在短时间内的请求频次异常高,并且这些请求都集中在有字体保护的页面上,那基本可以判定是爬虫在批量采集。此时可以逐步升级验证码难度或者直接对该IP做临时封禁。但从另一个角度说,任何反爬手段都要考虑对正常用户的误伤,字体反爬的价值在于它对正常用户是完全透明的,而爬虫需要付出额外的成本去匹配字符映射,这就是它的核心价值所在。
4.5 常见问题速查表
我把实际运维过程中遇到的高频问题整理成了表格,方便直接对照解决:
| 问题现象 | 可能原因 | 解决方法 |
|---|---|---|
| 页面字体一会正常一会乱码 | 字体池版本与HTML内容版本不一致 | 确认同一次响应里font_id统一,HTTP缓存加版本字段 |
| 所有数字都变成方框 | 字体文件加载404或被拦截 | 检查字体访问路径、Nginx配置、防盗链策略 |
| 只有某个接口返回乱码 | 该接口没走过滤器或内容类型判断异常 | 检查拦截器路径配置,确认接口是text/html返回 |
| 服务内存缓慢增长 | 映射缓存或响应缓存没有过期清理 | 优化缓存过期时间,限制缓存条数 |
| 字体文件加载慢 | 字体未压缩且未走CDN | 裁剪字体体积,加CDN,开启Gzip并配置缓存 |
| 部分汉字渲染成空白 | 字体裁剪时没包含该汉字 | 重构字体,按字符覆盖率统计重新生成 |
关于部署环境,华为云Stack上如果遇到字体文件访问偶发超时,可以优先排查负载均衡的健康检查配置。有些默认健康检查路径是/,如果服务没有显式映射,负载均衡会误判后端不健康转发失败。解决方法是单独暴露一个/actuator/health探活接口,把健康检查的路径指过去。
最后再分享一个小经验:上线字体反爬之前,一定要在内部拉一个“爬虫视角”的专项测试,用现成的爬虫框架去抓一下自己的页面,看看能不能从里面直接拿到有效数据。我第一次做这类项目时,因为没有做灰度发布,结果被爬虫识别出字体文件和其他页面共用同一套模板,导致映射关系暴露。后来把字体文件生成和模板渲染彻底解耦,并给字体文件增加了随机化的文件名,外部的批量采集者想要利用这些规律就不再是低成本就能做到的事情了。
