Learn Elixir, Gulp and Http

 Every developer who has attempted to demystify OAuth 2.0 must be presented with mind-bugging complicated flow diagrams. It becomes worse when you try to understand all the terminologies of OAuth 2.0 and Open ID protocols.

There is no getting around the OAuth 2.0 flow being complicated with back and forth between your browser, the service you are authenticating with, and the application you want to access. 

This course gets straight to the point without any application code distracting you from the core takeaway -- You will learn how to authenticate and authorize yourself using GitHub as your Auth Server.

We'll first cover the OAuth 2.0 flow for authentication and then integrate the Open ID protocol for authorization.

[**LIVE EVENT**: Register here for a live webinar with Christian on OAuth.](https://egghead.zoom.us/webinar/register/WN_Sxy1FEcoTea8UA6F7EDzLw) Bring any questions you have from taking this course!

JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties.

Add Github Login to Your Web App with OAuth 2.0

These videos include the introductory steps to writing your first Elixir function and beginning to understand some key concepts in Elixir that make it unique. 

Some of those concepts include:
- the Mix build tool
- project structure
- collections of functions written in modules
- function *arity*
- pattern matching and common uses for it
- the pipe operator

Elixir is a dynamic, functional language designed for building scalable and maintainable applications.

Elixir leverages the Erlang VM, known for running low-latency, distributed and fault-tolerant systems, while also being successfully used in web development and the embedded software domain.

elixir

Getting Started with Elixir

The Hypertext Transfer Protocol (HTTP) is an application-level protocol for distributed, collaborative, hypermedia information systems. It is a generic, stateless, protocol which can be used for many tasks beyond its use for hypertext, such as name servers and distributed object management systems, through extension of its request methods, error codes and headers.

http

Previously to tackle manual restarts due to server crashes , process management tools were used. 

Forever is one such module that is runs on the node ecosystem. So, we need not move away from the rich ecosystem of Node.js.

Use ``` npm install --global forever ``` to install forever module globally.
 

Running your server forever using forever in Node.js

Understand the three basic parts of making HTTP requests in Elm: 1) Building the request, 2) Writing a JSON decoder, 3) Sending the request using the Elm runtime, and reacting to the results with messages.

HTTP requests are just pieces of data in Elm. When we want to send them, we hand them off to Elm's runtime, and it notifies us when the request is done. An important part of working with HTTP requests that fetch JSON is JSON decoding, the process by which we can turn untyped JSON data into Elm types that are safe to work with.

Specs:

