原生js实现禁止截屏
在原生JavaScript中实现完全禁止截屏存在技术限制,因为浏览器安全策略不允许网页直接控制操作系统级别的功能(如截屏)。但可以通过以下方法增加截屏难度或干扰截屏结果:

禁用右键和快捷键
通过阻止默认行为和禁用常见截屏快捷键(如PrtSc、Win+Shift+S)降低用户手动截屏的可能性:

document.addEventListener('keydown', function(e) {
if (e.key === 'PrintScreen' ||
(e.ctrlKey && e.key === 'p') ||
(e.metaKey && e.shiftKey && e.key === '4')) {
e.preventDefault();
alert('截屏功能已禁用');
}
});
document.addEventListener('contextmenu', e => e.preventDefault());
动态内容干扰
通过定时修改DOM或添加水印,使截屏内容难以使用:
// 周期性闪烁敏感内容
setInterval(() => {
const sensitiveElements = document.querySelectorAll('.sensitive');
sensitiveElements.forEach(el => el.style.visibility =
el.style.visibility === 'hidden' ? 'visible' : 'hidden');
}, 500);
// 全屏覆盖水印
const watermark = document.createElement('div');
watermark.style.position = 'fixed';
watermark.style.top = '0';
watermark.style.left = '0';
watermark.style.width = '100%';
watermark.style.height = '100%';
watermark.style.background = 'url("data:image/svg+xml;utf8,<svg...>") repeat';
watermark.style.pointerEvents = 'none';
document.body.appendChild(watermark);
检测DevTools打开
当检测到开发者工具打开时清除敏感内容(部分浏览器适用):
setInterval(function() {
const devtools = /./;
devtools.toString = function() {
document.body.innerHTML = '<h1>禁止调试</h1>';
return '';
};
console.log(devtools);
}, 1000);
注意事项
- 以上方法无法阻止物理设备拍照或专业截屏工具
- 部分功能可能影响用户体验,需权衡安全性与可用性
- 关键数据应通过后端权限控制保护,前端措施仅作为补充
对于高安全需求场景,建议结合DRM技术或专用客户端实现更高级别的保护。






