How do I use the simplest front end technology to reveal the principles behind those gray industries

[Wscats]

This article describes some very general and simple front-end technologies, but they are the key technologies to realize some gray industries. Of course, I only implement some very simple ideas and methods, and try to write them as simple and clear as possible. I hope that I can learn from other things and explore the front-end together. The infinite possibilities of technology. I also wrote several articles in this area a few years ago, and a lot of them have been deleted due to certain relationships later. If you are interested, you can find it back 😀

• 《How do I use front-end technology to get the VIP of XXOO website》
• 《How do I realize the WeChat mini game jump one jump plugin》
• 《Demonstration of some malicious scripts》
• ...

I believe that when we often watch live broadcasts or TV shows, we will notice that there are a lot of barrage. Sometimes barrage is more interesting than TV series or live games. Careful students will find that sometimes the barrage will appear the same, and then continue to loop. The time is still sent by the same user, so how can this user send the same message or different messages continuously in a short period of time?

In fact, it is very simple. Take the web version of Huajiao Live as an example. Any comment must have an input box. It is too inefficient to manually input text and then send it. As a gray product professional, you will definitely not enter it manually.

Then the most direct and violent way is to hand over the task to the developer to automatically implement it. If you are a front-end developer, you can use the selector to get the node of the input box.

https://www.huajiao.com/

That node is very easy, just right click on the input box to view, we can see that it is essentially realized by the following code.

<input name="message" class="tt-type-msg" placeholder="说点什么" />

Then you can get this node in a variety of ways, as long as you get the only node:

The following three lines actually work:

document.querySelector('[name="message"]');
document.querySelector('.tt-type-msg');
document.querySelector('[placeholder="说点什么"]');

After getting the node, our next step should be to simulate our user operation, enter the text of the barrage, and you can see that when we enter the following code in the browser console and press Enter to run, our 666 and Nubi Automatically write into the input box, students who understand the front end will understand the meaning of this code at a glance:

It is nothing more than rewriting the value of the input box, and then assigning the entered value.

document.querySelector('[placeholder="说点什么"]').value = 'Wscats 666';

Of course, the input value is hard-coded in this way. We can also use the dictionary to generate random bullet screens or comments. For detailed and complex comments, you can find the dictionary online. If you don’t want to be troublesome, you can use a simple array. If you want to send, customize it, and then send it with a random function.

const offset = parseInt(Math.random() * 7);
const word = ['666', 'Niubi'];
document.querySelector('[placeholder="说点什么"]').value = word[offset];

The automatic input is complete, we are still the last step, and click to send automatically. In fact, the simulation is to click the send button with the mouse or hit the enter key on the keyboard. This is all easy to handle. To find the code node behind that location, we also put the mouse on the red send button and right-click to view it. You can see the information of this node in the console.

Since this node does not have many attributes, we can directly search based on the unique mark of class.

document.querySelector('.tt-type-submit').click();

Also follow the above method to input the code into the console and press Enter, you can see the text in the input box is automatically sent out.

But it’s almost imperfect here. Our entire code just simulates an operation, so how to implement looping, don’t forget, the browser has timers and delays interfaces, so we can use the setInterval function To send messages according to the prescribed time rating, then we can free our hands and relax to enjoy the beauty anchor, oh no, it is the wonderful game of the game anchor, right? The game anchor also takes screenshots online from time to time and hangs the script It's not a beauty to be prostituted on it.

setInterval(() => {
  document.querySelector('[placeholder="说点什么"]').value = 'Awesome Eno';
  document.querySelector('.tt-type-submit').click();
}, 2000);

This is the effect we have achieved. Of course, this is only the most basic and entry-level basis. We can also change many gameplays. For example, if I am an anchor, I will arrange a robot to help me automatically brush gifts and automatically help me respond to users. Automatically like me.

Of course, the space here is limited, so I will simply write something. For example, we can connect to the Turing robot interface implemented by a third party. The key is registered by myself. There is a limit on the number of uses per day. Students who want to test are best to go to the official website Register one yourself:

http://www.tuling123.com/openapi/api?key=c75ba576f50ddaa5fd2a87615d144ecf&info=你好

This interface only needs to change the parameters of info to request the Turing robot to get the robot's reply. For example, you can tell him, tell a joke, who is Jacky Cheung, etc. We don't spend time to implement this ourselves. Now that you have an AI robot, just call the interface directly, and you can go to the official website to customize it.

We can get the content of the last reply to the user, and then reply to his content. Of course, if you are bored enough, you can also realize the function of two robots chatting with each other, and the live broadcast room will instantly become lively. As long as there are enough water soldiers, the live broadcast room can be used. How lively it is, especially useful in live streaming.

But here is still using Huajiao live broadcast as an example to appreciate the beautiful singing voice. Still the previous idea, if you want to reply to the last barrage, you need to get the node behind the barrage:

