Como Bloquear o Inspecionar em Sua Página Web

Este artigo foi criado usando o ChatGPT

Introdução

Proteger o código-fonte de uma página web pode ser uma tarefa desafiadora, especialmente quando usuários podem facilmente inspecionar e modificar o conteúdo usando ferramentas de desenvolvedor (devtools) do navegador. Neste guia, vamos explorar uma abordagem para bloquear ou dificultar o acesso ao inspecionar elemento.

Etapa 1: Entendendo as Ferramentas de Desenvolvedor

As ferramentas de desenvolvedor (devtools) são um conjunto de recursos que permitem aos usuários inspecionar o HTML, CSS e JavaScript de uma página web. Apesar de serem essenciais para o desenvolvimento web, essas ferramentas podem ser usadas de forma indevida para manipular ou copiar conteúdos sensíveis.

Etapa 2: Implementando um Script de Detecção de DevTools

Uma forma de dificultar o uso do inspecionar é monitorar o estado das devtools e tomar uma ação, como redirecionar o usuário, quando elas são abertas. Veja o exemplo abaixo:

<script>
  const devtools = {
    isOpen: false,
    orientation: undefined
  }
  const threshold = 160

  const emitEvent = (isOpen, orientation) => {
    globalThis.dispatchEvent(
      new globalThis.CustomEvent('devtoolschange', {
        detail: { isOpen: isOpen, orientation: orientation }
      })
    )
  }

  const main = ({ emitEvents = true } = {}) => {
    const platform = navigator.platform

    if (
      /iPad|iPhone|iPod/.test(platform) ||
      platform.toUpperCase().indexOf('MAC') >= 0
    ) {
      return
    }

    const widthExceedsThreshold =
      globalThis.outerWidth - globalThis.innerWidth > threshold
    const heightExceedsThreshold =
      globalThis.outerHeight - globalThis.innerHeight > threshold
    const orientation = widthExceedsThreshold ? 'vertical' : 'horizontal'

    if (
      (widthExceedsThreshold || heightExceedsThreshold) &&
      ((globalThis.Firebug &&
        globalThis.Firebug.chrome &&
        globalThis.Firebug.chrome.isInitialized) ||
        widthExceedsThreshold ||
        heightExceedsThreshold)
    ) {
      if (
        (!devtools.isOpen || devtools.orientation !== orientation) &&
        emitEvents
      ) {
        emitEvent(true, orientation)
      }
      devtools.isOpen = true
      devtools.orientation = orientation
    } else {
      if (devtools.isOpen && emitEvents) {
        emitEvent(false, undefined)
      }
      devtools.isOpen = false
      devtools.orientation = undefined
    }
  }

  main({ emitEvents: false })
  setInterval(() => {
    main()
    debugger
  }, 500)

  const checkDevtools = (isOpen = devtools.isOpen) => {
    if (isOpen) {
      location.href = 'https://google.com.br'
    }
  }

  window.addEventListener('devtoolschange', (event) =>
    checkDevtools(event.detail.isOpen)
  )
  document.addEventListener('DOMContentLoaded', () => checkDevtools())
</script>

Etapa 3: Explicando o Script

Este script monitora se as devtools do navegador estão abertas, e caso estejam, o usuário é redirecionado para uma outra página (neste exemplo, o Google). Ele faz isso verificando as dimensões da janela do navegador, já que a abertura das devtools normalmente altera essas dimensões.

Componentes do Script

• Função principal (main): Verifica se as devtools estão abertas e em qual orientação (horizontal ou vertical).
• Evento devtoolschange: Emitido quando há uma mudança no estado das devtools.
• Redirecionamento: Se as devtools estiverem abertas, o script redireciona o usuário.

Limitações

É importante destacar que bloquear completamente o inspecionar não é possível. Usuários avançados podem contornar essas proteções. O objetivo desse script é dificultar o acesso e dissuadir usuários menos experientes.

Conclusão

Embora não seja possível impedir completamente o uso das devtools, este script pode ser uma medida adicional de proteção. No entanto, é essencial considerar que a melhor proteção contra a cópia e manipulação indevida de conteúdo é a conscientização e o uso de boas práticas de segurança na web.