What should one pursue in life? Everyone should pursue happiness. I don’t really disagree with that. In fact, there is a difference between quality and quantity of happiness. Reading pornography is not happy, reading Cross talk by Guo Degang is not happy, and reading Shakespeare is not happy. It seems to be quite happy, right? If all three of these works bring you the same happiness, which do you think makes you happier? If the library could only keep one book for your children and grandchildren, which one would you keep? —- Mr. Luo Xiang: What should a person pursue in this life?

The theme

Listen to the above quotation, everyone what idea. The idea is that I’m going to start a new chapter, where I’m going to reveal some of the libraries and frameworks that have been wrapped up so many times that people are scratching their heads with minimal front-end code.

Today I will introduce sandbox technology. What is sandbox? Google:

In short, we can execute any code uploaded by users without affecting our own environment. The key is security. We can not let users inject some unsafe content into our pages.

How to execute dynamic scripts safely?

We all know that eval has a great name in JS, which reminds me of evil, so we don’t usually use it in our code.

eval('1 + 2')
Copy the code

This is dangerous, however, because eval is a property function of a global object, and the code that executes it has the same permissions as any other normal code in the application. So it can access the Window object and directly modify the global object. Very dangerous!

Let’s look at Function:

const sum = new Function('m'.'n'.'return m + n')
console.log(sum(1.2))
Copy the code

This can also be executed successfully, so that the created function can also access the local and global variables, but still not safe.

So what do we do?

This is where the syntax with comes in.

with (expression) {
    statement
}
Copy the code

This is equivalent to specifying the scope chain for the function to be executed

With all this knowledge we can put it all together to create a simple sandbox environment, but of course there is one important role missing here. Do you know what it is? Don’t know just look at my code below.


function evaluate(code, sandbox) {
  sandbox = sandbox || Object.create(null)
  const fn = new Function('sandbox'.`with(sandbox){return ${code}} `)
  const proxy = new Proxy(sandbox, {
    has(target, key) {
      return true}})return fn(proxy)
}
Copy the code

If the variable is not found, it will bubble up to the Proxy’s has trap. In this case, the policy is to return true for all undefined variables to prevent escaping. Here are the test cases:

evaluate('1 + 2') / / 3
evaluate('console.log(1)') // Uncaught TypeError: Cannot read property 'log' of undefined
Copy the code

Click here to see stackBlitz online Demo

Now, as you can see, if you want to modify a global variable, it’s not so easy to escape. How, this sandbox environment minimization code is not very simple, but requires a variety of JS knowledge reserves and flexible use. Have you paid your tuition?

There is also a vm package for sandboxing in Node.js, but it is not officially recommended to use it as a sandbox. If you are interested in more HXD, I will write an in-depth article about the sandbox in Node.js.

That’s it for today, like if you like it, and we’ll continue this series next time.