html安全加固需从基础标签入手：form必须显式声明https协议的action和method="post"；input密码字段须用type="password"且autocomplete="new-password"；script/link需加integrity和crossorigin；csp应明确配置script-src并避免unsafe指令。
HTML 本身不执行逻辑，但写法不当会直接放大 XSS、CSRF、信息泄露等风险。真正有效的加固不是加一堆第三方库，而是从 <form></form>、<input>、<meta> 这些基础标签的用法开始改起。
form 标签必须显式声明 method 和 action 协议
很多开发者只写 <form action="/login"></form>，看似没问题，但一旦页面被嵌入 HTTP 环境（比如内网测试页或旧版代理），浏览器可能降级为 HTTP 提交，密码明文裸奔。
- 永远用完整协议：把
action="/login"改成action="https://yoursite.com/login" -
method不要依赖默认值 —— 显式写method="post"，避免 GET 暴露敏感参数在 URL 或日志中 - 如果后端支持，加
autocomplete="off"在<form></form>上，防止浏览器自动填充历史密码（尤其管理后台）
input 密码字段必须禁用 autocomplete 并设 type=password
仅靠 type="password" 不够。现代浏览器会无视它，只要 name 包含 password、pwd 等关键词，仍可能触发自动填充；更糟的是，若没设 autocomplete="new-password"，提交后还可能把新密码存进浏览器密码管理器。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 正确写法：
<input type="password" name="pwd" autocomplete="new-password"> - 避免使用模糊 name，如
name="user_input"—— 浏览器无法识别语义，反而绕过防护 - 不要用
<input type="text">+ CSS 遮盖，这等于放弃浏览器原生密码策略和无障碍支持
script 和 link 标签必须带 integrity 和 crossorigin
CDN 引入的 JS/CSS 文件一旦被劫持（比如中间人污染），整个页面就沦为 XSS 渲染器。仅靠 HTTPS 不足以保证资源完整性。
- 所有外链脚本必须加
integrity：<script src="https://cdn.example/jquery.js" integrity="sha384-..." crossorigin="anonymous"></script> -
crossorigin="anonymous"是必须项，否则浏览器不会校验integrity值 - 本地静态资源也建议生成 SRI（Subresource Integrity）哈希，CI 构建时自动注入，避免手动维护出错
meta 标签里 CSP 必须覆盖 script-src 和 default-src
很多人只加 <meta http-equiv="Content-Security-Policy" content="default-src 'self'">，结果发现内联事件（onclick="..."）、<style></style> 标签、甚至 base64 图片全被拦死 —— 不是因为 CSP 严，而是漏配了关键指令。
- 至少要包含：
script-src 'self' 'unsafe-inline' 'unsafe-eval'（开发期），上线后必须移除'unsafe-inline'和'unsafe-eval' - 如果用了内联
<script></script>，改用nonce：服务端每次响应生成唯一 nonce 值，写入<script nonce="abc123"></script>和 CSP 中script-src 'nonce-abc123' -
default-src是兜底，但script-src优先级更高 —— 别指望靠它“省事”
最易被忽略的点是：CSP 的 report-uri 或 report-to 配置后，没人检查上报日志；而 integrity 哈希一旦过期没更新，页面直接白屏 —— 安全机制本身就成了可用性故障源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
