网站用的是什么字体?图解步骤教你防字体劫持漏洞

备案流程一头雾水?别急，今天咱们不聊怎么填表，而是聊一个更隐蔽的坑：你的网站用的是什么字体？ 很多甲方老板以为字体只是“好不好看”的问题，其实它是个安全雷区。上周一个客户急着上线，我让他看源码，结果发现字体文件被外部CDN引用，还带着跨域漏洞。这种“字体劫持”能偷偷替换你网站的文字，甚至植入恶意代码。别慌，下面我用图解步骤拆解原理、防护方案，全是实操干货，看完直接抄作业。

一、字体劫持：你看不见的“文字变形记”

威胁场景：想象一下，你的电商网站突然把“立即购买”变成“立即转账”，或者银行页面把“余额”改成“欠款”。用户毫无察觉，钱却没了。这不是科幻，是字体劫持（Font Hijacking）的真实案例。攻击者不需要攻破你的服务器，只需要替换浏览器加载的字体文件。字体文件（如.ttf、.woff）本质上是数据，里面藏着字符映射关系。攻击者通过中间人攻击或恶意脚本，修改这个映射，就能让“a”显示成“b”，而URL和HTML代码完全不变。

更隐蔽的是，很多网站为了加载速度，把字体放在第三方CDN（如fonts.googleapis.com）。一旦CDN被攻破或域名过期，你的网站就裸奔了。我见过一个外贸站，因为引用了过期的免费字体库，整个页面乱码，SEO排名直接掉到页末。客户急得跳脚，却找不到原因——因为问题不在代码，而在字体来源。

为什么字体这么危险？ 因为浏览器渲染文字时，优先信任本地或远程的字体文件。如果字体文件被篡改，浏览器会“照单全收”。这比CSS注入更隐蔽，因为CSS改的是样式，字体改的是内容本身。对甲方来说，这意味着品牌信任瞬间崩塌，法律风险接踵而至。

二、漏洞原理：一行代码引发的“文字叛变”

漏洞原理：核心在于字体文件的跨域加载和缺乏完整性校验。常见漏洞点有三个：

外部字体引用：直接引用 https://fonts.googleapis.com/...，若该域名被劫持或证书过期，攻击者可注入恶意字体。
字体缓存未清除：浏览器缓存旧字体文件，攻击者只需一次成功替换，后续访问都受影响。
CORS策略过宽：字体文件所在域允许任意来源读取（Access-Control-Allow-Origin: *），攻击者可从其他页面发起请求获取字体内容。

下面这段代码是典型漏洞示例（语言：HTML/CSS）：

<!-- 漏洞代码：外部字体引用，无完整性校验 -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>body { font-family: 'Roboto', sans-serif; }
</style>

问题在哪？如果 fonts.googleapis.com 被攻击者控制，或用户网络被中间人拦截，浏览器加载的可能是恶意字体文件。更糟的是，如果服务器端对字体文件的CORS设置如下（语言：Nginx配置）：

# 漏洞配置：允许任意来源访问字体
location /fonts/ {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods 'GET, HEAD';
}

攻击者可在任意页面发起请求，读取你的字体文件内容，甚至分析其中字符映射，为后续篡改做铺垫。

三、防护方案：三步锁定字体安全

防护方案：核心原则是“本地化、完整性校验、最小权限”。别指望CDN，把字体文件放自己服务器上，这是最稳的做法。腾讯云开发者社区有篇文章《Web字体安全最佳实践》就强调，字体文件应视为敏感资源，与JS、CSS同等对待。

步骤1：字体本地化部署 将字体文件下载到服务器，修改CSS指向本地路径。例如（语言：HTML/CSS）：

<!-- 安全代码：本地字体引用 -->
<style>@font-face {font-family: 'LocalRoboto';src: url('/fonts/roboto-regular.woff2') format('woff2'),url('/fonts/roboto-regular.ttf') format('truetype');font-weight: normal;font-style: normal;font-display: swap; /* 关键：避免FOIT问题 */}body { font-family: 'LocalRoboto', sans-serif; }
</style>

步骤2：添加SRI完整性校验 如果必须用外部字体，务必加SRI（Subresource Integrity）属性。浏览器会验证文件哈希值，不匹配则拒绝加载。例如（语言：HTML）：

<!-- 安全代码：带SRI的外部字体引用 -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" integrity="sha384-xxxxxx" crossorigin="anonymous">

SRI哈希值需从字体提供方的文档中获取，定期更新。注意：SRI只对<link>和<script>有效，CSS内部的@import不支持，所以尽量用<link>引入。

步骤3：收紧CORS策略 字体文件所在域只允许自身域名访问。修改Nginx配置（语言：Nginx配置）：

# 安全配置：仅允许自身域访问字体
location /fonts/ {add_header Access-Control-Allow-Origin 'https://yourdomain.com';add_header Access-Control-Allow-Methods 'GET, HEAD';add_header Cache-Control 'public, max-age=31536000, immutable';
}

这样，其他页面无法跨域读取字体内容，阻断分析攻击路径。

四、检测与修复：别等出事才检查

检测与修复：上线前必做三项检测：

字体来源扫描：用浏览器开发者工具检查Network面板，确认所有字体请求都指向自身域名。
SRI验证：手动计算字体文件SHA-384哈希，与代码中integrity属性比对。
CORS测试：用curl命令模拟跨域请求，确认非自身域访问返回403。

curl示例（语言：Bash）：

# 测试CORS策略
curl -I -H "Origin: https://evil.com" https://yourdomain.com/fonts/roboto.woff2
# 期望返回：无Access-Control-Allow-Origin头，或仅包含yourdomain.com

若检测到外部字体引用，立即替换为本地文件。若SRI哈希不匹配，重新计算并更新代码。修复后，清空浏览器缓存（Ctrl+Shift+R）验证效果。

我常提醒甲方：字体安全不是“一次配置”，而是“持续监控”。每季度重新扫描一次，特别是更换字体库或CDN后。腾讯云开发者社区的工具包里有字体安全扫描脚本，可直接集成到CI/CD流程，自动阻断不安全部署。

五、安全加固清单：交付前必查项

安全加固清单：给甲方对接人一份可直接落地的检查表，逐项打勾：

检查项	操作要点	风险等级
字体本地化	所有字体文件存于服务器，无外部引用	高
SRI校验	外部字体（如有）均添加integrity属性	高
CORS策略	字体域仅允许自身域名跨域访问	中
缓存策略	字体文件设置长期缓存，但版本变更时更新文件名	低
监控告警	接入字体加载异常监控，失败时告警	中