Can not block this. What you can do is store all the code in a variable and use the setInterval
function to check if the content has been modified, but this can cause conflicts with some plugins, for example Slideshows .
These plugins change the site's default code, and in that case, this method would not work correctly.
But ... Here is an example code.
const sourceCode = document.body.outerHTML;
setInterval( () => {
if (sourceCode !== document.body.outerHTML) {
document.body.innerHTML = sourceCode;
}
}, 500);
<h1>Tente alterar esse conteúdo via inspetor de elemento</h1>
But obviously this is not perfect and can be easily circumvented. Whether blocking JavaScript in the browser or by stripping the code and removing it.
This also increases memory consumption.
There are other things like locking the keys and the right mouse button, for example.
window.addEventListener("keydown", ev => {
switch( true ) {
/* Previne F12 */
case ev.keyCode === 123:
/* Previne Ctrl + Shift + */
case ev.ctrlKey && ev.shiftKey && event.keyCode == 74:
/* Previne Ctrl + U */
case ev.ctrlKey && ev.keyCode == 85:
console.log("Tecla bloqueada");
ev.preventDefault();
return false;
}
})
/* Previne clique direito do mouse */
window.addEventListener("contextmenu", ev => {
ev.preventDefault();
return false;
});
<input type="text" />
In addition to the forms already mentioned, you can also use MutationObserver
. With this API you can monitor the elements you want.
To use this class, simply instantiate it, using a callback function, and use the observe
method to start the procedure.
In the observe
method, we can use two parameters: element and the options we want to monitor.
The available options are:
Example:
function observe(element) {
const node = element.outerHTML;
new MutationObserver(event => {
element.outerHTML = node;
}).observe(element, {
attributes: true,
childList: true,
characterData: true,
subtree: true,
attributeOldValue: true,
characterDataOldValue: true
})
}
observe(document.querySelector("h1"));
<h1>Tente alterar o elemento
<code><h1></code>, via inspetor de elementos.</h1>
In this way, the function will monitor all events that occur on object h1