Some say the front-end limits are in the browser.

No matter how many bugs you fire, the most you can do is crash the browser and have no impact on the system. It’s like the various cool worlds of destruction in the second dimension, which will not lead to the end of the third dimension. However, as a front-end, I found that there are ways to open dimensional doors…

The experiment was imaginative and boring, but in a sense it reflected some safety concerns. Imagine one day you’re at home surfing the Internet, eating hot pot and singing, clicking on a link, and suddenly the screen goes blue! It’s a little exciting to think about it.

The cause of

The story starts with localStorage.

Html5 local storage, I believe we are not unfamiliar. Storing data locally as binary files is very popular nowadays. For Chrome on Windows, localStorage is stored in C:\Users\ XXX \AppData\Local\Google\ chrome \User Data\Default\Local Storage. But if a web page is left to write files indefinitely, the damage to the user’s hard drive can be imagined, so the browser has made a size limit.

For a domain name + port, the maximum value ranges from 5M to 10M on a PC, and is less than 2.5M on a mobile device.

The question then becomes: Is this restriction enough to protect the user’s hard drive?

The key

The key problem is that this restriction applies to a domain + port. That is, when you access different ports of the same domain name, their localStorage is not associated, but stored separately.

I simply started the server with Node, and the user accessing the 100 ports from http://127.0.0.1:1000 to http://127.0.0.1:1099 will be sent to the same page: index.html:

var http = require('http'); var fs = require('fs'); For (var port = 1000; port< 1100; Port++){http.createserver (function (request, response) { Fs.readfile ('./index.html', function(err, content){if(err) {} else {response.writehead (200, {' content-type ': 'text/html; charset=UTF-8' }); response.write(content); response.end(); }}); }), listen (port, '127.0.0.1); }Copy the code

Of course, localStorage writes are involved in the index. HTML.

var s = ""; // Take your time. Don't write too big. for(var i=0; i< 3 * 1024 * 1024; i++){ s += "0"; } localStorage.setItem("testData", s);Copy the code

I tried using the browser to access several ports separately and ended up storing them separately. It’s just like the script.

Automatic traverse

But that’s not enough. If you want to experiment and play (e) a little better, the question becomes how do you get the user to automatically traverse these ports?

Iframe is a good try. As soon as http://127.0.0.1: 1000 is opened, the footsteps of the page create an iframe to request http://127.0.0.1: 1001, and so on.

var Main = (function(){ var _key = "testData"; var _max = 1100; Return {init: function(){// take your time. var s = ""; for(var i=0; i< 3 * 1024 * 1024; i++){ s += "0"; } localStorage.setItem(_key, s); var port = parseInt(location.port)+1; if(port > _max) return; Iframe var url = "http://127.0.0.1:" + port; var $iframe = document.createElement("iframe"); $iframe.src = url; document.getElementsByTagName("body")[0].appendChild($iframe); }}}) ();Copy the code

Of course, we can also set the iframe to invisible to hide this kind of dishonest behavior… Let’s say someone sends you a link, and when you open it, it’s a video, and you don’t even notice the script behind it, and within a few minutes of the video playing, your C-drive is about to fill up.

And then I saw the requests flood in:

However, when requested to port 1081, the latest Chrome crashes… It turns out that there are so many nested iframes that browsers have reached their limits.

### prevent browser crashes

C is not full, comrades still need to work hard. How to do?

And it occurred to me that we could redirect before we reached the iframe limit. Use window.location.href for every 50 ports visited to ensure that the browser does not crash.

var Main = (function(){ var _key = "testData"; var _max = 1200; Var _jumpSpace = 50; Return {init: function(){// take your time, don't write too big. var s = ""; for(var i=0; i< 3 * 1024 * 1024; i++){ s += "0"; } localStorage.setItem(_key, s); var port = parseInt(location.port)+1; if(port > _max) return; If (port % _jumpSpace == 0){// Window.location. href = url; Var $iframe = document.createElement("iframe"); $iframe.src = url; document.getElementsByTagName("body")[0].appendChild($iframe); }}}}) ();Copy the code

As it turns out, this kind of effort does work.

At this point, just visithttp://127.0.0.1: 1000, the Local Storage folder will be written to the Local Storage folder nearly 500 MB of unnecessary data:

Here’s the data:

Continue to experiment with dark technology

I’ve got room on drive C, so I’m going to increase the number of ports from 100 to 200.

And here’s what happened, up to 1.17 gigabytes.

In the subsequent experiments, I gradually increased the number of ports and the data stored.

Computers are also running slower and slower. Why is that?

I have observed that sometimes the data files are not immediately visible in the folder after localstorage.setitem () is executed. It is suspected that the data will be stored in memory by Chrome to avoid the consumption of repeated reads and writes, and then written to hard disk when idle or closed.

But at this point, the browser has already affected the system. It is in a state that “won’t crash,” but “has interfered with the normal use of the user’s computer because it takes up a lot of memory.” Even if the user closes the browser window, it won’t be quickly restored. Be aware that read and write tasks do not end with window closure, or the browser will lose data.

There’s only so much people can do about it:

  1. Waiting for;
  2. Close the Chrome process in Task Manager and wait.
  3. Believe and try the scientific claim that restarting your computer solves 90% of your problems

It could be said that the browser is almost broken at heart.

The last

Finally, or use a serious face warning: harm the heart can not have. The experiment, from the start, was done with the intention of leaving security to the state (yes, pure and simple).

And then, seeing that I still had 2 gigabytes of space on drive C, I increased it to 2000 ports to see what would happen. Due to the overload of requests, it took a certain amount of time, so I moved on to something else. I came back to find the room quiet and beautiful, blue light, like special effects.

So the question is, which computer repair? A bit nasty…