console.log("最后的一条评论为:" + $(
	$(".tt-msg-content-h5.tt-msg-content-h5-chat")[
		$(".tt-msg-content-h5.tt-msg-content-h5-chat").length - 1
	]
)
.text()
.replace(/(^\s*)|(\s*$)/g, ""));

This code is not complicated. In fact, it does a few things. Get the plain text of the last content of the chat history in the live room, and then delete the spaces inside. Specifically, you can do other processing, I won’t do it here. It's complicated.

Once you get the final reply, just send it to the Turing interface. Of course, many live broadcast websites will prevent you from using a script. First of all, if the website uses the http protocol, the Turing interface should use the http protocol. For https, just change it directly to https, otherwise a protocol error may be reported.

Just put the code here, don’t write the native language, use Huajiao live as an example to try to support jQuery, then directly add the $ symbol, we send an ajax request, the server address of the request is the Turing interface , The requested info parameter is the content of the last user's reply.

$.ajax({
  type: 'GET',
  url:
    'https://www.tuling123.com/openapi/api?key=c75ba576f50ddaa5fd2a87615d144ecf&info=' +
    $(
      $('.tt-msg-content-h5.tt-msg-content-h5-chat')[
        $('.tt-msg-content-h5.tt-msg-content-h5-chat').length - 1
      ]
    )
      .text()
      .replace(/(^\s*)|(\s*$)/g, ''),
  success: function (data) {
    console.log(data);
    $('.tt-type-msg').val(data.text);
    $('.tt-type-submit').click();
  },
});

When we entered the following code in the console and hit enter, we found that the request was sent successfully, but the Huajiao made some information judgments, it is estimated to prevent Xiaobai from writing messages, but how can this be me, want to send us It is stuck in the console and cannot be operated. This is still too tender.

We only need to do a Sao operation. If we have learned the front-end, we know how the breakpoint is hit. We directly expand the source code, add a conditional breakpoint, and enter false to ignore this error and let it execute smoothly.

Now we have successfully adjusted the machine to automatically reply to the last user. The red error on the console does not affect our automatic reply. Of course, I won’t waste time and continue to write it down. I know that all the students understand, just add some other processing. That is, for example, you can watch the robot talking to yourself by adding a timer, and you can just reply to other users without replying to yourself by adding id to judge, and you can diverge your thoughts to achieve.

In some gray industries, this kind of technology is popular, such as Weibo likes, hot search and control reviews, Taobao coupons in bulk, merchandise spikes, etc., everything can be done by various robot navy forces, of course these are general They will not be implemented on the client side, they will be moved to the server, and there will be a background dedicated to processing...

Having said so much, let's just use it purely in the technical field. After all, I am not interested in other fields. I saw some people’s nuggets, Github, blogs, etc. fans on some technical resumes, levels, submissions and readings. Many, here is also possible to do tricks, here is only for technology, I don't need Nuggets as examples, use Github as examples, such as Github, our submission volume can actually be arbitrarily changed time period, range and quantity.

For example, this kind of classic submission record looks very interesting. Some developers slowly use real submissions, but they can be easily artificial. In fact, the idea is very simple to implement. Let's pass it directly to the front-end technology. Similar to the code above.

First of all, each commit is actually like sending comments on the live broadcast just now. Since it was a pure client-side front-end technology implementation just now, let's change our taste and implement it with pure server-side front-end technology, and expand our thinking.

We generally submit code in the Github warehouse using this command method, which is also the method provided by the Github official website:

git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/wscats/test.git
git push -u origin main

This submission method will be based on the current local time, so if you don’t want to change any code, you can simply and rudely change the system time, and then execute the above command. This method is suitable for novices, missed submissions, and want to make up some submissions To draw the corresponding pattern:

But as a developer with a certain front-end technology, I definitely don't want to use this method. It is too inefficient. You have to operate the visual interface once every time. How can this be tolerated.

Then we can use node to achieve the following. In order to execute git commands in batches on the server side, we can use the interface of child_process. Students who are familiar with shell scripts can actually use the shell directly. We use the exec method, he can use The child process executes the command, caches the output of the child process, and returns the output of the child process in the form of callback function parameters.

const exec = require('child_process').exec;
module.exports = (cmd) => {
  return new Promise((resolve, reject) => {
    exec(cmd, function (error, stdout, stderr) {
      if (error) {
        console.log(error);
        reject(stderr);
      } else {
        resolve(stdout);
      }
    });
  });
};

Let's expose an interface for writing code. We can create a new message.txt file to record each code snippet. The simplest and rude is to directly generate a random number or date and write it in. Each write represents each one. commit, you can later improve it to cut a complete code into regular code blocks according to the AST syntax tree, etc., and then attach the actual submission record to perform each code submission.

