How to prevent the impact of the browser's hidden element function on web page watermarks?

How to effectively prevent the browser from hiding elements function from destroying web page watermarks?

The anti-tampering of web watermarks has always been the focus of developers. Even if multiple protection measures are taken, users may still use the browser's "hide elements" feature to bypass watermarks. This article discusses how to deal with this challenge and analyzes the triggering events and style effects of hidden elements.

First of all, it is not a perfect solution to directly prevent users from accessing browser developer tools, because technical means will always be broken. Although the following methods can increase the difficulty, they cannot be completely eliminated:

1. Restrict right-click menu and F12 shortcut keys: Listen to right-click and F12 key events through JavaScript, and try to prevent the developer tool from opening. However, skilled users can bypass this limitation through other avenues such as browser extensions.

    // Try to block F12 (limited effects)
   document.addEventListener('keydown', function(event) {
       if (event.keyCode === 123) {
           event.preventDefault();
           return false;
       }
   });
   // Try to block the right-click menu (the effect is limited)
   document.addEventListener('contextmenu', function(event) {
       event.preventDefault();
       return false;
   });

2. Monitor window size changes: Opening a developer tool usually changes the size of the browser window. By monitoring the differences between window.innerWidth / window.innerHeight and window.outerWidth / window.outerHeight , you can try to detect whether the developer tool is open. But this is easy to misjudgment and can also be bypassed.

    function checkConsole() {
       const threshold = 100; // Set threshold if (window.outerWidth - window.innerWidth > threshold || window.outerHeight - window.innerHeight > threshold) {
           console.warn('Probably the developer tools are opened');
       }
   }
   window.addEventListener('resize', checkConsole);

3. Using debugger statements (not recommended): Using debugger statements for infinite recursion is an extreme method, which will seriously affect performance and even cause browser crashes. It is strongly not recommended to use it.

A more effective strategy is:

• Strengthen the binding of watermarks and page content: combine watermarks more closely with page content, such as using Canvas to draw watermarks, or embed watermarks into the background image of page elements. This makes it difficult to remove the watermark by simply hiding the elements.
• Server-side verification: Verify the integrity of the watermark on the server side. This requires recording the characteristic information of the watermark on the server side and periodically checking whether the data submitted by the client is consistent with the recorded information.
• Use more advanced anti-debugging technology: This involves more complex technologies such as code obfuscation and virtualization, which are costly and difficult to maintain.

When the user tries to hide the element, the browser triggers a DOM event, such as DOMSubtreeModified . Listening to these events can record the user's actions, but it cannot prevent hidden behavior itself. Hiding elements is mainly achieved by modifying display or visibility attributes of the element.

Ultimately, it is almost impossible to completely prevent users from hiding the watermark. The best solution is to adopt a multi-layer defense strategy to increase the cost of attack and reduce the success rate. In-depth integration of watermarks with page content and combined with server-side verification is a more reliable protection method.

The above is the detailed content of How to prevent the impact of the browser's hidden element function on web page watermarks?. For more information, please follow other related articles on the PHP Chinese website!