HTML5页面无法彻底阻止用户查看源码，因前端代码必被浏览器解析，所有客户端屏蔽手段（如oncontextmenu、keydown拦截）均易被绕过；敏感逻辑和数据必须置于服务端，通过动态token、SSR、WebAssembly等增强防护。
HTML5 页面如何阻止用户右键、F12 和 Ctrl+U 查看源码
根本做不到彻底屏蔽。所有前端代码最终都会被浏览器解析执行，用户总能通过开发者工具、网络面板或内存快照获取 HTML/CSS/JS 内容。oncontextmenu、onkeydown 这类拦截只是障眼法，禁用后仍可手动启用控制台或抓包。
用 oncontextmenu 禁右键的常见写法和失效场景
很多人直接在 上加 oncontextmenu="return false"，但这只拦住鼠标右键菜单，不影响键盘快捷键或地址栏输入 view-source: 前缀。
内容
- 移动端长按仍会触发上下文菜单（iOS Safari 尤其明显）
- Firefox 在
about:config中设dom.event.contextmenu.enabled = true可强制恢复 - 部分浏览器（如 Edge）对内联事件监听器有更严格的权限策略，可能直接忽略
禁用 F12 / Ctrl+Shift+I / Ctrl+U 的 JS 拦截为什么不可靠
监听 keydown 并 preventDefault() 对开发工具快捷键基本无效——现代浏览器已将这些快捷键绑定到 UI 层，JavaScript 无法捕获或阻止。
立即学习“前端免费学习笔记（深入）”；
document.addEventListener('keydown', function(e) {
if (e.key === 'F12' ||
(e.ctrlKey && e.key === 'u') ||
(e.ctrlKey && e.shiftKey && e.key === 'i')) {
e.preventDefault();
return false;
}
});
- F12 键在 Chrome/Firefox 中属于“浏览器级快捷键”，JS 监听不到
- Ctrl+U 在 Chrome 中早已不触发
keydown事件，监听完全无响应 - 即使短时间生效，用户关掉 JS 或用书签打开（
javascript:alert(1)）就能绕过
真正需要保护的内容该怎么做
把敏感逻辑和数据留在服务端。前端只负责展示，所有关键校验、计算、API 调用都必须经后端确认。比如视频播放地址、加密密钥、付费接口参数，绝不能硬编码在 HTML 或 JS 里。
- 用服务端渲染（SSR）或动态 token 控制资源访问，比如
/video/play?id=123&token=abc456，token 限时且单次有效 - 敏感 JS 逻辑拆成 WebAssembly 模块，虽仍可逆向但门槛显著提高
- 混淆 + 压缩代码（如 Terser）能增加阅读成本，但不是安全手段
想靠前端屏蔽实现“防扒”是方向错了。浏览器永远是开放的，真正的防线在服务器和协议设计里。
