html安全属性通过源头抑制攻击路径：rel堵window.opener漏洞，integrity防cdn劫持，referrerpolicy控referer泄露；alt/lang/title保障辅助技术正确解析；data-*和hidden不可存敏感数据；sandbox、autocomplete、type="module"等需精准配置。
哪些HTML属性直接参与安全防护
HTML本身不提供运行时沙箱或权限模型，但部分属性能从源头抑制常见攻击路径。关键不是“加功能”，而是“堵漏洞”——比如rel、referrerpolicy、integrity这些属性，它们在资源加载阶段就切断了XSS、CSRF、中间人劫持的链条。
-
rel="noopener noreferrer"必须加在所有target="_blank"链接上，否则新开页面可通过window.opener篡改原页面（尤其在第三方跳转场景） -
integrity配合src使用，校验外部脚本/样式哈希值，防止CDN被污染后执行恶意代码 -
referrerpolicy="no-referrer-when-downgrade"限制Referer泄露敏感路径，比默认行为更保守
alt、title、lang这些“非功能属性”为何影响安全
它们不防攻击，但决定辅助技术能否正确解析页面。当屏幕阅读器因缺失alt或错误lang把按钮读成“空白链接”，用户可能误点钓鱼表单；当title被滥用为“隐藏提示”却含敏感字段（如title="token=abc123"），反而暴露凭证。
-
alt必须描述图像内容，不能留空或写“图片”，否则视障用户无法判断上下文是否可信 -
lang要精确到子标签（如lang="zh-Hans"），避免浏览器错误启用拼写检查导致输入框泄露明文 -
title仅用于补充说明，禁止携带动态数据、令牌、路径参数
data-*属性和hidden属性的误用风险
开发者常把data-*当“万能存储桶”，把API密钥、用户ID、临时token全塞进去；hidden则被当成“视觉隐藏=逻辑隔离”，结果爬虫或调试工具一抓就全暴露。
-
data-user-token这类命名直接违反最小权限原则——token应只存在于内存或HttpOnly Cookie中 -
hidden只是CSS层面display: none，DOM仍可被JS访问，敏感操作必须配合服务端鉴权，不能只靠前端隐藏 - 真正需要隔离的数据，该用
aria-hidden="true"配合tabindex="-1"禁用键盘焦点，而非依赖hidden
为什么HTTPS和CSP不能替代HTML属性配置
HTTPS加密传输，CSP限制资源加载，但它们管不到DOM内部的语义泄漏。比如一个HTTP页面里嵌了img src="http://insecure.example.com/tracker.gif"，即使主站是HTTPS，这个明文请求照样发出去；再比如CSP允许'self'，但iframe没加sandbox属性，子页面仍能执行任意JS。
-
sandbox属性必须显式声明权限（如sandbox="allow-scripts allow-same-origin"），默认空值等于完全隔离 -
form元素必须配autocomplete="off"且禁用浏览器密码填充（尤其登录/支付页），否则input可能被自动注入历史凭据 - 所有
script标签优先用type="module"，天然启用CSP严格模式，避免传统script绕过nonce校验
安全属性不是开关，是约束条件。写rel="noopener"容易，但得清楚它挡不住postMessage跨域通信；加integrity有用，但若构建流程没固化哈希生成，上线后反而导致资源加载失败。真正的质量提升，来自对每个属性“为什么存在、谁会读取、失效后影响什么”的持续追问。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
