I stream, blog, and make youtube videos about tech stuff. I love coding, I love AI, and I love building stuff!

Staff Developer Advocate

Juan Cruz Martinez

This is a story of the odd and the strange. A story involving dimensions, monsters, and JavaScript

It is 1995, in a small US town. A group of friends is playing Dungeons & Dragons. When they see that Demogorgon enters the game, Brendan casts Fireball. He rolls the die, but it goes missing on the floor. They keep playing.

After the game ends, Brendan rides his bike through the woods, passing by the Netscape Communications Corporation. Then he sees something weird in front of him. He loses his balance, falls down a steep hill, and crashes.

The boy runs home. He's shivering as he looks back, ensuring that thing doesn't follow him. He arrives home only to find out no one is there. He tries to call his parents, but he can't get through.

Something unlocks the door. Brendan runs out to the backyard when he sees the thing. A light glows brightly and then fades, revealing no one is there anymore.

After ten days of searching, Brendan Eich reappears in the forest, but he is not alone. A yellow and mysterious creature is with him, with odd characteristics but a powerful presence.

> <img alt="JavaScript" src="https://images.ctfassets.net/23aumh6u8s0i/2QjNmyDo6LfK4HC8F1q4qw/b8baddde46d79ec9432a15f14b4a41a2/javascript" height="35" style="margin-right: 1rem" align="left" />
It is too late for the world. JavaScript is out!

## The Weirdo on Maple Street
Joey, Andrea, and Juan are wandering in the woods when they encounter JavaScript. They freeze as the programming language tries to communicate with them but can't figure out what it's trying to say.

With the help of an interpreter, they managed to capture the strange language, but what does it all mean?

In front of them lay the script

```javascript
([![]] + [][[]])[+!+[] + [+[]]] + 
([![]] + [][[]])[+!+[] + [+!+[]+!+[]]]
+ " " +
(![] + [])[+[]] +
(![] + [])[+!+[]] +
([![]] + [][[]])[+!+[] + [+[]]] +
(![] + [])[!+[] + !+[]] + 
(![] + [])[+!+[]+!+[]+!+[]]
```

After some thought, the team got to work on the problem. They split it up into smaller chunks and worked it out.

First let's take a look at `([![]] + [][[]])` which is repeated throughout the snippet.

Breaking it down, even more, we get:

`[![]]` and we know that `![]` is `false`, so we have `[false]` as a result.

Next, `[][[]]` looks confusing, but looking into more details, it follows this pattern: `array[index]` where `array = []` and index = `[]`, and accessing an empty array at any position, will return `undefined`, even if that position happens to be another array.

Putting this part of the script back together, we get:


```javascript
([![]] + [][[]]) === [false] + undefined &&
[false] + undefined === 'falseundefined'
```

And so they replaced

```javascript
'falseundefined'[+!+[] + [+[]]] + 
'falseundefined'[+!+[] + [+!+[]+!+[]]]
+ " " +
(![] + [])[+[]] +
(![] + [])[+!+[]] +
'falseundefined'[+!+[] + [+[]]] +
(![] + [])[!+[] + !+[]] + 
(![] + [])[+!+[]+!+[]+!+[]]
```

But then:

```javascript
(![] + []) === 'false'
```

and

```javascript
'falseundefined'[+!+[] + [+[]]] + 
'falseundefined'[+!+[] + [+!+[]+!+[]]]
+ " " +
'false'[+[]] +
'false'[+!+[]] +
'falseundefined'[+!+[] + [+[]]] +
'false'[!+[] + !+[]] + 
'false'[+!+[]+!+[]+!+[]]
```

Now we understand more. Using this strange language, we could decode strings. Since JavaScript allows us to access any character in a string by asking for its position, each particular line seems to be capturing a unique character on each string.

We have the strings, but we need a way to build up indexes; fortunately, there are a few tricks we can use.

For starters, thanks to Math in JavaScript, we know that `+true === 1` and that `+false === 0`, why? the `+` sign at the beginning tells JavaScript to cast the boolean value to its numeric form.

Once we have those numbers, we can make any combination. For example, `2` can be written as `+true+true`, but what if we want something in the two digits order? It will take a long of those... Or we can use a different technique.

`number1+[number2] === "numbernumber2"`, this happens because the sum now acts as a concatenate and converts each side of the `+` sign into a string. This is done by design, as JavaScript can't add an array to an integer.

Finally, we can use this little array to bool conversion table to get our numbers:

```
+[] -> +false -> 0
!+[] -> !false -> true
+!+[] -> +true -> 1
```

