如何混淆HTML代码，使其难以被Chrome解码且无法在开发者工具查看

首先明确：没有任何方法能完全阻止开发者查看页面内容——浏览器必须解析并渲染DOM，专业开发者总能通过各种手段还原。但下面几种简单方案能大幅提升普通用户查看源码的门槛，避免Chrome直接还原出原始HTML：

• 动态DOM生成（最推荐的轻量方案）
  放弃静态HTML写法，用JavaScript拼接字符串生成页面结构。Chrome的「查看页面源代码」里只会显示JS逻辑，Elements面板显示的是渲染后的DOM，想要还原原始结构得先解析JS代码。
  示例：

  <script>
    // 拆分HTML片段，对关键文本做URI编码干扰
    const header = '<h1>' + decodeURIComponent('%57%65%6C%63%6F%6D%65') + '</h1>';
    const content = '<section><p>动态生成的内容，源码里看不到原始HTML结构</p></section>';
    document.body.innerHTML = '<div class="wrapper">' + header + content + '</div>';
  </script>
  

• HTML实体编码+JS解码
  把完整的HTML内容转换成实体编码（比如<转<），再用JS解码后插入页面。Chrome不会自动解码源码里的实体内容，必须执行JS才会渲染出正常DOM。
  示例：

  <script>
    // 原始HTML转实体编码后的字符串
    const encoded = '&#60;div class="card"&#62;&#60;h2&#62;实体编码示例&#60;/h2&#62;&#60;p&#62;源码里是编码后的内容&#60;/p&#62;&#60;/div&#62;';
    document.write(decodeURIComponent(encoded));
  </script>
  

• 字符串拆分+反转小技巧
  手动把HTML字符串拆分成片段，甚至加入反转、拼接干扰，让源码里的HTML结构完全不可读，需要执行JS才能还原：

  <script>
    function rev(s) { return s.split('').reverse().join(''); }
    const part1 = rev('>div/<>p/<"巧技转反用使"=tp <');
    const part2 = rev('>h2/<"题标"=txet <');
    const full = rev(part2 + part1);
    document.body.innerHTML = full;
  </script>
  

补充：这些方法的核心是把静态HTML转化为JS逻辑，Chrome不会自动解析JS里的字符串为原始HTML，从而避免直接在源码面板里显示未混淆的内容。但对懂JS的开发者来说，这些手段只是小障碍，无法做到完全隐藏。

内容的提问来源于stack exchange，提问作者joe few