Talk about how the front-end prevents data leakage

shigen is a blogger who writes daily articles. He is good at the development of Java, python, vue, shell and other programming languages as well as various applications and scripts. Record growth, share knowledge, and retain feelings.

Recently, I suddenly discovered an interesting thing. Some websites are almost dead when you enter them. That kind of death is different from the death of our common websites:

Can’t select text
Can’t copy and paste text
Cannot right click mouse to display options
Can’t open console
…

There are all kinds of weird operations, which are very similar to a certain library I first came into contact with. shigen‘s curiosity was filled with curiosity, “Hey guys, how did you do this?” After some operations, I found that this is to prevent data leakage on the website (high-end). In my opinion, it’s either to show off or to cut leeks.

Without further ado, let’s just do it manually. For part of the code, please refer to the article: How to Prevent Website Information from Leaking (Copy/Watermark/Console).

The effect achieved by shigen is as follows:

Will enter the wine page

A page was generated using magic, displaying Li Bai’s “The Wine Will Enter”. The functions I need are as comprehensive as possible, prohibiting copying, selection, debugging…

After looking for many ways, the functions that I can proudly display in the end are:

Disable selection
Disable right mouse button
Copy and paste is prohibited
Disable debugging resources (by refreshing the page)
Common page watermarks

In fact, there is no special technical content. I just show it here. I hope it can be used as a tool for everyone to use.

Page section

html5 + css, there is nothing to talk about.

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {<!-- -->
            font-family: "Microsoft YaHei", sans-serif;
            line-height: 1.6;
            padding: 20px;
            text-align: center;
            background-color: #f8f8f8;
        }

        .poem-container {<!-- -->
            max-width: 600px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        h1 {<!-- -->
            font-size: 1.5em;
            margin-bottom: 20px;
        }

        p {<!-- -->
            text-indent: 2em;
            font-size: 1.2em;
        }
    </style>
    <title>Li Bai's "About Wine"</title>
</head>

<body>
    <div class="poem-container">
        <h1>Wine will be served</h1>
        <p>Ignore you, the water of the Yellow River comes up from the sky and flows to the sea never to return.</p>
        <p>Don’t you see, the bright mirror in the high hall has sad white hair, and it looks like blue silk in the morning and turns to snow in the evening.</p>
        <p>If you are proud of life, you must have all the joy, and don't let the golden bottle stand empty against the moon.</p>
        <p>It is my nature that my talents will be useful, and I will come back after all my money has been spent.</p>
        <p>Cooking sheep and slaughtering cattle is a pleasure, and you will have to drink three hundred cups at a time.</p>
        <p>Master Cen, Dan Qiusheng, is about to drink wine, but don’t stop drinking.</p>
        <p>I sing a song with you, please listen to me.</p>
        <p>Bells, drums, food and jade are not expensive, but I hope I will never wake up after being drunk for a long time.</p>
        <p>In ancient times, all the sages were lonely, but only the drinkers left their names.</p>
        <p>In the old days, King Chen had a banquet and a lot of fun and banquets.</p>
        <p>What does the master mean if he has less money? It is up to you to sell it.</p>
        <p>The five-flowered horse and the golden fur will be exchanged for fine wine, and I will sell the eternal sorrow with you.</p>
    </div>
 </body>

js part

Disable selection

//Prevent users from selecting
function disableSelect() {<!-- -->
    //Method: Set styles for body
    document.body.style.userSelect = 'none';

    // Disable input ctrl + a
    document.keyDown = function(event) {<!-- -->
        const {<!-- --> ctrlKey, metaKey, keyCode } = event;
        if ((ctrlKey || metaKey) & amp; & amp; keyCode === 65) {<!-- -->
            return false;
        }
    }
};

Copying, pasting, and cutting are prohibited

document.addEventListener('copy', function(e) {<!-- -->
    e.preventDefault();
});
document.addEventListener('cut', function(e) {<!-- -->
    e.preventDefault();
});
document.addEventListener('paste', function(e) {<!-- -->
    e.preventDefault();
});

Disable right mouse button

//Prevent right click
window.oncontextmenu = function() {<!-- -->
    event.preventDefault()
    return false
}

Disable debugging resources

I will focus on analyzing this.

let threshold = 160 // The width or height threshold for opening the console
window.setInterval(function() {<!-- -->
    if (window.outerWidth - window.innerWidth > threshold ||
        window.outerHeight - window.innerHeight > threshold) {<!-- -->
        // If the console is opened, refresh the page
        window.location.reload()
    }
}, 1000)

The meaning of this code is easy to understand. When we press F12, the width of the page will definitely become smaller. At this time, compared with the width of the screen, if it is greater than the threshold we set, we will consider the user to be debugging the page. This is also the better way I have found so far. But, but, do you need to seriously think about the following questions?

If the page loads frequently, will there be a big loss in traffic?
Page refresh, frequent calls to the backend interface, interface pressure, interface idempotence

Therefore, I think this method is inelegant and extremely inelegant, but is there any other good solution?

Add watermark

//Generate watermark
function generateWatermark(keyword = 'shigen-demo') {<!-- -->
    // Create Canvas element
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');

    //Set Canvas size and font style
    canvas.width = 100;
    canvas.height = 100;
    context.font = '10px Arial';
    context.fillStyle = 'rgba(0,0,0,0.1)';

    //Draw text to Canvas
    context.fillText(keyword, 10, 50);

    //Generate the URL of the watermark image
    const watermarkUrl = canvas.toDataURL();

    // Display the watermark image on the page (or perform other operations)
    const divDom = document.createElement('div');
    divDom.style.cssText = `
        position: fixed;
        z-index: 99999;
        top: -10000px;
        bottom: -10000px;
        left: -10000px;
        right: -10000px;
        transform: rotate(-45deg);
        pointer-events: none;
        background-image: url(${<!-- -->watermarkUrl});
    `;
    document.body.appendChild(divDom);
}

There is no need to understand the code, just adjust some parameters and you can use it right away.

I thought about it, when I first came into contact with this kind of page watermark, it was in a very old OA office system. Later, I used a certain book, and its app pages were full of watermarks, including the browser-side pages.

So, I implemented this too. But, but, there is a technology called OCR, which in vernacular means text recognition. I took a screenshot of the picture and asked a certain letter or book to recognize the following. The speed and effect are very nice. Of course, the watermark may also be recognized. Smart developers will set the color of the watermark and the color of the text to be the same. At this time, if accurate text is needed, a lot of effort will be required. In other words, it is really difficult to accurately identify information without customized OCR.

There are also many pages that implement js data encryption and interface data encryption. But as the Tao rises one foot higher, the devil rises one foot taller, and all of them are making mutual progress. It depends on the actual business scenario and system design.

The above is all the content shared today. If you think it is good, remember to like and watch and follow to support it. Your encouragement and support will be the motivation for shigen to insist on daily updates. . At the same time, shigen has synchronized articles on multiple platforms, and can also browse and subscribe simultaneously:

Platform	Account	Link
CSDN	shigen01	shigen’s CSDN homepage
Zhihu	gen-2019	shigen’s Zhihu homepage
Nuggets	shigen01	shigen’s Nuggets homepage
Tencent Cloud Developer Community	shigen	shigen’s Tencent Cloud Developer Community Homepage
WeChat Public Platform	shigen	Public account name: shigen

With shigen, every day is different!