Lab: Abusing `.bind` Method to Avoid Inspection of JavaScript Functions

Hello!

You all know we can see a function’s implementation with Web Inspector:

function STCustom() {
    // Hello, I'm the implementation!
}

The inspector says what is the implementation:

I realised that if I bind STCustom function anything else, the implementation will not be visible.

Let’s wrap it and bind to undefined.

var STCustom = function () {
    // Hello, I'm the implementation!
}.bind();

Now, let’s see it’s implementation:

It’s not visible. But it’s not useful for now. Let’s abuse it more. :)

var STCustom = (function () {
  function STCustom() {
    // Hello I'm the implementation!
  }
  STCustom.prototype.setColumnSize = function(number) {
    // do some calculations
  };
  STCustom.prototype.setRowSize = function(number) {
    // do more calculations
  };
  return STCustom;
})();

It’s a simple JavaScript class with methods. Before try to hide them let’s check the STCustom variable.

OK, It’s still visible. Let’s .bind it to nothing again:

var STCustom = (function () {
  function STCustom() {
    // Hello I'm the implementation!
  }
  STCustom.prototype.setColumnSize = function(number) {
    // do some calculations
  };
  STCustom.prototype.setRowSize = function(number) {
    // do more calculations
  };
  return STCustom.bind();
})();

Now, it’s hidden again. What about the methods?

These are visible. So we should hide them too, abusing “bind”:

var STCustom = (function () {
  function STCustom() {
    // Hello I'm the implementation!
     for (var method in this)
      if (this.hasOwnProperty(method) && this[method].bind)
        this[method] = this[method].bind(this);
  }
  STCustom.prototype.setColumnSize = function(number) {
    // do some calculations
  };
  STCustom.prototype.setRowSize = function(number) {
    // do more calculations
  };
  return STCustom.bind();
})();

We bound all the methods to the object itself. So it couldn’t be inspected.

Deep-Freezed Classes

We also freezed that class, you cannot extend it anymore:

As you see, we are not able to access prototype of the class.

Why is that?

It’s because .bind method’s implementation. It returns a bounded native function, so you see the native one all the time, not your implementation. It’s like proxying the function over browser.

It’s not for production use, just a small trick that I realised.

Thanks! :)

Sorry for my English mistakes.