禁止网页文字被选中和复制前端限制（如禁止复制、选中等）虽然可以在一定程度上保护内容，但本质上是“治标不治本”的。对于真正

start

2025年，回首过往，思绪如窗前的苍蝇，嗡嗡作响。此刻，我打开记忆的窗，倒一倒脑子，看看那些岁月里留下了什么。

使用CSS实现

通过CSS的 user-select 属性可以禁止用户选中和复制文本。代码如下：

<div>我是文字，禁止复制，使用css手段</div>

div {
	-webkit-user-select: none; /* Chrome, Safari, Opera */
	-moz-user-select: none;    /* Firefox */
	-ms-user-select: none;     /* Internet Explorer/Edge */
	user-select: none;         /* Non-prefixed version */
}

这种方法简单易用，兼容性好，但容易被绕过。

使用 JavaScript 实现

禁止复制事件

通过监听copy事件并调用preventDefault()方法阻止复制行为：

document.addEventListener('copy', function(e) {
	e.preventDefault();
	console.log('禁止复制事件')
})

禁止文本选中

通过监听selectstart事件阻止文本选中：

document.addEventListener('selectstart', function(e) {
	e.preventDefault();
	console.log('禁止文本选中')
})

这种方法可以有效阻止大多数用户的复制尝试，但依赖于JavaScript，用户可以通过禁用JavaScript来绕过。

使用 HTML 属性

在HTML标签中直接使用oncopy属性来阻止复制：

<div oncopy="return false;">我是文字，禁止复制，使用html手段</div>

这种方法简单，但只能阻止复制事件，无法阻止其他操作。
搞笑点：这种方式有点搞笑，用户明明选中了，也操作复制功能，但就是粘贴不了，哈哈

禁用右键菜单

通过JavaScript禁用右键菜单，防止用户使用右键复制，下面提供两种用法：

document.addEventListener('contextmenu', function(e) {
	e.preventDefault();
	console.log('禁用右键菜单')
})

document.oncontextmenu = function() {
	console.log('禁用右键菜单')
	return false;
};

这种方法可以阻止右键复制，但无法阻止键盘快捷键操作。

禁用浏览器控制台

禁用快捷键

用户可以通过快捷键（如 F12、Ctrl+Shift+I 等）打开控制台，可以通过监听键盘事件来阻止这些快捷键：

document.addEventListener('keydown', function(event) {
	if (event.keyCode === 123) { // F12
		event.preventDefault();
	}
	if (event.ctrlKey && event.shiftKey && event.keyCode === 73) { // Windows和Linux平台 Ctrl+Shift+I
		event.preventDefault();
	}
	if (event.metaKey && event.altKey && event.keyCode === 73) { // Mac平台 Command+Option+I
		event.preventDefault();
	}
	if (event.ctrlKey && event.keyCode === 85) { // Windows和Linux平台 Ctrl+U
		event.preventDefault();
	}
	if (event.metaKey && event.altKey && event.keyCode === 85) { // Mac平台 Command+Option+U
		event.preventDefault();
	}
	// 禁用选择网页元素快捷键
	if (event.metaKey && event.shiftKey && event.keyCode === 67) { // Mac平台 Command+Shift+C
		event.preventDefault();
	}
	if (event.ctrlKey && event.shiftKey && event.keyCode === 67) { // Windows和Linux平台 Ctrl+Shift+C
		event.preventDefault();
	}
});

检测窗口尺寸变化

当用户打开控制台时，浏览器窗口的尺寸会发生变化。通过定时检测窗口尺寸变化，可以判断是否打开了控制台，并采取相应措施：

const threshold = 88; // 打开控制台的宽或高阈值
window.setInterval(function () {
	const is = window.outerWidth - window.innerWidth > threshold || window.outerHeight - window.innerHeight > threshold;
	if (is) {
		// 如果打开控制台，可以刷新页面或显示警告
		window.location.reload();
		// 或者：
		document.body.innerHTML = "检测到非法调试，请关闭后刷新重试！";
	}
}, 1000);

使用 debugger 强制调试

通过在代码中插入 debugger 语句，可以强制浏览器进入调试模式，从而干扰用户正常使用控制台：

setInterval(function() {
	(function() {})['constructor']('debugger')['call']();
}, 50);

注意事项：
- 无法完全阻止：尽管上述方法可以在一定程度上限制用户打开控制台，但它们并不能完全阻止用户通过其他方式（如浏览器菜单）打开控制台。
- 用户体验：过度限制用户操作可能会影响用户体验，建议在必要时使用，并结合后端安全措施。
- 前端的安全性：不应完全依赖于阻止控制台的打开，更应通过后端验证和数据加密等方式来保障。

