AntiScreenshot Library

AntiScreenshot is a JavaScript library that prevents screenshots, screen recordings, and unauthorized access to website content. It supports multiple frontend frameworks including Angular, React, Vue, and Vanilla JS.

Features

• Prevents screenshots using keyboard shortcuts
• Detects screen recording
• Blurs content on suspicious activity
• Detects and blocks developer tools
• Disables right-click context menu
• Detects cursor movements and clicks outside the browser window
• Prevents unauthorized DOM manipulation
• Customizable system-wise restrictions (Windows, Mac, Linux)
• Watermark support for content protection

Installation

Using NPM

npm install anti-screenshot-lib

Using for types in typescript

npm install --save-dev @types/anti-screenshot-lib

Using CDN

<script src="https://cdn.example.com/anti-screenshot-lib.min.js"></script>

Usage

Vanilla JS

import AntiScreenshot from "anti-screenshot-lib";

const antiScreenshot = new AntiScreenshot({
  blockShortcuts: true,
  detectRecording: true,
  blockDevTools: true,
  targetElements: ["#protected-content"],
  systemConfigs: {
    windows: { blockNavigationKeys: true },
    mac: { blockSpecialCharacters: true },
    linux: { blockAllKeys: true },
  },
});

Angular

1. Install the library:

   npm install anti-screenshot-lib

2. Use it in your component:

   import { Component, OnInit } from "@angular/core";
   import AntiScreenshot from "anti-screenshot-lib";
   
   @Component({
     selector: "app-root",
     templateUrl: "./app.component.html",
     styleUrls: ["./app.component.css"],
   })
   export class AppComponent implements OnInit {
     ngOnInit() {
       new AntiScreenshot({
         blockShortcuts: true,
         detectRecording: true,
       });
     }
   }

React

1. Install the library:

   npm install anti-screenshot-lib

2. Use it in your component:

   import React, { useEffect } from "react";
   import AntiScreenshot from "anti-screenshot-lib";
   
   const App = () => {
     useEffect(() => {
       new AntiScreenshot({
         blockShortcuts: true,
         detectRecording: true,
       });
     }, []);
   
     return <div id="protected-content">Protected Content</div>;
   };
   
   export default App;

Configuration Options

| Option | Type | Default | Description | | --------------------- | ------- | ------- | --------------------------------------- | | blockShortcuts | boolean | true | Blocks screenshot keyboard shortcuts | | detectRecording | boolean | true | Detects screen recording attempts | | blockDevTools | boolean | true | Detects and blocks developer tools | | disableRightClick | boolean | true | Disables right-click context menu | | detectDOMManipulation | boolean | true | Prevents unauthorized DOM changes | | targetElements | array | [] | Specific elements to apply restrictions | | systemConfigs | object | {} | OS-specific restrictions |

License

This project is licensed under the MIT License.