- Editor: Atom
- Theme: [Nebula (with Nebula syntax theme)](https://atom.io/themes/nebula-ui)
- Font: [Iosevka with ligatures enabled](https://github.com/be5invis/Iosevka)
- Plugin used for imports: [Elmjutsu](https://atom.io/packages/elmjutsu)
- Plugin used for formatting: [Elm-format](https://atom.io/packages/elm-format)
- Plugin used for linting: [linter-elm-make](https://atom.io/packages/linter-elm-make)


Make an HTTP Request in Elm

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

gulp

Building upon the `watch` task that we begin this lesson with, we’ll look at how to create a local development server using the `app` directory as the web root. By using Browsersync to achieve this, we can also instruct all connected browsers to automatically reload each time our bundle is re-generated. Browsersync has a public `.stream()` method that is designed exactly for this purpose.

Gulp and Browserify - Adding Live Reload with Browsersync

Babel has support for the latest version of JavaScript through syntax transformers. These plugins allow you to use new syntax, right now without waiting for browser support.

babel

What is already a nice workflow using Gulp, Browserify, Watchify & Browsersync to enable auto rebuilds & live browser reloading can be further improved by adding Babelify. A simple wrapper around the popular transpiler Babel, Babelify can ‘transform’ source files as they pass through our stream to enable certain Javascript features not yet available in the Browser or Node. We end the lesson by looking at how to generate & extract sourcemaps using `exorcist`.

Gulp and Browserify - Adding Babel & Source Maps

Browserify lets you require('modules') in the browser by bundling up all of your dependencies.

browserify

Let's look at the basics of setting up Gulp and Browserify. Creating a Gulp task from scratch, we'll cover how to utilise the Browserify API to generate a single `bundle.js` file, catch and log any errors that occur in the compilation process, transform the stream into a format that can be consumed by `gulp.dest` and finish by writing the bundle to a `dist` directory.

Gulp and Browserify - Initial Setup

A brief introduction to using GulpJS in your JavaScript application and creating your first Gulp task.

Installing and Writing a Default Task with Gulp

Beginning with a single Gulp task capable of generating a one-time Browserify bundle, we enable file-watching and incremental rebuilds by incorporating Watchify. We add a second task `watch` & refactor our initial code to enable the bulk of it to be re-used. We’ll look at exactly how to ‘wire’ these tools together and how the relationship between Watchify & Browserify can manifest into a seriously efficient workflow.

Gulp and Browserify - Hooking up Watchify

We will look at bundling your JavaScript files using Gulp, Gulp-Concat, and Gulp-Uglify

Bundling Your JavaScript Files with Gulp

`curl` is how you make HTTP requests from the command line. It's awesome for testing out APIs because you have full control over all the headers that are sent, and you don't have to interact with a UI to send a request. 

We’ll learn how to make requests and change the HTTP method, set headers, and send JSON and url encoded form data. We'll also see how to increase readability by splitting long requests into multiple lines and formatting JSON responses with `jsome`, a node module.

Make HTTP Requests in Bash with `curl`

The pipe operator is an easy to use and powerful feature of Elixir. It takes the output from the expression on the left, and automatically passes it as the first argument to the function on the right. This is especially useful when chaining together multiple function calls or data transformations. Using the pipe operator results in code that's easier to read, write and refactor.

Chain Function Calls with the Pipe Operator in Elixir

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

In this lesson, we'll learn how to add https (and remove http) support to the localhost version of our express application. By adding https support, we'll be able to prevent a MITM (in this case Charles Proxy) from reading our session id, mitigating the attack known as "session hijacking".

Add https to a Localhost Express App to Prevent MITM Attacks

In this lesson, we'll learn how to use Charles Proxy to “sniff” the web traffic flowing an example website using an attack known as a Man in the Middle attack, or MITM. Because our example website is using http and not https, you'll “discover” a vulnerable piece of user data called a session id being transmitted in cleartext across every request. This info will become the central piece of data that we'll learn how to protect throughout this course.

Simulate Man in the Middle Attacks and Inspect Network Traffic with Charles Proxy

In the previous lesson, we disabled http in favor of https. In this lesson, we'll learn that the default protocol for web browser is http, and we therefore need to provide an http endpoint that redirects the browser to https. We'll do that by setting up a small express application whose sole responsibility is to redirect http urls to https. In doing so, we'll accidentally reintroduce the transmission of our session id over http, which we'll need to fix in our next lesson.

Redirect All HTTP Traffic to HTTPS in Express to Ensure All Responses are Secure

In this lesson, we'll will learn how to set the `secure` flag on our session id cookie to ensure it is only transmitted over https connections. This will effectively mitigate the Session Hijacking vulnerability we introduced in the previous lesson.

Set the Secure Cookie Flag to Ensure Cookies are Only Sent Over Secure Connections

In this course, we'll learn how to exploit and then mitigate several common Web Security Vulnerabilities: Man in the Middle (MITM), Cross Site Request Forgery (CSRF), and Cross Site Scripting (XSS).

The goal of this course is to introduce you to these attacks from the point of view of an attacker, and then as the defender of a sample application, and to gain first hand experience with how these attacks works. You'll also learn several security "rules of thumb" along the way and discover modern defenses against these attacks that drastically reduce their likelihood of succeeding!

By the end of this course, you’ll know how to recognize these vulnerabilities in your own application and have strategies to mitigate and defend against all of them. You'll feel more confident in your ability to write secure code, and my hope is that you'll be inspired to continue your security journey and help make the internet a safer place for all of us.

Course Overview: Web Security Essentials

In this lesson, we'll learn how to add HSTS headers to an express application so that all requests after the first request made to the application are https. We'll also learn about the HSTS preload list which will ensure that even the first request is secure. Even though we secured our session id cookie in the previous lesson, ensuring all requests go over https ensure that even if we add another cookie and forget to set it to Secure, we'll still not be transmitting it in cleartext over an http connection.

Add HSTS Headers to Express Apps to Ensure All Requests are https Requests

In this lesson, we'll learn what a Cross Site Request Forgery (CRSF) vulnerability is by learning how to exploit a CSRF vulnerable site by making malicious requests on behalf of a logged in user. We'll construct a malicious payload that automatically gets POSTed to the vulnerable site simply by visiting the attacker website while being logged into the target website.

Create a Proof of Concept Exploit of a CSRF Vulnerable Website

In this lesson, we'll learn what the SameSite cookie flag is, what it’s various settings are, and how it can be used to prevent most forms of CSRF vulnerabilities. We'll then demonstrate how it protects against the exploit we crafted in the previous lesson.

Mitigate CSRF Attacks by Setting the SameSite Cookie Flag in Express

In this lesson, we'll learn what CSRF tokens are, and how they are used to defeat Cross Site Request Forgery vulnerabilities. Even though we've defeated CSRF through the use of SameSite cookies, adding CSRF tokens are an important "defense in depth" strategy to ensure that browsers that don't support SameSite cookies can still be protected against CSRF.

Search

Search Results