组合使用多种方法

仅靠单一手段无法有效禁止复制功能，只有综合运用多种方式，才能更全面地限制复制行为。
然而，对于前端而言，由于其代码的可访问性、数据传输的透明性以及客户端的不可控性，任何禁止复制的措施都只能是治标不治本。

<style>
    body {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
</style>
<body oncopy="return true;">
    <h1>初见花未开，<span>再逢共绽放</span> ，小青梅已长大。</h1>
    <img src="" alt="我是图片">
    <div>我是文字，禁止复制</div>
</body>
<script>
    document.addEventListener('copy', function (e) {
        e.preventDefault();
        console.log('禁止复制事件')
    })

    document.addEventListener('selectstart', function (e) {
        e.preventDefault();
        console.log('禁止文本选中')
    })

    document.addEventListener('contextmenu', function (e) {
        e.preventDefault();
        console.log('禁用右键菜单')
    })

    document.addEventListener('keydown', function (event) {
        if (event.keyCode === 123) { // F12
            event.preventDefault();
        }
        if (event.ctrlKey && event.shiftKey && event.keyCode === 73) { // Windows和Linux平台 Ctrl+Shift+I
            event.preventDefault();
        }
        if (event.metaKey && event.altKey && event.keyCode === 73) { // Mac平台 Command+Option+I
            event.preventDefault();
        }
        if (event.ctrlKey && event.keyCode === 85) { // Windows和Linux平台 Ctrl+U
            event.preventDefault();
        }
        if (event.metaKey && event.altKey && event.keyCode === 85) { // Mac平台 Command+Option+U
            event.preventDefault();
        }
        // 禁用选择网页元素快捷键
        if (event.metaKey && event.shiftKey && event.keyCode === 67) { // Mac平台 Command+Shift+C
            event.preventDefault();
        }
        if (event.ctrlKey && event.shiftKey && event.keyCode === 67) { // Windows和Linux平台 Ctrl+Shift+C
            event.preventDefault();
        }
    });

    const threshold = 88; // 打开控制台的宽或高阈值
    window.setInterval(function () {
        const is = window.outerWidth - window.innerWidth > threshold || window.outerHeight - window.innerHeight > threshold;
        if (is) {
            // 如果打开控制台，可以刷新页面或显示警告
            window.location.reload();
            // 或者：
            document.body.innerHTML = "检测到非法调试，请关闭后刷新重试！";
        }
    }, 1000);

    setInterval(function () {
        (function () { })['constructor']('debugger')['call']();
    }, 50);
</script>

相关思考

user-select

user-select 是一个 CSS 属性，用于控制用户是否可以选择页面上的文本内容。它有以下几种取值：

取值	描述
`none`	禁止用户选择文本
`auto`	默认值。根据浏览器的默认规则决定是否可以选择文本
`text`	允许用户选择文本
`all`	单击时选择整个元素的内容
`contain`	允许选择，但选择范围限制在元素边界内

注意事项：
- user-select 不是继承属性，但其默认值 auto 的表现类似于继承。
- 在某些浏览器中，user-select: all 的行为可能与预期略有不同。

更有效的保护方式

当我们需要更有效地保护网页内容（如版权信息、敏感数据等），可以考虑以下方法：

后端限制

将敏感内容存储在服务器端，仅在需要时动态加载，并通过身份验证和授权机制限制访问。
例如，只有经过验证的用户才能请求特定数据，或者对数据进行加密处理。

数字版权管理（DRM）

对于多媒体内容（如视频、音频），可以使用DRM技术来保护版权。DRM可以在内容分发过程中加密数据，并限制用户的使用权限。
例如，Netflix等视频平台通过DRM技术防止用户下载或非法传播内容。

法律手段

明确声明内容的版权归属，并通过法律手段保护知识产权。在网页上添加版权声明和使用条款，提醒用户未经授权的复制和传播是违法的。

内容展示方式的改变

将文本内容以图片形式展示，或者使用SVG、Canvas等技术动态生成内容，增加复制的难度。
但这种方法并不能完全阻止复制，因为用户可以通过OCR（光学字符识别）技术提取图片中的文字。

用户教育和信任机制

对于一些需要保护的内容，可以通过用户教育和信任机制来保护。例如，要求用户签署使用协议，或者通过社区监督和举报机制来防止滥用。

总结

前端限制（如禁止复制、选中等）虽然可以在一定程度上保护内容，但本质上是“治标不治本”的。
对于真正需要保护的内容，建议结合后端限制、法律手段、技术手段（如DRM）和用户教育等多种方式，从多个层面进行保护。

end

恳请诸位同仁、挚友、兄弟姐妹不吝赐教，多多指点！