HTML无法彻底加密，但可通过五种方式提升防护：一、禁用右键与文本选择；二、混淆HTML结构与内联内容；三、服务端动态渲染；四、添加不可见水印与DOM变动检测；五、启用Subresource Integrity与CSP策略。
如果您希望防止他人直接复制或篡改您的HTML页面源代码，需明确：HTML本质是客户端可读的公开标记语言，无法彻底“加密”或“锁定”，但可通过多种技术手段提高盗用门槛、阻碍批量抓取、干扰自动化解析。以下是具体实施方式：
一、禁用右键与文本选择限制
该方法通过JavaScript阻止用户触发右键菜单及拖选操作，虽不能阻止查看源码（如通过开发者工具），但可显著降低普通用户的复制意愿和效率。
1、在HTML文件的<head>标签内插入以下script代码块：
2、使用document.addEventListener监听contextmenu事件，并调用event.preventDefault()阻止默认右键行为。
立即学习“前端免费学习笔记（深入）”；
3、为body元素添加CSS样式：-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
4、注意：此方法对具备基础前端知识的用户完全无效，仅作为初级防护层存在。
二、混淆HTML结构与内联内容
将关键HTML片段（如版权标识、核心文案、按钮逻辑）拆解为JavaScript动态拼接生成，使静态源码中不出现完整可读文本，增加人工复制与结构复现难度。
1、将原本写在HTML中的段落文字替换为形如document.write("欢迎访问")的JS语句。
2、使用字符串数组+索引拼接，例如var t = ["版","权","所","有"]; document.getElementById("foot").innerHTML = t.join("");
3、对敏感元素ID或class名采用无意义命名（如a1b2c3代替copyright），并避免在CSS中暴露语义。
4、该方式可有效防止Ctrl+A全选复制，但无法阻挡Chrome DevTools实时DOM抓取。
三、服务端动态渲染与骨架屏分离
将真实HTML内容从静态文件剥离，改为由后端接口返回JSON数据，前端通过AJAX请求获取并渲染，使原始HTML文件仅含空容器与加载逻辑。
1、将index.html精简为仅含<div id="app"></div>与基础JS加载脚本。
2、配置后端路由（如/api/content）返回结构化内容数据，包含title、content、links等字段。
3、前端使用fetch调用该接口，在成功响应后调用innerHTML或虚拟DOM方法注入内容。
4、关键提示：必须配合CORS策略与接口鉴权（如Token校验），否则数据仍可被第三方直接请求获取。
四、添加不可见水印与DOM变动检测
在页面DOM中嵌入隐藏但可追踪的标识节点，一旦页面被另存为或嵌入iframe，可通过远程服务器比对水印特征识别盗用行为；同时监控DOM树异常变更，触发告警或降级显示。
1、在<body>末尾插入一个display:none的<span id="wm_9a7f"></span>，其ID含时间戳哈希值。
2、使用MutationObserver监听document.body子节点增删，当检测到script或iframe节点突增时，执行console.warn("DOM异常变动")。
3、在页面加载完成时向预设日志接口发送当前document.URL、performance.now()及水印节点是否存在状态。
4、该机制不阻止盗用动作本身，但为事后追溯与法律举证提供客观依据。
五、启用Subresource Integrity与Content Security Policy
利用浏览器原生安全策略，确保外链资源（JS/CSS）未被CDN或中间代理篡改，防止通过劫持依赖文件注入恶意逻辑，保护页面运行时完整性。
1、为每个<script src="https://cdn.example.com/app.js"></script>添加integrity属性，值为sha384-HASH值。
2、在<head>中添加<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https:">。
3、禁止eval()与内联事件处理器（如onclick="alert(1)"），强制所有脚本外链或通过nonce属性授权。
4、特别注意：CSP策略若配置错误将直接导致页面功能失效，须在测试环境充分验证。
