如何实现用户查看网页源代码时显示空白页面？

阿华AIGC实验室

2026-5-26

如何让网页在用户查看源代码时显示空白？

首先得明确一点：完全阻止用户查看网页源代码是做不到的——毕竟浏览器必须下载代码才能渲染页面。不过我们可以通过一些技巧，让普通用户通过右键“查看源代码”或按Ctrl+U看到的内容是空白，或者混淆真实代码。下面是几种可行的方案：

方法1：用`document.write`动态覆盖页面

这个思路是等页面加载完成后，用空白内容覆盖原本的HTML结构。用户通过“查看源代码”看到的是执行后的空白，但浏览器的“检查元素”仍能看到真实DOM（毕竟已经渲染过了）。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>空白源代码示例</title>
    <script>
        window.onload = function() {
            // 清空整个文档内容
            document.write('');
            document.close();
        };
    </script>
</head>
<body>
    <!-- 这里是你的真实页面内容 -->
    <h1>这是真实内容，但查看源代码会显示空白</h1>
</body>
</html>

原理：页面加载完成后，document.write('')会重置整个文档流，此时“查看源代码”展示的是执行后的结果，但开发者工具的「Elements」标签依然能看到初始渲染的DOM结构。

方法2：用iframe嵌套真实内容

把真实页面放在隐藏的iframe里，主页面只保留空白框架。用户查看主页面源代码时只能看到iframe标签，但还是能通过src属性找到真实页面的地址（懂点技术的用户依然能绕过）。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>空白源代码示例</title>
    <style>
        /* 让iframe占满整个页面，无边界 */
        iframe {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body>
    <!-- 主页面无内容，真实内容在iframe中 -->
    <iframe src="your-real-page.html"></iframe>
</body>
</html>

注意：your-real-page.html是你的真实页面文件，用户可以通过开发者工具的「网络」标签直接抓取这个文件的内容。

方法3：动态生成DOM（进阶混淆）

用JavaScript完全动态生成页面内容，初始HTML只保留必要的script标签，让用户查看源代码时几乎看不到有效内容。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>动态生成内容示例</title>
    <script>
        window.onload = function() {
            // 动态创建所有页面元素
            const container = document.createElement('div');
            container.innerHTML = `
                <h1>这是动态生成的内容</h1>
                <p>查看源代码只能看到script标签</p>
            `;
            // 清空初始文档并添加动态内容
            document.documentElement.innerHTML = '';
            document.body.appendChild(container);
        };
    </script>
</head>
<body>
    <!-- 这里的内容会被清空，源代码中仅保留script -->
</body>
</html>