如何在MERN栈网站实现用户截屏时自动黑屏的防护功能？

该功能核心以前端逻辑实现为主，后端仅需配合做内容权限控制即可，具体实现方式如下：

效果演示 #

1. 前端（React）核心逻辑 #

通过监听系统截屏相关事件，触发时给页面叠加全屏黑色遮罩，即可让截屏结果为全黑：

事件监听代码 #

import { useEffect } from 'react';

const CoursePage = () => {
  useEffect(() => {
    // 快捷键拦截：匹配主流系统的默认截屏快捷键
    const handleKeyDown = (e) => {
      const isWindowsScreenshot = (e.key === 'PrintScreen') || 
                                (e.metaKey && e.shiftKey && e.key === 'S') ||
                                (e.ctrlKey && e.key === 'PrintScreen');
      const isMacScreenshot = (e.metaKey && e.shiftKey && ['3','4','5'].includes(e.key));

      if (isWindowsScreenshot || isMacScreenshot) {
        document.body.classList.add('screenshot-block');
        // 截屏操作一般1秒内完成，结束后移除遮罩恢复页面显示
        setTimeout(() => document.body.classList.remove('screenshot-block'), 1000);
      }
    };

    // 监听页面失焦/隐藏：规避第三方截屏工具、切屏截屏的情况
    const handlePageHide = () => document.body.classList.add('screenshot-block');
    const handlePageShow = () => document.body.classList.remove('screenshot-block');

    window.addEventListener('keydown', handleKeyDown);
    document.addEventListener('visibilitychange', () => {
      document.hidden ? handlePageHide() : handlePageShow();
    });
    window.addEventListener('blur', handlePageHide);
    window.addEventListener('focus', handlePageShow);

    // 卸载时清除事件监听
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
      document.removeEventListener('visibilitychange', handlePageShow);
      window.removeEventListener('blur', handlePageHide);
      window.removeEventListener('focus', handlePageShow);
    };
  }, []);

  return <div>{/* 你的课程页面内容 */}</div>
};

export default CoursePage;

配套全局CSS #

.screenshot-block::after {
  content: '';
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  z-index: 999999;
  pointer-events: none;
}

2. 视频类内容升级方案 #

如果是视频课程，建议搭配DRM数字版权加密实现系统级防截屏：

• 用Encrypted Media Extensions (EME) 接口加密视频流，操作系统会直接禁止截屏工具获取视频帧，截取结果默认就是黑屏，比前端事件拦截可靠性更高。

3. 后端（Node/Express）配合逻辑 #

• 付费课程资源仅对已购买的授权用户返回，避免未授权用户爬取内容
• 视频/课件资源生成带过期时间的签名URL，避免资源链接被恶意传播

注意事项 #

该方案只能拦截普通用户的常规截屏操作，无法100%规避所有盗拍行为：比如用户用手机拍摄屏幕、在虚拟机中打开页面、使用系统级特权截屏工具时还是可能绕过，可以根据你的业务安全要求选择合适的防护等级。

内容的提问来源于stack exchange，提问作者Rohan Devaki