As you have seen and read, it has been a diversity in the topics of this calendar, and this is also why the field of security is as complex as it is.

Now that we have introduced you to a lot of different topics and attacks, you might want to test some of this knowledge. As you might remember from the post Tia wrote about OWASP ZAP, it is illegal to attack other web applications without permission. That is why we proposed for you to start with OWASP Juice Shop.

Hack Yourself First

After you are finished with OWASP Juice Shop, you should go and try the attacks on your own code. If you try to look at your code as an attacker, you start to see weaknesses you missed as a developer.

Remember, it is much cheaper to find the vulnerabilities yourself, than reading about them on the front page of a newspaper.

Bug Bounties

If you want more challenges during the Christmas celebrations, it has become very easy to get the permission to hack other web applications. Companies have realized that they will get attacked at some point, and it is better to have hackers work for them, instead of against them. Many companies are actually paying for the bugs you find, which is a nice carrot (or candy cane) to motivate you.

Two of the largest sites where you find companies to attack are Bugcrowd and HackerOne. Both of these have a variety of different companies. It is a difficult challenge to find bugs, but it is fun to attack large companies like Spotify and Nintendo.

security.txt

Some companies handle the bug bounties themselves, or does not allow you to attack them at all, but they still want you to report bugs if you happen to find them. A new standard called security.txt is getting some traction. It is located in the .well-known directory of sites. Like the robots.txt describes what search engines are allowed to do on the site, security.txt can describe what security researchers are allowed to do and how to report bugs. As an example you can look at the security.txt at Google here https://www.google.com/.well-known/security.txt.

We also have a security.txt, at https://security.christmas/.well-known/security.txt. It is very slim, but it gives an email you can contact directly about security concerns. This is very nice to have in a large company, where real security concerns could get lost in large customer service department.

Hopefully you have learned a lot throughout this calendar, and we hope you have a good and secure Christmas celebration.

Secure and Merry Christmas

From all of us behind javascript.christmas, to all of you: Merry Christmas!

We really hope you've enjoyed our advent calendar. Please let us know on Twitter (#dotchristmas) if you did!

For our very last article in this advent calendar, we've made you a JavaScript-themed puzzle for when you're in need of a break from your beloved family members.

Head on over to Google Spreadsheets to make your own copy and start punching in those JavaScript keywords.

Have fun, and thanks for following along ❤️

See you next year!

JavaScript Keyword Puzzle

Hooks change everything, let's explore some fun patterns!

React recently released a preview of a new feature called Hooks. Up until now, function based components were only for show, you weren't able to add super advanced features with them alone. Then along came hooks...

Hooks are a feature where functional React components can be augmented in a way with special hook functions, in cooperation with the ReactDOM reconciler, that allows you to do things like add "lifecycle methods" and state. But Hooks aren't just adding state to functional components, they introduce new patterns, and even new ways of thinking about architecting our React applications!

Hooks Intro 📓

There are plenty of built in hooks to get started with, but for the purposes of being terse, I'm going to run through 3 of them. First up is useEffect:

It's been described in the open as a replacement for componentDidMount, componentDidUpdate and componentWillUnmount, but I don't think it's a direct analogy. To really get hooky with it, I like to think of useEffect as its own thing where you can do side effects in response to something changing, and have the opportunity to clean up anything you've done when it's time. Lets take a look:

The beauty here is that useEffect also takes a second argument in addition to the effect function. That second argument is an array of dependencies. A dependency is a value that, if changed, will run that effect again. If not, it won't. See here:

In the example above, you'll see a few things. First, is one of my favorite parts of hooks: You can add as many as you want (providing they stay in the same order). Second, we have our first useEffect, which will only run once on the account of having an empty dependencies array. The second useEffect will only log when externalVar has changed, which lets you build some interesting and cleverly organized logic.

The next hook I'd like to talk about is useState. Wheeeeeeeee! This lets you add state to functional components. Pinch me. Let's take a look:

So in the above component, we see that useState's argument is the initial state. What it returns is an array of [value, valueSetter] that we use array destructuring to assign to our own local variables. Like useEffect you can have several mini states within your component as well, which is too much fun. Now, when setting our value, you see that I'm spreading the existing state in. There's a reason for that. Unlike setState that we are all used to in our class based components, a useState setter does not merge state, so that's on you. If I hadn't spread state, butts would have disappeared, and I'm personally not a fan of that.

Last I'd like to show useRef. It's not just for references to DOM elements/component instances in hook land. You can use it to reference anything's current value, which is helpful because sometimes scope gets tricky with hooks. Let's look at an absurdly simple example:

Think of refs as a place to put things you might have put on a class instance, but aren't quite comfortable putting in state. If you have a value in your component that oddly isn't updating, use a ref chief.

Custom Hooks 🏋️‍

So while the built in hooks are dope, and you can use them all on their own, the downright coolest thing about hooks is that they are basically just primitives that you can use to create new custom hooks. And it's pretty straight forward.

To create a custom hook, just create a function, and have it use hooks. You can return something, but that's optional. Let's check out a basic custom hook:

This is a hook that uses useState and useEffect to get the window size, keep it in state, return it, and update it when the window resizes. Check out how it's used:

While this is cool as hell, keep in mind that you can return anything from a hook, even components! My favorite new hooks pattern is one where you return a value and a component that controls it from the same hook. Lets dive into creating a custom component hook:

In the above example, we create a function that takes some options for our hook. We're creating a controlled range slider, and we let you specify the initial value, the min and max. We use useState to keep track of our value, and then we return an array, much like useState, but instead of a value and a setter, we return the value and a component that sets that value. Check out how it's used:

Conclusion 👋

I am real god damn excited about Hooks. They open up new, better (IMO) patterns for how we structure our component logic, and organize things delightfully by concern. I think so far we are just scratching the surface of the weird stuff we can do with them and I'm excited to see what the future holds. I've only shown 3 hooks in this article, but there are plenty more that you can check out in the links below.

I hope my article inspires you to go write some custom hooks, and helps you convince your boss to run 16.8 alpha in prod, like a gangster. So what are you waiting for? Get out there any try this new hotness!

Merry Christmas you filthy animals!

24-Dec

Today's posts

Secure and Merry Christmas

JavaScript Keyword Puzzle

Hooked on React