当前位置：首页 > 行业动态 > 正文

html防修改js

admin
行业动态
2025-04-25
4801

通过设置HTTP响应头中的Content-Security-Policy限制脚本来源，结合代码混淆压缩工具（如UglifyJS）降低可读性，启用服务端代码签名校验机制，并采用版本控制系统锁定关键文件访问权限，实现多维度防护

HTML防修改JS方法详解

锁定DOM元素属性

通过设置contentEditable、readOnly等属性,禁止用户修改元素内容或属性。

// 禁止修改所有input和textarea
document.querySelectorAll('input, textarea').forEach(el => {
  el.setAttribute('readonly', true);
  el.setAttribute('onfocus', 'this.blur()'); // 阻止获取焦点
});
// 禁止右键菜单
document.addEventListener('contextmenu', e => e.preventDefault());

方法	作用范围	优点	缺点
`readonly`	表单元素	简单易用	仅前端生效，可被绕过
`contentEditable=false`	所有元素	完全禁用编辑	影响拖拽等正常交互

事件监听拦截

通过监听DOMSubtreeModified等事件,检测并还原非规修改。

html防修改js 第1张

const protect = (selector) => {
  const original = document.querySelector(selector).innerHTML;
  const observer = new MutationObserver(mutations => {
    mutations.forEach(() => {
      document.querySelector(selector).innerHTML = original;
    });
  });
  observer.observe(document.querySelector(selector), { childList: true, subtree: true });
};
protect('#protected-div');

事件类型	触发场景	适用性
`DOMNodeInserted`	新增节点	实时监控
`attributeChanged`	属性修改	需自定义回调
`input`事件	变化	需配合验证逻辑

属性值混淆

对关键属性值进行编码或哈希处理,增加改动难度。

// 使用Base64编码关键属性
const encodeAttr = (selector, attr) => {
  const el = document.querySelector(selector);
  const original = el.getAttribute(attr);
  el.setAttribute(attr, btoa(original));
  // 解码渲染（需在页面加载时执行）
  el.innerHTML = atob(el.getAttribute(attr));
};
encodeAttr('#data', 'data-content');

编码方式	特点	破解难度
Base64	可逆编码
MD5哈希	不可逆
位移加密	需密钥

定时校验机制

周期性检查关键节点完整性,自动修复异常。

setInterval(() => {
  const protectedDiv = document.getElementById('protected-div');
  if (protectedDiv.dataset.hash !== generateHash(protectedDiv.innerHTML)) {
    protectedDiv.innerHTML = '内容已被改动！';
    protectedDiv.style.backgroundColor = 'red';
  }
}, 3000);
function generateHash(content) {
  // 简单哈希示例（实际应使用SHA256等算法）
  let hash = 0;
  for (let i = 0; i < content.length; i++) {
    hash = (hash << 5) hash + content.charCodeAt(i);
    hash |= 0; // 转为32位整数
  }
  return hash.toString();
}