Category: Vim

Greeting Frens,

Welcome to the first of many tutorials that I will be publishing.

In this tutorial I’m going to show you how I setup my development environment. I’m going to going be writing a series of tutorials on how to write, exploit, and secure intentionally vulnerable web applications.

I’m documenting my Capstone Project for my Computer Science Degree from Oregon State University.

Admittedly, this will be fairly dry, but its necessary, we’ll building off this in the coming months.

Development Environment:

• OS: MAC OS Monterrey
• Z shell (zsh) command line environment
• NodeJS Packages:
  • express
  • express-handlebars
  • router
  • body-parser

Environment Setup

When I’m coding I use the command line and vim – neovim to be exact – a lot. You can use an IDE instead of vim when writing code, but I recommend getting good with the command line and text editors (vi, vim, etc.), especially if you plan for a career on penetration testing.

Step 0 (optional, only for MAC users) – install home-brew:

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Step 1 – install nodejs and npm:

Ensure that that homebrew is updates:

$ brew update

Install node and node package manager (npm)

$ brew install node

If you’re using a Debian flavor (i.e. ubuntu, kali, mint, etc), instead of ‘brew’ it would be ‘apt’

Step 2 – Create a working directory and navigate to it:

$ mkdir working && cd working

Step 3 – Directory Structure:

You’ll need to create a directory structure that looks like so:

If you’ve been following along ‘./OSU/vulnerabilites’, would be ‘./temporary’. ‘./temporary’ is the main directory.

The ‘./temporary’ parent directory will have to sub-directories – ‘./public’ and ‘./views’.

The ‘./views’ sub-directory will have a sub-directory – ‘./layouts’

Ignore all the other files for now.

Also, if you’re wondering, the screenshot above is from neovim text-editor. I’ll create another tutorial explaining my setup and plugins.

Step 4 – Install node packages:

Syntax:

$ npm install --save <package_name>

npm :: node package manager, binary that installs packages

install :: tells npm to install a package. We can use ‘i’ instead of ‘install’

–save :: tells npm to write and save the package name to the ‘package.json’ file

Install express package:

$ npm i --save express

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

Install express-handlebars:

$ npm i --save express-handlebars

Handlebars is a web application templating engine. If you don’t what this is, I’ll probably cover this another post, or you can Google it. Short answer: it makes creating dynamic web pages easier.

Install body-parser:

$ npm i --save body-parser

body-parser is need to parse the parameters in a ‘POST’ or ‘GET’ request.

Install router:

$ npm i --save router

Router object is probably not needed, but it’s good to use anyway. Maintaining multiple routes in the main app (app.js) can get cumbersome.

After installing these packages, node will create two new files in the main directory (‘./temporary’) – package.json and package-lock.json. There will also be a new directory – ‘./node_modules’.

Your First Web Applications – Hello World

Step 0: Create app.js file and open with an editor:

$ touch app.js
$ vim app.js

This file is under the parent ‘./temporary’ directory. Also note, I’m using vim edit the file, you could optionally use an IDE.

Step 1: Create Express Object:

const express = require('express');
const app = express();

Here we are creating an express objectThe ‘require’ statements are equivalent to ‘import’ statements in other language. Express is the middleware/framework/etc. whatever you want to call it that allows us to create our webapp/web server.

Step 2: Create a route:

app.get('/wagmi', function(request, response){
    response.send("WAGMI!");
});

This is a route handler. ‘app.get’ is specifying a handler for an HTTP GET request to the ‘/wagmi’ endpoint on our web application.

HTTP basics:

• Uniform Resource Identifier (URI): http://www.wagmi.com/test
  • Uniform Resource Locator (URL) :: http://www.wagmi.com
  • Uniform Resource NAme (URN) :: ‘/wagmi’

• URL is a subset of URI. It provides information about the location (i.e. domain name which gets mapped to an IP address by DNS). You can input an IP address directly in here.

• URN is a subset of URI. It provides the name of the specific resource you are trying to access of a target location. In this case it’s the ‘/test’ endpoint.

Note: our Webb will not be located at http://www.wagmi.com, we’ll be running it on our local machine, it’ll be http://localhost or http://127.0.0.1

‘function(request, response)’ is a callback function the this executed whenever someone browses to ‘/test’ endpoint of our web appp.

‘request’ is an object that contains information about the HTTP request that raised the event.

‘response’ is the response object of the server. When the handler for route ‘/wagmi’ is triggered, the server will response with the message “WAGMI!”.

Step 3: Set up the listening port:

app.listen(31337, function(){
    console.log("web app started...");
});

This tells the the web app to listen on port 31337 and then prints out a message to your command line terminal.

After this we save and exit the text editor (:wq) or IDE.

The final product should look something like this:

Step 4: Start the web server:

$ node app.js

Step 5: Browse to your web application

Open up a browser and go to http://127.0.0.1:31337/wagmi

If you made it this far, Congratulations!!

In this module we covered how to setup a development environment and then we built a very simple web application.

We did not use all the node packages that we installed, e.g. body-parser and router, but we will in future tutorials.

In the next tutorial I’m going to create a simple web page with a Cross Site Script Vulnerability.

Until then, Cheers!