Do not allow change in source code

Question

Does anyone know how not to allow changes in "values" by inspecting element ? ah a few days ago I entered a site and went to try to change the value of an input, but when I clicked ENTER to record, automatically the value of the input returned to the pattern of the same code..

In my applications I tested to do this thinking it was some protective function of Chrome, but not..

so if anyone knows how to apply this security function to forms and inputs, give a Help ai.. Obg!

Answer 1

Can’t block this. What you can do is store all the code in one variable and use the function setInterval to check if the content has been modified, but this may cause conflicts with some plugins, for example Slideshows.

These plugins changes the default code of the site and in that case, would not work correctly this method.

But... follow an example of 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 easily be swindled. Either blocking Javascript in the browser or degubating the code and removing this snippet.

This also increases memory consumption.

There are other things too like blocking the keys and right-clicking the mouse, 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 aforementioned forms, you can also use the MutationObserver. With this API you can monitor the elements you want.

To use this class, just instantiate it, using a callback, and use the method observe to initiate the procedure.

In the method observe, we can use to pass two parameters: element and options we want to monitor.

The options available are:

• childList: Monitors additions and removals of child elements from the past element;

• attributes: Monitors changes in attributes of the last element;

• characterData: Monitors changes in element data;

• subtree: Monitors the child elements;

• attributeOldValue: Tells you if you want to pass the old value in the callback;

• characterDataOldValue: Defines true if characterData receive true and target data before the mutation needs to be saved;

• attributeFilter: Define a array local attributes (without namespace), if not, all attributes will be monitored.

  All options, except for attributeFilter, receive a boolean value.

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>&lt;h1&gt;</code>, via inspetor de elementos.</h1>

This way, the function will monitor all events that occur in the object h1