Shulou(Shulou.com)05/31 Report--

Today, I will talk to you about how to use JS to add passwords to pictures. Many people may not know much about it. In order to make you understand better, the editor has summarized the following contents for you. I hope you can get something according to this article.

Here is a way to add a password to a picture with JS. You can convert any picture into html, and enter the correct password to open and view the picture.

The effect is as follows:

Effect description

It ends up with only one file. Instead of a picture and a html, instead of referencing the picture in the html, the picture is put into the html.

When you open it, you must enter the correct password, but the wrong password cannot be opened.

The password cannot be obtained! The password cannot be found by looking at the html source code, although the password is indeed stored in the file.

Going straight to the topic, the technical principle and implementation of this effect are described below:

Technical principle

Convert the picture to a base64 string so that the string can be written directly to html without having to reference an external picture.

When it is opened, the input password and password verification are all realized by JS.

The password is hidden and cannot be obtained by looking at the web page source code.

Realization method

1. The method of putting a picture into a web page is very simple, as long as the picture is converted into base64-encoded characters, and the conversion is carried out using canvas, as follows:

Function getImageBase64 (img, ext) {/ / create the canvas DOM element and set its width and height as the picture var canvas = document.createElement ("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext ("2d"); / / use canvas ctx.drawImage (img, 0,0, img.width, img.height); var dataURL = canvas.toDataURL ("image/" + ext) / return a string of Base64 codes canvas = null; return dataURL;} var img_path = "yxdj250x250.jpg"; / / set an img element with id as icon in advance var user_icon = document.getElementById ('icon'); fileExt= "; / / get base64 code user_icon.src = img_path; user_icon.onload = function () {/ / base64 code base64 = getImageBase64 (user_icon, fileExt) Console.log (base64);}

How to operate: prepare a picture, the above code is used: yxdj250x250.jpg, the actual operation for their own conversion of the picture.

Put the above js code into html, open and run it, and then you can see the output of the base64 code corresponding to the image from the browser's debugging tool. The effect is as follows:

At this point, if you want to display a picture on a web page, just use the img src= "" method and fill in the code output above into src.

two。 Next, the password function is implemented as follows:

Var pass = prompt ('Please enter password','); if (pass! = "123") {history.go (- 1); alert (" password error. ") ;} else {show_pic ();}

As can be seen from the above functional logic, if you enter a password of 123, the picture is displayed, otherwise it cannot be opened.

3. It is obviously not possible for passwords to be found directly. In that way, anyone who knows a little bit of computer knowledge can get the password, which will lose the effect of password protection.

Some people may say: do not use name-text comparison, use variable comparison, hide password characters. But it's not an effective way. Anyone who knows something about technology knows that browsers can debug breakpoints. As long as you come to the breakpoint, you can check the password directly:

What is the really effective way? JS code obfuscation encryption! The password is also stored in the JS code, as long as the code is confused and encrypted, the password will be encrypted together, there is no way to find the password, and can also prevent breakpoint debugging.

The following is the effect of the code after obfuscation encryption:

JS code confusion, international JScrambler, domestic JShaman, the effect of confusion is similar, JShaman is more convenient to use, the Chinese interface, operation is also more in line with Chinese habits.

When code confusion, be sure to use the "string encryption" feature, because this is a key requirement of our confusion, as long as this option is selected, the password will be hidden.

Some technical students are likely to object that JS can be restored after obfuscation and encryption.

With regard to this idea, it should be divided into different situations.

If it is a primary encryption with unescape, escape, eval, it is reversible and can be decrypted.

And if it is really high-strength obfuscation encryption, it is unsolvable.

This requires an in-depth explanation from the rationale, such as JShaman obfuscation encryption, which does not use simple reversible encryption.

Instead, it first carries out lexical analysis and syntax analysis of the JS source code to separate variables, constants, functions, keywords, and so on, to generate a syntax tree, and then carries out variable deformation, constant arraying, encryption, inserting zombie code, adding anti-debugging, flattening control flow, and so on, and then * * regenerates the code.

The code is rebuilt and irreversible.

Still don't believe it?

All right, let's actually test it and reverse it.

Code obfuscation first:

Then anti-confuse the result code. Esprima and escodegen are commonly used.

This is used in the context of nodejs:

First install these two components:

Npm install esprima npm install escodegen

Then prepare the following code:

Then execute, and the anti-obfuscation result is output:

It can be seen that the code obtained after anti-confusion is very different from the original code, there are many complex logical relationships, the characters are chaotic, and the code is almost impossible to read, let alone understand the meaning of the original code.

From this decrypted code, of course, there is no way to find the original password "123".

The problem of confusion and anti-confusion is over for the time being. if someone still refutes: a little bit of reading, as long as you are willing to take the time, three days, a month, you can always slowly understand. That's a bit of a bull's-eye.

Let's go back to the text. Because the base64 encoding string of the image is relatively long and the capacity is large, it is recommended to confuse only the key code when confusing encryption, otherwise the generated code may be too large.

After this series of operations, a password-protected picture is generated.

After reading the above, do you have any further understanding of how to use JS to add passwords to pictures? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.