Now that we can form single and two-digit numbers, we can easily convert all the indexes into numbers or strings and form our final answer:

```javascript
'falseundefined'['10'] + 
'falseundefined'['12']
+ " " +
'false'[0] +
'false'[1] +
'falseundefined'['10'] +
'false'[2] + 
'false'[3]
```

Now, we have to count.

```javascript
i
e
" "
f
a
i
l
s
```

That's it! He is trying to say, "ie fails"!

## Holly, Jolly, and The Body
Carla, Brendan's mom, is sure that he is trying to communicate with her through the lights of her house. Carla is determined to find out, so she elaborates on a simple math test.

"Brendan, can you hear me?" she asks. If you can hear me, tell me, what is `1 + 1`, and the lights go on and off two times.

For the second test, `3 + 1`, the lights go on and off four times.

Is this a coincidence? She is, by now, freaking out.

`"3" - 1`, and the lights go twice.

It has to be him! One more to be sure

`"3" + 1`, but the lights start a different show this time. They go on and off for a while. When they stopped, she had counted `"31"`.

Maybe I am a mess; maybe I'm crazy, she concluded. What kind of math is that?

She doesn't know JavaScript, or she would have understood. The lights were correct, according to JavaScript, of course.

If the same happens to you, remember, in JavaScript.

```
Number + Number -> addition
Boolean + Number -> addition
Boolean + Boolean -> addition
Number + String -> concatenation
String + Boolean -> concatenation
String + String -> concatenation
```

For example:

```javascript
3 - 1 // -> 2
 3 + 1 // -> 4
'3' - 1 // -> 2
'3' + 1 // -> '31'

'' + '' // -> ''
[] + [] // -> ''
{} + [] // -> 0
[] + {} // -> '[object Object]'
{} + {} // -> '[object Object][object Object]'

'222' - -'111' // -> 333

[4] * [4] // -> 16
[] * [] // -> 0
[4, 4] * [4, 4] // NaN
```

## The Flea and the Acrobat
Tony, the local chief of police, who starts to believe in Carla's story, decides to break into the Netscape Communications Corporation, looking to learn more about JavaScript.

Juan, Andrea, and Joey, who had a conversation with Brendan, believe that JavaScript came from an alternate dimension, the "Upside Down".

In this dimension, there are special considerations, he adds. For example,

```javascript
Math.min() > Math.max(); // -> true
Math.min() < Math.max(); // -> false
```

Intuitively it is strange, but in the JavaScript dimension, it makes sense, as 

```javascript
Math.min(); // -> Infinity
Math.max(); // -> -Infinity
Infinity > -Infinity; // -> true
```

But why does `Math.min() === Infinity`? `Math.min` takes arguments, tries to convert each one to a number, and then it returns the smallest of them. If you don't provide any arguments, the result is `Infinity`.

And the opposite thing happens to `Math.max`.

Meanwhile, Tony had an encounter.

## The Monster and The Upside Down
Deep in the lab, where the shadows cover the rooms, Tony feels there's something around. He calls in for backup. On the other side, Greg and Dan are on their way.

Juan, Andrea, and Joey know that the only way to conquer JavaScript is to enter into its dimension, so they fire up a terminal and open the portal. They all jump inside.

In the lab, another portal opens. Tony, who already met with Greg and Dan, gets inside, and the portal collapses right after.

From the shadows, a strange passage appears. It contains a challenge, "solve me, and I'll let you go!"

```javascript
['1', '7', '11'].map(parseInt);
```

Intuitively, the group tries to guess the first answer, `[1, 7, 11]`, but Juan, Andrea, and Joey stop them before they can input it.

In this place, not all things are what they look like, so we must treat arguments very carefully, mentioned Juan.

Carla, who found her way to the "Upside Down", provided some more insights into the problem.

The function `parseInt` expects two parameters, a string and the radix. The latter is an integer between `2` and `36`, representing the base in mathematical numeral systems.

So the `map` function could be providing more than one argument, so more than just the string to the `parseInt` function, added Joey.

Breaking it down, the team formed the following statement:

```javascript
['1', '7', '11'].map((currentValue, index, array) => parseInt(currentValue, index, array));
```

The `index` from the `map` function is passed to the `parseInt` function as the radix, and thus, the resulting value would be different from the expected.

So the team calculates each value:

```javascript
parseInt('1', 0) // 1
parseInt('7', 1) // NaN
parseInt('11', 2) // 3
```

So the final result is `[1, NaN, 3]`.

As they type it in, the dimension starts shaking, and a new portal opens up.

They all rush out. "We are safe. We are back home", they rejoiced.

But that thing is still out there. Let's get it - Tony.

