How to Block Inspect Element on Your Web Page

This article was created using ChatGPT

Introduction

Protecting the source code of a web page can be challenging, especially when users can easily inspect and modify the content using browser developer tools (devtools). In this guide, we'll explore an approach to block or make it more difficult to access the inspect element feature.

Step 1: Understanding Developer Tools

Developer tools (devtools) are a set of features that allow users to inspect the HTML, CSS, and JavaScript of a web page. While essential for web development, these tools can be misused to manipulate or copy sensitive content.

Step 2: Implementing a DevTools Detection Script

One way to make it harder to use inspect element is by monitoring the state of devtools and taking action, such as redirecting the user, when they are opened. Here’s an example:

<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>

Step 3: Explaining the Script

This script monitors whether the browser's devtools are open, and if they are, it redirects the user to another page (in this example, Google). It does this by checking the browser window dimensions, as opening devtools typically changes these dimensions.

Script Components

• Main Function (main): Checks if devtools are open and in which orientation (horizontal or vertical).
• devtoolschange Event: Triggered when there is a change in the state of the devtools.
• Redirection: If devtools are open, the script redirects the user.

Limitations

It's important to note that completely blocking the inspect element is not possible. Advanced users can bypass these protections. The goal of this script is to make access more difficult and to deter less experienced users.

Conclusion

While it's not possible to completely prevent the use of devtools, this script can serve as an additional layer of protection. However, it's essential to remember that the best protection against unauthorized content copying and manipulation is awareness and the use of best security practices on the web.