Shulou(Shulou.com)06/01 Report--

Today, I will talk to you about the example analysis of cracking the Chrome little dinosaur game. 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.

On a sunny weekend, the transparent curtains woke me up from my sleep. My brain said it was Saturday and I could spend a lazy morning, so I happily opened my Mac to watch two episodes of Rick and Morty and then got up to wash up.

I couldn't wait to open the corresponding website and found that the browser prompted No internet. Only then did I realize that my computer had not yet had time to connect to wifi because my actions were too fluent.

Fine, just wait for wifi to reconnect himself, just to savor this little dinosaur game brought by Chrome.

Popular science: Chrome browser is the official browser of Google home, using and experiencing Nanbowan all over the world. When a user visits a URL when there is no network, the browser will prompt "no web link" (that is, the picture above), and press the spacebar to wake up a little dinosaur running game.

If you want to play when you have a network connection, you can type: chrome://dino directly in the address bar.

Out of the sensitivity and curiosity of the profession itself, I suddenly wondered: this should be done with JS, right?

Why don't I take a look at all the global variables first when I open the console?

239. It's too much. I don't have the patience.

I stopped the operation and began to think about the feasibility of all this:

What am I doing? Why do you look at global variables when trying to customize the game? Because suppose the object about the game is exposed in the global situation, if not in the global situation? OK, then I'll give up (I don't want to pick the source code in sources on weekend mornings)

That is, if I don't find that object in the global variable, I can optionally give up.

Looking at the picture above, it is not difficult to find that many of these 239 global variables are old friends, name, history, location, onclick, onerror.... These variables obviously have nothing to do with this little dinosaur, printed out purely to fill the number, but also wasted my time to find a target, so I encountered the first problem: how to quickly find global variables defined by developers?

If I had a normal window... No, no, no. I got this result:

In other words, Google's front-end engineers injected 43 global variables into window in the dinosaur's sprint Mini Game.

How to get these 196 native global variables over here? Copy and paste is too low, let me see.

Make a new window on the basis of the original window. This is iframe! Iframe does not have window, but it does have contentWindow, and in principle, attributes should not differ much. So now you just need to create an iframe, use the global variables of contentWindow in it to filter the global variables of the current window, and you can filter out the extra 43 suspects.

So I typed the following code on the console

Return to the car!

Hey, how come it's 45? There are 2 more than expected. Is there any variables in window that are not in contentWindow? So I took the same code and executed it under the window where url was about:blank, and found the culprit:

Oh... It turns out that I did a good job for the React developer tool I installed for Chrome. ignore!

I opened the 45 (432) extra global variables I had previously retrieved, took a quick glance, and quickly found a very suspicious player:

Runner, isn't that the little dinosaur who has been running?

See what it is, brainless typeof:

Emmm is a function, huh? Function, the first letter is also capitalized, this familiar taste, this is not a constructor! As the saying goes, the treasure of constructors is in prototype. After looking at this treasure, I found a method called gameOver.

The name of this function, is it the way to let the little dinosaur die? In that case, ah, I covered it with an empty function with my backhand. So...

It really is.

And then I found another interesting way:

As the name implies, this is a way to set the running speed of a small dinosaur, but how to use it? The instance object created by the constructor can access the variables and methods on the constructor prototype through the prototype chain, that is, if the corresponding instance of the little dinosaur can be found, then the setSpeed method can be called directly. Now that the front-end engineer of Google has put so many variables globally, then. Will this little dinosaur instance be stored globally as well? I re-examined the 43 more global variables and couldn't find them. I subconsciously typed in this Runner constructor, and it looked as if there was no road to turn but there was another village:

I don't even need to look at the whole code of the Runner function to know that the original instance is saved in a Runner property called instance_. On the importance of a good variable name, OK, then I'm welcome, just call it!

So...

When I stared at the galloping little dinosaur, I suddenly felt. Everything has become.

After reading the above, do you have any further understanding of the example analysis of cracking the Chrome Little Dinosaur game? 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.