The team prepares for battle...

To be continued.

-----

I hope you enjoyed this little informative parody of Stranger Things, our treat for this Halloween.

Stranger Scripts

philippederyck

Philippe De Ryck helps developers protect companies through better web security. His Ph.D. in web security from KU Leuven lies at the basis of his exceptional knowledge of the security landscape. As the founder of Pragmatic Web Security, Philippe delivers security training and security consulting to companies worldwide. His online course platform allows anyone to learn complex security topics at their own pace. Philippe is a Google Developer Expert and an Auth0 Ambassador/Expert for his community contributions on the security of web applications and APIs.

Web Security Expert, Founder of Pragmatic Web Security

Philippe De Ryck

Learn how to use Content Security Policy (CSP) to prevent the execution of malicious script code in your application.

Defending against XSS with CSP

andrea-chiarelli

I have over 20 years of experience as a software engineer and technical author. Throughout my career, I've used several programming languages and technologies for the projects I was involved in, ranging from C# to JavaScript, ASP.NET to Node.js, Angular to React, SOAP to REST APIs, etc.

In the last few years, I've been focusing on simplifying the developer experience with Identity and related topics, especially in the .NET ecosystem.

Principal Developer Advocate

Andrea Chiarelli

Learn how XSS works and how to prevent it in Web applications.

Defend Your Web Apps from Cross-Site Scripting (XSS)

antoniofuentes

Antonio is a Product Manager in charge of features and functions used by thousands of customers implementing identity systems to keep their users safe and prevent malicious activity.

Product Manager, Continuous Auth

Antonio Fuentes

How Auth0 uses risk signals to detect and help you manage scripted, high-volume attacks on your identity flows



## The Problem

