Google Modern Web Guidance：用 Agent Skill 做網站安全與 SEO/體驗稽核

AI Agent Skill / Web Security Audit

Google Modern Web Guidance：把 SEO / 安全 / 效能稽核變成 agent skill

Threads 貼文提到 Google 開源 Modern Web Guidance skill，用 agent 掃網站後發現 X-Content-Type-Options、X-Frame-Options、CSP、Referrer-Policy 等安全 header 缺失，並可透過 Cloudflare Configuration Headers 快速補上。官方頁面的定位更廣：這是一組 evergreen、expert-vetted 的 web guidance，讓 AI coding agent 更容易寫出現代、可及、效能佳且安全的網站。

重點修正：這不是單純「SEO audit skill」。官方 Modern Web Guidance 涵蓋 UX、CSS layout、performance、forms/UI、accessibility 與 security。SEO/AI Search 能見度只是其中一個可延伸使用場景；安全 header audit 則是最容易立刻看出價值的低垂果實。

官方定位

Modern Web Guidance 是一組 agent skills / SKILL.md 與 CLI，提供現代 Web API、效能、可及性、安全、fallback 等專家整理過的指引，避免 coding agent 產生過時或 bloated 的 legacy 寫法。

安裝方式

官方推薦 npx modern-web-guidance@latest install；也支援 Vercel Agent Skills、Claude Code plugin、Copilot CLI、Antigravity CLI 等工作流。

貼文實測

作者把 skill 丟進 Hermes 掃兩個網站，發現常見 security headers 缺失：X-Content-Type-Options、X-Frame-Options、Content-Security-Policy、Referrer-Policy。

留言補充

留言提到 securityheaders.com 也可掃同類問題，且可用腳本打 Cloudflare API 補常用 headers。這表示 skill 的價值不只在掃描，而在「讓 agent 接著修」。

Header	目的	常見起手式	注意事項
X-Content-Type-Options	避免瀏覽器 MIME sniffing，把非預期內容當 script/css 執行。	`nosniff`	通常低風險、很適合先補。
X-Frame-Options	降低 clickjacking，被其他網站 iframe 嵌入。	`DENY` 或 `SAMEORIGIN`	若網站本來需要被第三方嵌入，不能無腦設 DENY；新專案也可用 CSP `frame-ancestors`。
Content-Security-Policy	限制 script、style、image、frame、connect 等資源來源，降低 XSS 與資料外洩。	先用 `Content-Security-Policy-Report-Only` 觀察，再逐步收斂。	最容易破壞網站。不要直接套網路範本；要盤點實際 CDN、API、analytics、payment、iframe。
Referrer-Policy	控制外連時送出多少 referrer，降低 URL 路徑與參數洩漏。	`strict-origin-when-cross-origin`	通常相對安全，但仍要確認行銷 attribution、支付或第三方整合是否依賴完整 referrer。
Permissions-Policy	限制 camera、microphone、geolocation 等瀏覽器能力。	依功能最小權限設定。	若網站有地圖定位、上傳、視訊等功能，要逐項測試。

用 Cloudflare 補 header 的安全流程

先用 browser / curl / securityheaders.com / agent skill 掃現況，保存 baseline。
從低風險 headers 開始：X-Content-Type-Options: nosniff、Referrer-Policy: strict-origin-when-cross-origin。
X-Frame-Options 先確認網站是否需要被 iframe 嵌入；不需要才用 DENY/SAMEORIGIN。
CSP 先用 Report-Only 模式蒐集違規，再把真正常用來源列白名單；不要直接上強硬 production CSP。
在 Cloudflare Rules → Configuration Rules / Transform Rules / Response Header Modification 補 header 後，重新掃描並做前台功能測試。
若多個網站都缺同一批 headers，可再寫 Cloudflare API 腳本批次套用，但要先有 rollback。

對 Allen / Hermes 的意義：這類 skill 最適合變成「網站上線前檢查」或「每月資產巡檢」。Agent 不只列出缺失，還可以讀取 Cloudflare / Nginx / Next.js config，提出最小修補 diff，最後再用外部掃描驗證。這比人工偶爾想起來掃一次更穩。

工具/方法	適合用途	限制
Modern Web Guidance skill	讓 AI agent 在 coding workflow 中理解現代 Web、效能、可及性、安全與 fallback。	仍需人工審核關鍵設定，尤其 CSP 與第三方整合。
Chrome DevTools for agents	搭配 skill 做即時效能、accessibility tree、console logs 與精準修補。	需要能跑 browser / DevTools 工作流。
securityheaders.com	快速獨立檢查 HTTP response security headers。	只看 headers 分數，不知道你的 app 為何需要某些例外。
Cloudflare Header Rules / API	不用改 code，快速在 edge 補 security headers 或批次治理多站。	CSP 仍可能破壞前端；Cloudflare 規則與 origin header 疊加要看優先序。

來源
Threads 原貼：https://www.threads.com/@krumjahn/post/DYrpxqImmQ4
Chrome 官方頁：https://developer.chrome.com/docs/modern-web-guidance
GitHub source repo：https://github.com/GoogleChrome/modern-web-guidance-src
補充工具：https://securityheaders.com