纯前端页面真的能绝对安全吗？我随便写个只有 index.

很多人觉得只要不接 API，前端就是个死页面，没什么好攻击的。但实际上，只要有 JS 运行，逻辑漏洞就永远存在。这次我重点复盘了三个最容易被忽视的坑：

1. 客户端权限伪造

很多开发者习惯在 JS 里定义一个 userRole 变量来控制 UI 显示（比如是否显示“管理面板”按钮）。

const userRole = 'guest'; 
if (userRole === 'admin') {
    showAdminPanel();
}

这种写法在控制台里一行 userRole = 'admin' 就能瞬间绕过。虽然没有后端校验，但如果你的“管理功能”只是隐藏了某些敏感的操作逻辑，用户依然能通过修改变量强行触发。

2. 敏感数据硬编码

最典型的是把 API Key 或者加密盐值直接写在 JS 变量里。即便没有网络调用，这些信息在 View Source 里一目了然。

const CONFIG = {
    secretKey: "sk-proj-abc123456789", // 极其危险
    version: "1.0.2"
};

即便这个 Key 暂时没在当前页面使用，但一旦代码被部署，任何一个懂技术的用户都能在 Network 或 Sources 面板里把它抠出来。

3. XSS 注入风险

即便不请求服务器，如果页面使用了 innerHTML 来渲染 URL 参数中的内容，依然会被注入恶意脚本。

const urlParams = new URLSearchParams(window.location.search);
const name = urlParams.get('name');
document.getElementById('welcome').innerHTML = `Hello, ${name}`;

只要构造一个 ?name=<img src=x onerror=alert(1)> 的链接，就能在用户浏览器执行任意代码。

实操避坑指南：

• 权限控制： 永远不要信任前端变量，关键逻辑必须在服务端校验（如果以后要加后端的话）。
• 数据存储： 敏感配置建议通过环境变量在构建时注入，或者使用加密存储。
• 渲染方式： 统一用 textContent 替代 innerHTML，从根源杜绝 XSS。