form的method和action必须显式声明，否则会导致无障碍失效、降级失败和安全策略绕过；innerhtml仅用于可信html，用户输入应优先用textcontent或dompurify净化。
高能效和安全性不是靠堆砌工具或加一层“安全中间件”就能实现的，而是从 HTML 的第一行标签开始就该有明确约束：语义正确、结构干净、输出可控。没有这个前提，后续的 CSP、转义逻辑、框架防护都会打折扣。
为什么 <form></form> 的 method 和 action 必须显式声明
很多项目用 JavaScript 动态提交表单，就直接省略 method 和 action，甚至写成 <form></form> 空标签。这会导致两个实际问题：
- 无障碍访问失效：屏幕阅读器依赖
method判断是搜索还是登录，缺失时无法准确播报交互意图 - 降级失败：JS 加载异常或被禁用时，表单根本无法提交，用户卡在页面上无反馈
- 安全策略绕过：某些 CSP 规则（如
form-action 'self'）只校验显式声明的action，空值或 JS 拼接的 URL 不受管控
正确做法是始终写明基础属性，哪怕只是占位：
后续用 JS 拦截提交并增强逻辑，但不删除原始语义。
innerHTML 和 textContent 在动态渲染中的取舍边界
这是 XSS 防御最常翻车的环节。不是“永远不用 innerHTML”，而是必须清楚每种场景下谁在控制内容源：
- 纯用户输入（如评论、昵称）→ 只能用
textContent或手动转义后塞进innerHTML - 可信 CMS 输出（如富文本编辑器导出的带格式内容）→ 可用
innerHTML，但必须配合 DOMPurify 这类库做白名单过滤，且禁止<script></script>、onerror、javascript:等危险模式 - 模板字符串拼接 HTML → 绝对禁止，改用
document.createElement+appendChild构建节点，或使用原生template标签
一个典型误用：
// ❌ 危险：用户控制的 data.title 直接进 innerHTML
el.innerHTML = `<h2>${data.title}</h2><p>${data.content}</p>`;
应改为：
// ✅ 安全：标题走 textContent，内容若需 HTML 则先净化
el.querySelector('h2').textContent = data.title;
const cleanContent = DOMPurify.sanitize(data.content);
el.querySelector('p').innerHTML = cleanContent;
自定义元素中如何避免隐式执行风险
用 customElements.define 创建组件时，容易忽略生命周期钩子里的副作用。比如在 connectedCallback 中直接执行 eval、setTimeout 字符串、或解析 URL 参数后拼接 iframe src，这些都可能成为 XSS 入口。
- 禁止在任何生命周期钩子里解析并执行用户传入的字符串（如
this.getAttribute('on-load')） - 所有外部数据注入 DOM 前，必须经过校验：URL 是否以
https://开头、src是否在白名单域名内、style属性是否只含允许的 CSS 属性 - 如果组件需要支持 HTML 内容插槽（
<slot></slot>），应在adoptedCallback或attributeChangedCallback中主动净化子节点，而不是等它自然渲染
例如一个卡片组件接收描述文本：
class InfoCard extends HTMLElement {
connectedCallback() {
const desc = this.getAttribute('description') || '';
// ❌ 错误：直接 innerHTML
// this.innerHTML = `<p>${desc}</p>`;
// ✅ 正确：转义后用 textContent，或用 DOMPurify 处理
this.textContent = desc; // 纯文本优先
}
}
customElements.define('info-card', InfoCard);
真正难的不是写出“安全”的代码，而是让每个开发者在写 <input type="text"> 的时候，脑子里已经过了三遍：这个值会不会进 innerHTML？有没有可能被构造为 URL？要不要加 autocomplete="off" 防止密码管理器误填？这些细节不靠检查清单，而靠日常编码时的肌肉记忆。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
