服务器端与 HTTP 头部控制 (最有效、最根本的方法)

这种方法的核心思想是从源头上控制浏览器应该如何处理页面内容,而不是在内容加载后去“对抗”用户,它通过发送特定的 HTTP 响应头来告诉浏览器限制某些行为。

网页屏蔽(左右键 代码等)的非js方法
(图片来源网络,侵删)

禁用右键菜单 (Context Menu)

这是最直接的非 JS 方法,服务器可以在响应中添加一个 HTTP 头,告诉浏览器不要显示上下文菜单。

HTTP 头: X-Content-Options: nosniff

这个头主要是为了防止 MIME 类型混淆攻击,但它在某些浏览器(如旧版 IE)中也有禁用右键菜单的效果,更现代和通用的方法是使用 meta 标签(见下文),因为它在 HTML 层面工作,兼容性更好。

禁用框架嵌套 (Frame Busting)

为了防止你的网页被嵌入到 iframe 中(被恶意网站用来伪装),服务器可以发送一个 X-Frame-Options 头。

网页屏蔽(左右键 代码等)的非js方法
(图片来源网络,侵删)

HTTP 头: X-Frame-Options: DENYX-Frame-Options: SAMEORIGIN

  • DENY: 禁止在任何页面的 iframe 中显示。
  • SAMEORIGIN: 只允许在同源页面的 iframe 中显示。

这并不能直接阻止用户查看源代码,但它可以防止一种常见的“点击劫持”攻击,攻击者正是通过 iframe 来诱导用户点击他们不想点击的东西。

强制下载而非显示 (对于代码文件)

如果你的“代码”是指服务器上的某个文件(code.txt),你可以通过服务器配置让浏览器直接下载它,而不是在浏览器中显示其内容。

Nginx 配置示例:

网页屏蔽(左右键 代码等)的非js方法
(图片来源网络,侵删)
location /code.txt {
    default_type application/octet-stream;
    add_header Content-Disposition "attachment; filename=code.txt";
}

Apache 配置示例 (.htaccess):

<Files "code.txt">
    ForceType application/octet-stream
    Header set Content-Disposition "attachment; filename=code.txt"
</Files>

这样,当用户访问 code.txt 时,浏览器会弹出一个下载对话框,而不是在页面上显示代码。


HTML 元素与标签属性 (简单但有限)

这些方法不依赖 JS,而是直接使用 HTML 的原生特性。

禁用右键菜单 (通过 <meta>

在 HTML 的 <head> 部分加入 <meta> 标签,可以在某些浏览器(特别是基于 IE/Edge 内核的浏览器)中禁用右键菜单。

HTML 代码:

<meta http-equiv="imagetoolbar" content="no" />
<!-- 这个标签主要是为了禁用图片工具栏,但在某些旧版浏览器中会影响右键行为 -->

重要提示: 这种方法的兼容性非常差,在现代的 Chrome, Firefox, Safari 等主流浏览器中,这个 meta 标签已经完全无效,它不是一个可靠的解决方案

使用 <plaintext><xmp> 标签 (过时的方法)

HTML 中有两个非常古老的标签,它们会将其中的所有内容都作为纯文本显示,并且浏览器会自动转义 HTML 标签。

HTML 代码:

<plaintext>
    <h1>这不会被渲染成标题</h1>
    <script>alert('这也不会执行');</script>
    // 你的代码写在这里,会原样显示
</plaintext>

缺点:

  • 已废弃: 这两个标签早已被 HTML 规范废弃,不推荐使用。
  • 功能单一: 它只做一件事——显示纯文本,无法实现复杂的交互控制。
  • 样式丢失: 无法对代码进行任何高亮或样式美化。

浏览器安全策略与网络环境 (外部强制手段)

这些方法不修改网页本身,而是通过改变用户访问网页的环境来达到目的。

使用 Content Security Policy (CSP)

CSP 是一个强大的安全标准,通过 HTTP 头部定义,告诉浏览器页面中可以加载哪些资源(脚本、样式、图片等),以及哪些行为是被允许的。

示例:

Content-Security-Policy: default-src 'self'; script-src 'none';

这个策略的意思是:

  • default-src 'self': 默认情况下,所有资源(如图片、CSS)只能从同源加载。
  • script-src 'none': 禁止加载任何 JavaScript 脚本。

效果:

  • 无法执行 JS: 页面中所有的 <script> 标签和内联 JS 都将被忽略。
  • 间接屏蔽功能: 由于 JS 被完全禁止,那些依赖 JS 来实现屏蔽左右键、禁用右键菜单、防复制等功能的代码自然也就无法运行了,这相当于从根源上“废掉”了所有基于 JS 的保护措施。
  • 强大的副作用: CSP 的主要目的是安全,防止 XSS 攻击和恶意脚本注入,但它会严重影响网站的正常功能,除非网站本身就是为无 JS 环境设计的。

部署企业级 Web 代理 / 防火墙

在大型企业或组织中,可以通过部署 Web 代理服务器或防火墙来过滤和重写网页内容。

  • 工作原理: 当用户请求一个网页时,请求会先经过代理服务器,代理服务器可以:
    1. 注入脚本: 自动向返回的 HTML 中注入一段 JavaScript,实现屏蔽功能。
    2. 移除元素: 直接从 HTML 中删除用户可能用来“作弊”的元素(如 <textarea>)。
    3. 阻止请求: 阻止用户访问开发者工具的特定接口(虽然非常困难)。
  • 特点: 这是一种集中式管理的方法,对用户是透明的,但它需要专业的 IT 人员来维护,通常只适用于组织内部,不适用于公开的网站。

总结与对比

方法 核心原理 优点 缺点 适用场景
HTTP 头部控制 服务器直接与浏览器通信,指令性强 最根本、最有效,不易被绕过 需要服务器配置权限,功能相对单一 保护整个网站、防止点击劫持、控制文件下载
HTML <meta> 利用 HTML 元素的古老属性 无需 JS,代码简单 兼容性极差,在现代浏览器中基本无效 几乎不适用于现代 Web 开发
<plaintext> 强制渲染为纯文本 简单,能原样显示代码 已废弃,功能单一,无法美化 仅用于在非常古老的浏览器中显示代码片段
CSP (内容安全策略) 定义严格的资源加载和安全策略 极其强大,从根源上杜绝 JS 和 XSS 配置复杂,严重影响网站正常功能,需要网站本身适配 高安全性要求的网站,防止恶意脚本攻击
Web 代理/防火墙 网络层面的内容过滤和重写 集中式管理,对用户透明 需要专业设备和维护,不灵活 企业内部网络,统一上网行为管理

如果你想在不使用 JavaScript 的情况下实现屏蔽功能,最可靠的方法是使用服务器端的 HTTP 头部,特别是 X-Frame-OptionsContent-Security-Policy

  • 如果你想防止代码被轻易复制或查看,最佳方案是不将代码作为前端资源,而是通过服务器配置使其强制下载
  • 如果你想禁用右键菜单,在现代 Web 环境下,几乎无法找到可靠的非 JS 方法,唯一可行的方案是配置 CSP 禁止所有 JS,但这会“杀死”整个网站的交互性。

任何纯前端(HTML/CSS)的“屏蔽”措施都是脆弱且不可靠的,因为用户总有办法绕过(禁用 JS 的浏览器插件、使用开发者工具的 Overrides 功能),真正的保护必须依赖于服务端的策略和配置。