const fs = require('fs');
module.exports = (message) => {
  return new Promise((resolve, reject) => {
    fs.appendFile('message.txt', `${message}\n`, (err) => {
      err ? reject() : resolve();
    });
  });
};

The last is the core code, the most important thing here is actually git commit -m "${commitTime}" --no-edit --date="${commitTime}" This paragraph, the --date parameter can be changed To other times (I remember correctly, the earliest is generally from January 1st in 1970 to January 19th in 2038). The specific reason is that this is the range of the timestamp. I have not tried this before and after Time is up, interested students can try it by themselves.

const cmd = require('./cmd');
const file = require('./file');
let day = 10;
const random = (lower, upper) => {
  return Math.floor(Math.random() * (upper - lower + 1)) + lower;
};
const commit = async () => {
  const today = new Date();
  today.setTime(
    today.getTime() - 0 * 24 * 60 * 60 * 1000 - day * 24 * 60 * 60 * 1000
  );
  let commitTime = `${today.getFullYear()}.${
    today.getMonth() + 1
  }.${today.getDate()}`;
  if (today.getFullYear() > 2019) {
    return;
  }
  let commitNumber = random(1, 10);
  let dayNumber = random(1, 3);
  while (commitNumber) {
    await file(commitTime);
    await cmd('git status');
    await cmd('git add .');
    await cmd(`git commit -m "${commitTime}" --no-edit --date="${commitTime}"`);
    commitNumber--;
  }
  if (day >= 10) {
    day -= dayNumber;
    commit();
  } else {
    // await cmd('git push origin master');
  }
};
commit();

After the above code is successfully executed, it will be automatically submitted, and then help you fill the schedule of Contributions, which is far more efficient than your manual change panel.

For the sake of viewing, you can use a random function to create the daily commit amount, or you can randomly create the next day's submission operation, of course, you can also randomly submit the commit information, such as the above mentioned Turing robot to achieve submission Talk to yourself about the information. Of course, I sacrificed myself. Let’s use my own Github as a guinea pig. You will entertain carefully. If you only learn to fill the grid in the end, it will be embarrassing if you don’t delete the grid. Delete these grids. In fact, you can understand by adding more Git knowledge, so I won't expand on it. Let's put the effect after implementation. You can go to my Github for details.

• 👨‍🚒 https://github.com/Wscats

So the code implementation here can tell us that many times when you look at technical articles, don’t just look at the surface quantitative data. For example, some readings, likes and submissions are part of our reference, and more depends on the content presented by the author. the quality of.

I searched Github, and there are still many such operations. There are a lot of open source code implementations. Everyone can refer to it. As a programmer, you can use it for entertainment everyday, remember not to fool people.

The above example will stop here. It has a wide range of applications, such as rankings on various rankings. You must carefully look at many rankings. It may be difficult for ordinary users to find that this technology is used. There is still a lot of time, so I’ll just continue. Let’s do the experiment with the technical community. We use the Microsoft VSCode plug-in leaderboard to do the experiment. I originally wanted to experiment with Weibo or Nuggets, but think about it. There may be consequences. To talk about martial arts, we still use the technical community to be pure and not too utilitarian.

Here are all plug-ins that provide convenience for our developers. This kind of list is essentially a popular list, which has certain reference significance, but we have to analyze it more rationally, because entering the list may be behind the minute "Technology" is pushing.

Let’s try the front-end technology on both the client and server this time. Is it feasible? We try to help us increase the download volume of a plug-in. We found that the web page actually has a download button, so the technology introduced above is enough Realized, the idea is very simple.

Find the node code behind the button, and then click to download according to the frequency trigger. This download completely simulates the basic operation of the person on the client, then the download will successfully send the request and be completely recorded in the background, and then the update is presented to the download. Measure inside.

setInterval(() => {
  document.querySelector('[aria-label="Download Extension"]').click();
}, 6000);

Of course, this method is simple and rude to achieve the goal quickly, but is there any faster and more effective than this method? The answer is definitely there, and there are many, many solutions, please refer to this plugin for details.

setInterval(() => {
  i++;
  (function (i) {
    https
      .get(
        'https://wscats.gallery.vsassets.io/_apis/public/gallery/publisher/Wscats/extension/ms-python.python/0.0.3/assetbyname/Microsoft.VisualStudio.Services.VSIXPackage?redirect=true&install=true',
        {
          headers: {
            accept: '*/*',
            'accept-encoding': 'gzip, deflate, br',
            'accept-language': 'zh-CN',
            cookie: 'EnableExternalSearchForVSCode=true',
            'user-agent': 'VSCode 1.39.2',
            'x-market-client-id': 'VSCode 1.39.2',
            'x-market-user-id': 'f2500034-c981-4f54-bcdb-45bbf63994b3',
          },
        },
        function (res) {
          console.log(i);
        }
      )
      .on('error', function (e) {
        console.error('u51FAu73B0u9519u8BEF: ' + e.message);
      });
  })(i);
}, 6000);