Attacks on an identity infrastructure using stolen credentials are a difficult problem to solve. [Credential stuffing attacks](https://auth0.com/blog/what-is-credential-stuffing/) occur when a bad actor sends scripted, automated login attempts to an application or website in extremely high volumes, with the objective of gaining access to user accounts. This is an increasingly common problem: on any given day, up to 69% of login attempts on the Auth0 infrastructure are suspected to have originated from credential stuffing attacks. 

This type of attack can be quite sophisticated. Sometimes they come in the form of hundreds of thousands of login requests to a site in a short time window, at a very high velocity, and from a relatively small number of IP addresses from unusual locations. They can also come in the form of scripts that send traffic using tactics to dynamically evolve their velocity, location, and number of IP addresses to avoid detection.  

Generally, solving this problem involves a tradeoff between usability and security, in which user experience pays the price. Measures like multi-factor authentication (MFA) are effective in limiting the success rates for a script involved in a credential stuffing attack, but they also add friction for legitimate users. 

To tip the scale in favor of user experience, malicious bots and scripts need to be detected and rejected before a login call is even processed by the authentication server. Doing so enables you to limit the impact of credential stuffing attacks while delivering a better experience for the end user. 

## Bot Detection from Auth0

Auth0 is launching Bot Detection, the first in a series of features to detect credential stuffing attacks on the login flow. Once enabled, this feature will use a variety of signals to assess the likelihood that a login call originates from a scripted attack. If the risk assessment is high, a CAPTCHA step is inserted into the login flow. 

![Bot Detection](https://images.ctfassets.net/23aumh6u8s0i/3Fs7MAvNuLZTFJ20QOSw6m/63bf1b065314dd2bea4a7451782dfb6b/bot-detection-anomaly)

Bot Detection will be supported at launch with Auth0’s Universal Login experience. For customers who have built more customized user experiences using native SDKs such as `lock.js` and mobile SDKs such as a `lock.Android` and `lock.swift`, Auth0 will support an exception scenario so that customers can recognize a risky call and take steps to render a CAPTCHA step on the screen. The feature will also support presenting CAPTCHA using a generic flow or a customer’s own Google reCAPTCHA.

<table>
<tbody>
<tr>
<td><img src="https://images.ctfassets.net/23aumh6u8s0i/1sos7fOgZYGp148983HyH5/809ea54d105104de83c2e922fe22de7f/bot-captcha" alt="Bot Detection-1" width="396" height="602"/></td>
<td><img src="https://images.ctfassets.net/23aumh6u8s0i/1U3FsuEZ0rHL9kDNQv17J5/cb207f20b5eb8b676f1b2549866456dd/bot-captcha-2" alt="Bot Detection-2" width="382" height="735"/></td>
</tr>
</tbody>
</table>

## Mitigating Abuse with Auth0

Bot Detection will be the latest addition to Auth0’s collection of features designed to prevent abuse, including [Breached Password Detection](https://auth0.com/docs/anomaly-detection/breached-password-security), [Brute Force Protection](https://auth0.com/docs/anomaly-detection/brute-force-protection), and [MFA](https://auth0.com/docs/mfa). These features help customers mitigate the tradeoffs between security and usability without unnecessary compromises to user experience. 

## Learn More

* [Credential Stuffing Attacks: What They Are and How to Combat Them](https://auth0.com/resources/whitepapers/credential-stuffing-attacks)
* [The Anatomy of a Credential Stuffing Attack](https://auth0.com/resources/webinars/credential-stuffing-attack-webinar)

Auth0 is the first identity management platform for application builders, and the only identity solution needed for custom-built applications. With a mission to secure the world’s identities so innovators can innovate, Auth0 provides the simplicity, extensibility, and expertise to scale and protect identities in any application, for any audience. Auth0 secures more than 100 million logins each day, giving enterprises the confidence to deliver trusted and elegant digital experiences to their customers around the world.
<include src="asides/AboutAuth0" />


Reducing the Impact of Credential Stuffing Attacks

1097492785caf9ffeebffeb624202d8f?s=200 avatar

1097492785caf9ffeebffeb624202d8f?s=200

Prosper is a great speaker, community leader, open source hacker, technical consultant, and a fervent Developer Advocate. He is a full-stack software engineer who has worked on biometric, health and developer tools. Prosper recently co-founded a startup called Eden that’s focused on improving the quality of lives in Nigeria and currently leads the engineering team. He also co-founded forloop, the largest developer community in Africa.

Former Auth0 Employee

Prosper Otemuyiwa

Create React App (CRA) is a very good tool for creating React apps from the CLI without build configuration.



---

**TL;DR:** There are several tools available for developers to aid the building of various types of websites and applications. One such tool is [**Create React App(CRA)**](https://github.com/facebookincubator/create-react-app), the CLI tool that helps JavaScript developers create react apps with no build configuration. As awesome as **CRA** is, developers still need a way of tweaking, adding special scripts and modules that doesn't come bundled with **CRA**. Today, I'll teach you how to create custom `create-react-app` scripts for you and your team!

---

Many developers already use [create-react-app](https://github.com/facebookincubator/create-react-app) to build their React applications, but like I mentioned earlier, developers are still screaming for more configuration options! Some are interested in having support for:

* PostCSS
* CSS Modules
* LESS
* SASS
* ES7
* MobX
* Server Rendering

..and a lot more out of the box!

A lot of developers, including JavaScript newbies create *React* apps from scratch daily, so the *CRA* team at Facebook built the *create-react-app* tool to make the process of creating such apps less tedious and error-prone.

As a developer that needs support for some of the technologies I highighted earlier, one way of going about it is running `npm run eject`. This command copies all the config files and dependencies right into your project, then you can manually configure your app with all sorts of tools to satisfaction.

One major challenge developers might face with *eject* is not been able to enjoy the future features of *CRA* . Another challenge with *eject* would be ineffecient synchronised setup across React developers working in team. One great way of solving this later challenge is publishing a fork of `react-scripts` for your team, then all your developers can just run `create-react-app my-app --scripts-version mycompany-react-scripts` and have the same setup across board. Let's learn how to accomplish that!


## Create a Fork

Open up your GitHub repo and fork the [create-react-app repo](https://github.com/facebookincubator/create-react-app)

![Creating a fork of create-react-app](https://images.ctfassets.net/23aumh6u8s0i/7u1YvLkXhzbeQjnaSCxJbQ/bf83b03caae7460819dfbbe663984852/fork)
_Creating a fork of create-react-app_

**Note:** It is recommended that you fork from the latest stable branch. Master is unstable.

Inside the `packages` directory, there is a folder called `react-scripts`. The `react-scripts` folder contains scripts for building, testing and starting your app. In fact, this is where we can tweak, configure and add new scripts and templates.


## Tweak the Configuration

Clone the directory and open up the `react-scripts/scripts/init.js` in your code editor. Let's add some few console messages like so:


```js

......
......
console.log(chalk.red('VERY IMPORTANT:'));
console.log('Create a .env file at the root of your project with REACT_APP_EMPLOYEE_ID and REACT_APP_POSITION_ID');
console.log('  You can find these values in the company dashboard under application settings.');
console.log('  https://company.bamboohr.com/settings');
console.log();
.......

```

![Block to add important message](https://images.ctfassets.net/23aumh6u8s0i/n7LhzGHKp5tEMU4OmKrXa/7eb55ae3947e1d7a909d20f92f2dfe9e/important-messages)
_Add the important message during installation here_

![Important Message added to Installation process](https://images.ctfassets.net/23aumh6u8s0i/4qwNthcuPvylJrOW2Xx2K9/60668429708f5804833da8a4af85e066/added_message)
_Added important message to show during installation_


**Now, Let's change templates**

Open up `react-scripts/template/src/App.js` and replace it with this:

```js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  getEnvValues() {
    if (!process.env.REACT_APP_EMPLOYEE_ID || !process.env.REACT_APP_POSITION_ID) {
      throw new Error('Please define `REACT_APP_EMPLOYEE_ID` and `REACT_APP_POSITION_ID` in your .env file');
    }

    const employeeID = process.env.REACT_APP_EMPLOYEE_ID
    const position = process.env.REACT_APP_POSITION_ID;

    return { employeeID, position };
  }

  render() {

    const { employeeID, position } = this.getEnvValues();

    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to Unicode Labs</h2>
        </div>
        <p className="App-intro">
           <b> Employee ID: { employeeID } </b><br/><br/>
           <b> Position: { position } </b>
        </p>
      </div>
    );
  }
}

export default App;

```

Now, go to `react-scripts/template/public` directory. Open the `index.html` file and change the value of the `<title>` tag to `Unicode Labs`.

You can also change the favicon to your company's favicon. You can change as many things as you want and add custom components that your team uses frequently.

Create an `.env.example` in the `react-scripts/template` directory that contains the following:

```bash

REACT_APP_EMPLOYEE_ID='44566'
REACT_APP_POSITION_ID='ENGR'

```

A user will have to rename it to `.env` once the `create-react-app` tool is done installing the `react-scripts`. You should add this instruction to the `README` file.

**Note:** *CRA* already includes support for custom env variables if you're open to prefixing their names with **REACT_APP**.

That's all we need!

## Publish react-scripts to NPM

Before publishing to npm, we need to change the value of the `name` key of the `package.json` file in `react-scripts` directory to `unicodelabs-react-scripts`.

Change the value of the `description` key to `Unicodelabs Configuration and scripts for Create React App.` Also, point the value of the `repository` key to the right location. In my case, it is `unicodelabs/create-react-app`.

Now, `cd` to the `react-scripts` directory from your terminal like so:

![react-scripts directory](https://images.ctfassets.net/23aumh6u8s0i/bb1nEBWI7mEn8AhvlhHHr/866debaed0d8a87efd4b265581b6a8df/react-scripts-directory)
_Change into this directory on your terminal_

You need to login to npm like so:

![Npm Login](https://images.ctfassets.net/23aumh6u8s0i/4ICjtFsI8ZCZ0HDmZcC5FJ/2a26a2a62b862577aa9e4fd5695eff66/npmlogin)
_Log into Npm_

Go ahead and publish

![Publish](https://images.ctfassets.net/23aumh6u8s0i/4EQQcIx1ZYGYIrTBSmkrs7/790ea1dd69fddd70e8764820c8c70160/publish)
_Published unicodelabs-react-scripts to npm_

## Test Your Custom Script

Head over to your terminal and run:

```bash

create-react-app test-app --scripts-version unicodelabs-react-scripts

```

In your own case it would be `yourname-react-scripts`, where `yourname` is your company name or whatever name you choose to give it.

*CRA* would install it and then you will see a notice like so:

![Important Warning](https://images.ctfassets.net/23aumh6u8s0i/2pxfM1TOJAmcSV8cq6rDgx/d4962cf535c3e81cdb0fefd4e671492e/important-warning)
_Important Warning_

Remember, when we put this message in the code earlier? Awesome!

Now, `cd` into the `test-app` directory, rename the `.env.example` to `.env` and run `npm start` command.

Your app will spin up with the new template like so:

![New template showing up](https://images.ctfassets.net/23aumh6u8s0i/4ERTl04dXoEUUmTecZl8MR/2e48651dc4684d4bd3dae2f2f812693c/result)

**Note**: If you have yarn installed, then create-react-app would install your app using Yarn.

<include src="asides/React" />

## Conclusion

Great programmers constantly sharpen their tools daily to increase productivity. *CRA* is a great tool for quickly building React Applications. In addition, having your own customized fork of `react-scripts` helps you and your team easily add all the configurations you need. You'll need to maintain your fork, and [make sure it is synced](https://help.github.com/articles/fork-a-repo/#keep-your-fork-synced) with the upstream to have all updates. [Backstroke](https://github.com/1egoman/backstroke) is a bot that can help you with this.

Have a very productive time hacking away!


"script"