5 ms·

Black Box Driven Development in JavaScript

37 points by rnyman 12y ago

couchand 12y ago
Ouch! All those HTML entities in the code samples make this article difficult to read.
- rnyman 12y ago
  That was my bad. I've fixed them and the article should look all ok now.
  - bluesnowmonkey 12y ago
    $(document).ready(application.init()); I think you meant to say: $(document).ready(application.init);
Kiro 12y ago
"Use composition over inheritance" doesn't make a strong case. Can someone explain this more in depth?
- lobo_tuerto 12y ago
  Here you can read about this principle: http://en.wikipedia.org/wiki/Composition_over_inheritance http://en.wikipedia.org/wiki/Composition_over_inheritance The take away part in the article is this: "... so there is no way to produce collisions."
btipling 12y ago
I know this is just demonstrating an example, but the example includes a dangerous XSS vulnerability: for(var i=0; i<products.length; i++) { content += products[i].name + '<br />'; } $('.content').html(content); Use a template library, do not concatenate strings and then just set HTML. Most template libraries will have safeguards in place to prevent XSS vulnerabilities. Even if the product name is always trusted to be non-malicious, it's still a dangerous anti-pattern. XSS will eat your lunch. It breaks every safeguard there is, it even defeats 2 factor auth and lets the attacker adopt the identity and privileges of whoever has been exposed to the attack. It's prudent to be extra careful and never have code that looks like this.
- krasimir-tsonev 12y ago
  I totally agree with you. I'm making a serious note about my future articles/projects.
- Someone1234 12y ago
  If you had included just one more line of code it would have shown that this isn't a XSS issue at all: var products = window.localStorage.getItem('products') || [], content = ''; If an attacker can set a localStorage value then they can already run JS making this entire attack vector completely superfluous. In order for your claimed attack to work someone has to have already conducted a XSS. It is like talking about the risks of XSS within locally set cookies. It might technically be true but how do you set the cookie in order to later run the JS taken back out of it? Same issue here. How do you set the localstorage to give you back the JS to commit XSS, more XSS?
  - benmmurphy 12y ago
    This is going to be very app specific but 'products' might be a list of products in a shopping cart and the products can be submitted to the store by third parties with arbitrary names. Then all an attacker has to do is to trick you into adding his evil product to your cart. Alternatively, products might be some kind of client side cache of products from the server and the attacker might not even have to trick you into adding something to your cart. Of course it could be possible that the 'name' value is HTML and not TEXT and has already been pre-escaped. :) Regardless of whether this is exploitable XSS or not this is probably a correctness issue. Stuff shouldn't start breaking when people start inputting '<' somewhere.
  - btipling 12y ago
    It's best to just not concatenate strings and then dump them into HTML. You can't know it's not an XSS issue unless you know how this ended up in localStorage to begin with. It could be untrusted user content that came from the server. But even if you do know where it came from, just don't do it. It's a bad habit and the day it burns you it might sting.
protonfish 12y ago
Assigning a variable as a pointer to an anonymous function: var Box = function(a, b) {}; as opposed to the simpler: function Box(a, b) {} makes no sense. It is more verbose for zero benefit and makes all functions anonymous so you will never see that it is the Box function being called in your debuggers and profilers. If you want to enforce functions being declared before they are called, use JSLint (which you should be doing anyway.)
- dkyc 12y ago
  A lot of people use notation #1 to do namespacing by using objects, eg var MyProject = {}; MyProject.func = function() {} If you ever want to assign a function to an object, you might as well do it with global-scope functions. Most debuggers/profilers I am aware of can handle this notation well. If they don't, there is still the possibility of doing var Box = function Box (a, b) {} The function does not have to be anonymous!
  - ShellfishMeme 12y ago
    +1 for the named function expression. I really don't like pure function statements because of hoisting. You often end up seeing functions being used before they're defined which can lead to confusing bugs and hurts readability. I also like that `var Box = function Box (a, b) {}` directly shows people who are new to JS that function declarations are nothing else than just assigning a function to a variable.
- nawitus 12y ago
  I prefer: var Box = (a, b) => {}; I guess I just think that the more verbose form is more readable.
- krasimir-tsonev 12y ago
  I feel that "var Box = function(a, b) {};" is more readable (or at least for me)
davedx 12y ago
Isn't this just unit testing? Each module should have public methods exposed that can be tested as a black box, i.e. their inputs and outputs...
- krasimir-tsonev 12y ago
  That's right. The thing that I call "black box driven development" helps a lot if you want to do unit testing.
aikah 12y ago
Why use that horrible expression when there is already a word for that,which by the way is one of the pillars of OOP : ENCAPSULATION . You bring the word twice in your article ,so no need for that "BBDD" expression.
- krasimir-tsonev 12y ago
  Yep, BBDD is just a buzzword and I agree with you. ENCAPSULATION is a term that fits in the concept as well, but it is a little bit general for me.
swah 12y ago
There is similar content in http://addyosmani.com/resources/essentialjsdesignpatterns/book/ http://addyosmani.com/resources/essentialjsdesignpatterns/bo... It would be great if you mentioned what works with browserify, webpack, gulp etc.. I'm not sure what percentage of front-end developers still just link a bunch on JS files in the HTML.
- krasimir-tsonev 12y ago
  Hi, I referenced http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript http://addyosmani.com/resources/essentialjsdesignpatterns/bo... The revealing pattern is the backbone of the article.