It can be very flexible here. You can use front-end technology to dynamically execute the download, or hijack the download request to send it cyclically to achieve the effect of deceiving the server. That is, we can forge the header and body of the request on the node side, and then send it server.

Slight changes to this scheme may be used for brute force cracking (wifi, server password), man-in-the-middle attacks, etc.

In the online world, there are actually such people running these scripts every day to scan for vulnerabilities, and then forge requests to achieve their goals. My server is often patronized by these people, which is uncomfortable.

Of course, in addition to node, there are many tools that can achieve this ability. We will not list them here. We will only analyze the front-end scope.

So why do we sometimes need so many verifications to log in and register? Isn't it because the developers protect us from resisting the evil forces? For some lists, such as hot searches and hot reviews, we can use them as a reference, and we should not be overly superstitious.

By the way, regardless of the mobile phone or the computer, there are actually many ways to monitor the system for applications and plug-ins. Just like the plug-ins above, try to make useful and stable code sources more secure, because they can actually easily operate the system locally. For example, use simple codes to monitor your keyboard input, easily read and write your local files, and so on. These codes are sometimes even simple, it can be very far away from us, or very close to us.

Just like the following simple code, it will be a terrible code in inappropriate scenarios. With some means, it can enter your system quietly, and then record the bits and pieces you input, including the entered password, input habits, Grammatical habits, the distribution of function words and content words, common words and language organization ability, etc., with some hidden reports, can accurately analyze your users. As long as the users input enough, it will understand you better, because everyone It grows in a unique environment and era. This environment has a profound impact on user language. For example, Cao Xueqing and Gao E, the two authors of The Dream of Red Mansions, are no longer there, but the precious literature left is enough through data analysis. Prove that this book has a different style before and after.

const inputs = document.querySelectorAll('input');
[].forEach.call(inputs, (input) => {
  input.addEventListener('input', (e) => {
    console.log(e.target);
  });
});

These malicious codes may be implanted into your computer along with plug-ins, etc., in various ways, such as shelling, "color" website guidance, magic-modified copycat systems or browsers, etc...

Technology is a double-edged sword. The essence should be good. When I was a child, I recite the Three-character Sutra. The most impressive sentence is that human nature is good at the beginning. I also think that at the beginning of technology, the essence is also good. In other words In other words, the original intention of technology is to bring value to users, not to lose.

I am very happy to untiringly dig and explore the value and fun of technology. Recently I like to write simple scripts in WeChat to automatically reply to friends and family. It is possible that a good morning and a good night are warm when I work outside.

Remind the elderly to eat and sleep regularly, and send a happy birthday to a friend on time. The other party is still very happy. These are some of the key codes in it. Of course, you can give it more functions.

setInterval(function () {
  $('.edit_area').html('Text to be sent on WeChat');
  $('.edit_area').trigger($.Event('keydown', { keyCode: 13, ctrlKey: true }));
  $('.btn_send').click();
}, 3000);

Of course, as a programmer, you also have to pursue life. The lives of workers are similar. Take the time to see the beautiful world, help me brush coupons haha, let the browser do things for me automatically, programmer’s The world may be destined to be so ordinary 😁

let y = 0;
let num = 0;
let imgArr = [];
setInterval(() => {
	let imgs = document.querySelectorAll("img");
	let length = imgs.length;
	if (num !== length) {
		num = length;
		imgArr = imgs;
		console.log(length, imgArr);
	}
	y = y + 1;
	scrollTo(0, y);
}, 1);

I hope I can have more time to contribute more interesting code in the future. It is not easy to open source, and I will do it and cherish it.

Last

All of the above codes are actually very simple in nature. They are simply shared and exchanged for your entertainment. Please forgive me if there are any shortcomings.

In fact, there are many thresholds waiting for us to solve in many scenarios, such as verification code identification, user behavior and call chain analysis, Trojan horse implantation, etc. If we have the opportunity to find time to write in the future, as developers, we should also have Responsibilities and awareness, check and remind users at every entrance of user operations.

Of course, the fun of technology lies in exploring, not doing evil. Finally, I attach my beloved little piano to have fun with you 🎹 https://github.com/Wscats/piano

Past articles can be moved here: 🔖 https://github.com/Wscats/articles

Your support (Star and Fork) is the biggest motivation for me to move forward~

Thanks for the company of music and programming! I also pay tribute to all the coders who struggled in 996/007, music has never failed anyone, as Leehom Wang sings:

If the world is too dangerous, only music is the safest, take me into my dream and let the lyrics come true! -- "our song"