StopEdit is a simple JavaScript library designed to keep your webpage safe from unwanted changes. It actively monitors your page for edits and resets everything back to its original state. Whether it's someone tampering with "Inspect Element" or trying to edit your content directly, StopEdit has you covered.
- Customizable Protection: Guard your entire page or just specific elements (default:
<body>). - Automatic Reversion: Detects unauthorized changes and immediately reverts them.
- Heartbeat Monitoring: Periodic checks to ensure content integrity.
- Debugging Tools: Enables detailed logging in the console for easy debugging.
A lot of people are asking me, "Godsent! What have you got up there again? We don't understand it". And most times, I just tell them, "Go read the description again."
So, what actually is this my lib about? The shortest anser is that, "It let you stop bad guys from editing anything in your live website by manipulating the frontend. Some bad guys can add extra CSS, HTML, JS, etc and even make themselves or their names verified in your site to trick unsuspecting people.
So, how did i fix a lot of problems by kicking thousands of potential attackers or bad guys away? I created STOPEDIT which by the end of this season would be able to do a lot of things. For now, the To-Do would keep you posted on what has been done. So, what is the motivation?
- Stop bad guys from making changes to your hosted live site by using inspect element, etc
- Stop bad guys from viewing the original url of images, from downloading images, etc
- Prevent aliens from scrapping your site just because they feel its good
- Block all kind of suspicious activities as long as they attempt any kind of "edit"
- Disable content copy, add watermark text, prevent printing, etc
- Allows you decide what to whitelist from the library protection
To install StopEdit, simply download the StopEdit.js file and include it in your HTML file:
<script src="path/to/StopEdit.js"></script>Here's how you can set it up:
<script>
const guard = new StopEdit({
selector: 'body', // Apply StopEdit to the entire body
heartbeat: 60000, // Check every 60 seconds to monitor any changes
debug: true,
noCopy: true,
noPrint: true,
noScreenshot: true, // does not work always
autoBlur: true,
whitelist: ['#editable-section'] // Only the editable section is whitelisted for direct edits
});
guard.init(); // Start monitoring
</script><img src="example.jpg" alt="anything" class="anyclass" protected>Here's a complete example to get you started:
<!DOCTYPE html>
<head>
<title>StopEdit Example</title>
</head>
<body>
<h1>Protected Content</h1>
<p>This text is protected. Any changes made to it will be automatically undone.</p>
<div class="container">
<h2>Protected Text</h2>
<div id="editable-section" class="editable" contenteditable="true">
This section is editable! Feel free to type here. 🤦♂️
</div>
<div id="editable-section" class="" contenteditable="true">
This section is editable! Feel free to type here ✍️
</div>
</div>
<div class="container">
<h2>Protected Text</h2>
<div id="editable-section" class="editable" contenteditable="false">
This section is editable! Feel free to type here but only via inspect element 🔴
</div>
<div id="editable-section" class="" contenteditable="false">
This section is editable! Feel free to type here but only via inspect element 😎
</div>
</div>
<div class="container">
<h2>Protected Text</h2>
<div id="editable-section" class="editable">
This section is not editable! Why? because we did not add the editable-section id 😃
</div>
<!-- the contenteditable="true will be ignored below -->
<div id="" class="" contenteditable="true">
This section is not editable! Why? because we did not add the editable-section id ✍️
</div>
</div>
<!-- protected img -->
<img src="example.jpg" alt="anything" class="anything" protected>
<br>
<!-- unprotected img -->
<img src="example.jpg" alt="anything" class="anything">
<!-- Include the StopEdit library -->
<script src="path/to/StopEdit.js"></script>
<script>
const guard = new StopEdit({
// basic rules
selector: 'body',
heartbeat: 1000,
debug: true
});
guard.init();
</script>
</body>
</html>Please refer to the example.html for more complete examples with code snippets you can edit and play with to better understand the library. Please do this before you drop any hate speech. Say no to cyber bully. This lib/plugin is made by a PHP developer 😂. But feel safe and free to take it serious. With the backend feature we would be releasing soon, our protection will increase to 100% focus and serious doing what its made to do which is "prevent even determined attackers from edits". Its your website not theirs. Let them go create their own site and exploit it. 🤣
JS
selector(default:'body'): Target specific elements for protection.heartbeat(default:100000ms): Set the interval (in milliseconds) for monitoring changes.debug(default:false): Turn on logging to track actions in the console.noCopy(default:false): Prevent text selection and copynoPrint(default:false): Disallow users from printing exact pagenoScreenshot(default:false): Experimental featureautoBlur(default:false): Blur your site when their mouse is outwhitelist: ['#any-section-you-like'](default: ``): You need to register all sections to exclude from default protection here. Apply withnormal contents
HTML
-
contenteditable(default:true): Make content editable live on the screen.
Example:<div id="" class="" contenteditable="true">some text</div>
-
editable-section(default:false): Prevent editing when not set.
Example:<div id="editable-section" class="">Will be excluded from protection of edits</div>
-
protected(default:false): Hide right-click, download, or access to the exact URL.
Example:<img src="example.jpg" protected>
- Content Backup: When initialized, StopEdit saves a copy of the original content.
- Live Monitoring: It uses
MutationObserverto track real-time changes. - Regular Checks: Optional heartbeat checks provide an added layer of security.
- Video protection
- Adblock detect
- Device Blocker
- Prevent Copy
- Block suspected dangerous users
- Lock page with password
Added some impressive features:
- noCopy
- noPrint
- noScreenshot
- autoBlur
- Image protection
- Readme doc updated
- Core functionality for monitoring and resetting content.
- Documentation added.
- Browser compatibility testing.
- Improved protection for image URLs.
- Enhanced anti-theft measures for code.
- Prevent copying of page content.
- Server-side integration (PHP, Node.js).
- Detailed online documentation with examples.
We welcome contributions! Whether it's fixing a bug, adding new features, or improving the documentation, your input is valuable. Here's how to contribute:
- Fork the repository: Visit the repo here.
- Clone your fork:
git clone https://github.com/YOUR_USERNAME/miragek-stop-edit-js-lib.git- Create a branch:
git checkout -b feature/your-feature-name- Make your changes and commit:
git add .
git commit -m "Description of your changes"- Push your changes:
git push origin feature/your-feature-name- Submit a Pull Request: Open a PR in the main repository.
- Ensure your changes are well-tested.
- Keep your commit messages clear and concise.
- Follow the repository's coding standards.
Have questions? Feel free to open an issue or start a discussion!
StopEdit is licensed under the MIT License. See the LICENSE file for more details.
Created by Godsent for Miragek
StopEdit is a straightforward solution to protect your webpage content. It's lightweight, easy to set up, and highly effective. If you have suggestions, questions, or feedback, don't hesitate to get in touch!