37 points by rnyman 12y ago

couchand 12y ago

Ouch! All those HTML entities in the code samples make this article difficult to read.

rnyman 12y ago
That was my bad. I've fixed them and the article should look all ok now.
- bluesnowmonkey 12y ago
  $(document).ready(application.init()); I think you meant to say: $(document).ready(application.init);

Kiro 12y ago

"Use composition over inheritance" doesn't make a strong case. Can someone explain this more in depth?

lobo_tuerto 12y ago
Here you can read about this principle: http://en.wikipedia.org/wiki/Composition_over_inheritance http://en.wikipedia.org/wiki/Composition_over_inheritance The take away part in the article is this: "... so there is no way to produce collisions."

btipling 12y ago

I know this is just demonstrating an example, but the example includes a dangerous XSS vulnerability: for(var i=0; i<products.length; i++) { content += products[i].name + '<br />'; } $('.content').html(content); Use a template library, do not concatenate strings and then just set HTML. Most template libraries will have safeguards in place to prevent XSS vulnerabilities. Even if the product name is always trusted to be non-malicious, it's still a dangerous anti-pattern. XSS will eat your lunch. It breaks every safeguard there is, it even defeats 2 factor auth and lets the attacker adopt the identity and privileges of whoever has been exposed to the attack. It's prudent to be extra careful and never have code that looks like this.

krasimir-tsonev 12y ago
I totally agree with you. I'm making a serious note about my future articles/projects.
Someone1234 12y ago
If you had included just one more line of code it would have shown that this isn't a XSS issue at all: var products = window.localStorage.getItem('products') || [], content = ''; If an attacker can set a localStorage value then they can already run JS making this entire attack vector completely superfluous. In order for your claimed attack to work someone has to have already conducted a XSS. It is like talking about the risks of XSS within locally set cookies. It might technically be true but how do you set the cookie in order to later run the JS taken back out of it? Same issue here. How do you set the localstorage to give you back the JS to commit XSS, more XSS?
- benmmurphy 12y ago
  This is going to be very app specific but 'products' might be a list of products in a shopping cart and the products can be submitted to the store by third parties with arbitrary names. Then all an attacker has to do is to trick you into adding his evil product to your cart. Alternatively, products might be some kind of client side cache of products from the server and the attacker might not even have to trick you into adding something to your cart. Of course it could be possible that the 'name' value is HTML and not TEXT and has already been pre-escaped. :) Regardless of whether this is exploitable XSS or not this is probably a correctness issue. Stuff shouldn't start breaking when people start inputting '<' somewhere.
- btipling 12y ago
  It's best to just not concatenate strings and then dump them into HTML. You can't know it's not an XSS issue unless you know how this ended up in localStorage to begin with. It could be untrusted user content that came from the server. But even if you do know where it came from, just don't do it. It's a bad habit and the day it burns you it might sting.

protonfish 12y ago

Assigning a variable as a pointer to an anonymous function: var Box = function(a, b) {}; as opposed to the simpler: function Box(a, b) {} makes no sense. It is more verbose for zero benefit and makes all functions anonymous so you will never see that it is the Box function being called in your debuggers and profilers. If you want to enforce functions being declared before they are called, use JSLint (which you should be doing anyway.)

dkyc 12y ago
A lot of people use notation #1 to do namespacing by using objects, eg var MyProject = {}; MyProject.func = function() {} If you ever want to assign a function to an object, you might as well do it with global-scope functions. Most debuggers/profilers I am aware of can handle this notation well. If they don't, there is still the possibility of doing var Box = function Box (a, b) {} The function does not have to be anonymous!
- ShellfishMeme 12y ago
  +1 for the named function expression. I really don't like pure function statements because of hoisting. You often end up seeing functions being used before they're defined which can lead to confusing bugs and hurts readability. I also like that `var Box = function Box (a, b) {}` directly shows people who are new to JS that function declarations are nothing else than just assigning a function to a variable.
nawitus 12y ago
I prefer: var Box = (a, b) => {}; I guess I just think that the more verbose form is more readable.
krasimir-tsonev 12y ago
I feel that "var Box = function(a, b) {};" is more readable (or at least for me)

davedx 12y ago

Isn't this just unit testing? Each module should have public methods exposed that can be tested as a black box, i.e. their inputs and outputs...

krasimir-tsonev 12y ago
That's right. The thing that I call "black box driven development" helps a lot if you want to do unit testing.

aikah 12y ago

Why use that horrible expression when there is already a word for that,which by the way is one of the pillars of OOP : ENCAPSULATION . You bring the word twice in your article ,so no need for that "BBDD" expression.

krasimir-tsonev 12y ago
Yep, BBDD is just a buzzword and I agree with you. ENCAPSULATION is a term that fits in the concept as well, but it is a little bit general for me.

swah 12y ago

There is similar content in http://addyosmani.com/resources/essentialjsdesignpatterns/book/ http://addyosmani.com/resources/essentialjsdesignpatterns/bo... It would be great if you mentioned what works with browserify, webpack, gulp etc.. I'm not sure what percentage of front-end developers still just link a bunch on JS files in the HTML.

krasimir-tsonev 12y ago
Hi, I referenced http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript http://addyosmani.com/resources/essentialjsdesignpatterns/bo... The revealing pattern is the backbone of the article.