跳到主要内容

页脚那排安全徽章：为什么我不放第三方认证图片

· 4 分钟阅读
Connexion Collective
Connexion Collective
ADMIN 权限狗

加一排安全徽章这件事，最大的分歧是：用第三方发的「认证签章」，还是自己做？

我最后选了后者，理由不是好看，而是可验证。

第三方签章的问题​

国内常见的是 MySSL 的安全认证签章，代码一共三行：

<div id="cc-myssl-id">
  <a href="https://myssl.com/你的域名?from=mysslid">
    <img src="https://static.myssl.com/res/images/myssl-id3.png">
  </a>
</div>

看起来很官方，但图片本身是通用的：同一张 PNG 给所有人用，它并不校验域名归属。真正有信息量的只有那个链接 —— 点开能看到实时报告。

代价倒是实打实的：

代价说明
每个页面一次第三方请求访客 IP 会暴露给外部服务
要放开 CSP得把图片域名加进白名单
可用性风险对方 CDN 抖动，页面上就是一张破图

对一个以「零外域请求」为目标的站来说，这三条都不划算。

换成「自己写 + 链到报告」​

做法很朴素：用 HTML/CSS 画几个小药丸，每个链接到权威报告页。

徽章验证入口
SSL Labs A+Qualys SSL Labs 实时检测
Headers Asecurityheaders.com
HSTShstspreload.org（顺便能看到有没有进预加载列表）
DNSSECVerisign 的 DNSSEC Analyzer

这样每个数字都能被第三方当场核对，而不是靠一张谁都能贴的图。

原则：不写自己没验证的事​

跑完检测后有几条必须诚实处理：

  1. SSL Labs 确实是 A+，四个边缘节点全部 A+ → 写 A+。
  2. Security Headers 只有 A，没有 A+ → 就写 A。它被 CSP 里的 'unsafe-inline' 警告封顶，而这条改不掉（边缘会注入随机内联脚本，拦掉会影响人机验证），属于架构限制而不是漏配。
  3. HSTS 只写 HSTS，不写 Preload —— 虽然响应头带了 preload 指令，但域名并不在浏览器预加载列表里。写「HSTS Preload」就是虚标。
  4. DNSSEC 用两个公共解析器都验过 AD=true，才敢打勾。

踩到的两个坑​

坑一：浅色页脚 + 白色描边 = 看不见。

我按常见的深色页脚习惯写了 rgba(255,255,255,0.22) 的描边，实测页脚底色是 rgb(248,250,252) —— 徽章几乎隐形。后来给浅色和深色各写一套配色。

坑二：主题的 .footer a 用了 !important。

徽章文字一直显示成主题绿，查了半天发现站内自定义 CSS 里有：

.footer a { color: #2e8555 !important; }

!important 直接压过选择器优先级，只能用 .footer .footer-badge 这种更高优先级的写法去覆盖。

Cloudflare 的小黄云​

想加一个「Hosted on Cloudflare」的徽章，但完整 logo 太宽（那是「云 + 文字」的组合标）。

做法是：把官方 SVG 加载进浏览器，用 getBBox() 量出四条路径各自的包围盒，发现云是其中三条，范围 x 54.9–103.1 / y 3.6–25.4。于是把这三条路径单独导出成 808 字节的 SVG，viewBox 直接裁到云的边界。

  • 路径原样保留（只裁切、不重绘），符合商标规范里「不修改」的要求
  • 同源文件，不产生外部请求
  • 白色路径在深色页脚上正好形成高光层次

合规上属于 nominative use：用对方商标说明「本站在使用它的服务」，不暗示合作或背书，并且点击能回到对方官网。

移动端​

5 个徽章在手机上自然换行会变成 2+2+1，最后一个孤零零一行。改成 grid 两列，让托管徽章 grid-column: 1 / -1 独占一行，视觉上就整齐了。

徽章高度桌面 32px、手机 44px，触屏上点得中。

加载评论中...