There are two applications within this repository that were generated from the HotTowel Angular generator. The main one is the vulnerable-app which is found in the /src folder. This application was built intentionally built out with vulnerabilities to easily demonstrate how they are performed by an attacker. The secondary application is the attacker-app found in the /attacker-app folder and it was built out to assist in demonstrating an attacker's website that is exploiting the vulnerabilities in the vulnerable-app.
- Node.js v4.2.x
- NPM v3.10.x
Straying from these versions may result in unanticipated behavior and it cannot be guaranteed the app will produce the expected results.
- Open your terminal and
cdto the root folder for this repository - Run
gulp serve-devto spin up thevulnerable-app - You should see your browser open up a new tab to the following URL: http://localhost:3000
- Open a new terminal window or tab and
cdto the/attacker-appfolder from the root location of this repository - Run
gulp serve-dev - You should see your browser open up another new tab to the following URL: http://localhost:3002
The following steps will demonstrate a simple example of being able to escape the context of where the search input text is printed on screen and used to execute an injectable script that the browser will execute.
- In the tab that's running the
vulnerable-app, click on the optionXSS-Searchin the navigation bar - In the "Search" field enter the following text:
<script>alert('Malicious Script!');</script> - Click the "Submit" button
- You should see an alert message pop up on your screen with the message "Malicious Script!"
The following steps will demonstrate a simple example of being able to submit requests on behalf of the logged in user within the vulnerable-app, but executed from the attacker-app.
-
In the tab that's running the
vulnerable-app, click on the optionCSRFin the navigation bar and take note of the "User Profile" section within the viewBy default, the user's "First Name" should show the value of
Jimand the "Last Name" as the value ofBob -
In the tab that's running the
attacker-app, click on the optionCSRF-Attackin the navigation bar. This will immediately execute the CSRF attack and display the forged POST data -
Go back to the tab that's running the
vulnerable-appand make sure you're still in theCSRFview -
Click the "Get Latest User Profile" button and you should see that the user's profile was changed due to the CSRF attack
The user's "First Name" should show the value of
Eviland the "Last Name" as the value ofHackernow
The following steps will demonstrate a simple example of clickjacking by tricking the user of the vulnerable-app to click a seemingly harmless button in the attacker-app that actually executes an action in the vulnerable-app.
-
In the tab that's running the
attacker-app, click on the optionClickjacking-AttackYou should be able to see that the
vulnerable-appis loaded in the view, but with a low opacity -
Open the developer tools for the browser you're using and view the console
-
Click the "Click to see awesome dog backflips!" button
You should see a message in the console with the following text: "The profile was successfully deleted!"
This example demonstrates that while the user thinks they're clicking on a button that will show them "awesome dog backflips", they're actually clicking on the "Delete Sensitive Information!" button found in the vulnerable-app. This is accomplished because the attacker-app can load the vulnerable-app in an iframe html element, style the iframe so it's not visible at all (in this case it is somewhat visible for demonstration purposes) and actually a "layer" deep from other html elements within the view, and place "clickbait" type elements on top of the iframe and over the areas the attacker wants the user to click within the iframe instead.
Generated from HotTowel Angular
Opinionated Angular style guide for teams by @john_papa
More details about the styles and patterns used in this app can be found in my Angular Style Guide and my Angular Patterns: Clean Code course at Pluralsight and working in teams.
- Install Node.js
- on OSX use homebrew
brew install node - on Windows use chocolatey
choco install nodejs
-
Install Yeoman
npm install -g yo -
Install these NPM packages globally
npm install -g bower gulp nodemon
Refer to these instructions on how to not require sudo
- Run code analysis using
gulp vet. This runs jshint, jscs, and plato.
- Run the unit tests using
gulp test(via karma, mocha, sinon).
-
Run the project with
gulp serve-dev -
opens it in a browser and updates the browser with any files changes.
- Build the optimized project using
gulp build - This create the optimized code for the project and puts it in the build folder
- Run the optimize project from the build folder with
gulp serve-build
HotTowel Angular starter project
The structure also contains a gulpfile.js and a server folder. The server is there just so we can serve the app using node. Feel free to use any server you wish.
/src
/client
/app
/content
When you generate the project it should run these commands, but if you notice missing packages, run these again:
npm installbower install
The app has 4 feature modules and depends on a series of external modules and custom but cross-app modules
app --> [
app.admin --> [
app.core,
app.widgets
],
app.dashboard --> [
app.core,
app.widgets
],
app.layout --> [
app.core
],
app.widgets,
app.core --> [
ngAnimate,
ngSanitize,
ui.router,
blocks.exception,
blocks.logger,
blocks.router
]
]
Core modules are ones that are shared throughout the entire application and may be customized for the specific application. Example might be common data services.
This is an aggregator of modules that the application will need. The core module takes the blocks, common, and Angular sub-modules as dependencies.
Block modules are reusable blocks of code that can be used across projects simply by including them as dependencies.
The blocks.logger module handles logging across the Angular app.
The blocks.exception module handles exceptions across the Angular app.
It depends on the blocks.logger module, because the implementation logs the exceptions.
The blocks.router module contains a routing helper module that assists in adding routes to the $routeProvider.
-
gulp helpDisplays all of the available gulp tasks.
-
gulp vetPerforms static code analysis on all javascript files. Runs jshint and jscs.
-
gulp vet --verboseDisplays all files affected and extended information about the code analysis.
-
gulp platoPerforms code analysis using plato on all javascript files. Plato generates a report in the reports folder.
-
gulp serve-specsServes and browses to the spec runner html page and runs the unit tests in it. Injects any changes on the fly and re runs the tests. Quick and easy view of tests as an alternative to terminal via
gulp test. -
gulp testRuns all unit tests using karma runner, mocha, chai and sinon with phantomjs. Depends on vet task, for code analysis.
-
gulp test --startServersRuns all unit tests and midway tests. Cranks up a second node process to run a server for the midway tests to hit a web api.
-
gulp autotestRuns a watch to run all unit tests.
-
gulp autotest --startServersRuns a watch to run all unit tests and midway tests. Cranks up a second node process to run a server for the midway tests to hit a web api.
-
gulp cleanRemove all files from the build and temp folders
-
gulp clean-imagesRemove all images from the build folder
-
gulp clean-codeRemove all javascript and html from the build folder
-
gulp clean-fontsRemove all fonts from the build folder
-
gulp clean-stylesRemove all styles from the build folder
-
gulp fontsCopy all fonts from source to the build folder
-
gulp imagesCopy all images from source to the build folder
-
gulp stylesCompile less files to CSS, add vendor prefixes, and copy to the build folder
-
gulp wiredepLooks up all bower components' main files and JavaScript source code, then adds them to the
index.html.The
.bowerrcfile also runs this as a postinstall task wheneverbower installis run.
-
gulp templatecacheCreate an Angular module that adds all HTML templates to Angular's $templateCache. This pre-fetches all HTML templates saving XHR calls for the HTML.
-
gulp templatecache --verboseDisplays all files affected by the task.
-
gulp serve-devServes the development code and launches it in a browser. The goal of building for development is to do it as fast as possible, to keep development moving efficiently. This task serves all code from the source folders and compiles less to css in a temp folder.
-
gulp serve-dev --nosyncServes the development code without launching the browser.
-
gulp serve-dev --debugLaunch debugger with node-inspector.
-
gulp serve-dev --debug-brkLaunch debugger and break on 1st line with node-inspector.
-
gulp optimizeOptimize all javascript and styles, move to a build folder, and inject them into the new index.html
-
gulp buildCopies all fonts, copies images and runs
gulp optimizeto build the production code to the build folder.
-
gulp serve-buildServe the optimized code from the build folder and launch it in a browser.
-
gulp serve-build --nosyncServe the optimized code from the build folder and manually launch the browser.
-
gulp serve-build --debugLaunch debugger with node-inspector.
-
gulp serve-build --debug-brkLaunch debugger and break on 1st line with node-inspector.
-
gulp bumpBump the minor version using semver. --type=patch // default --type=minor --type=major --type=pre --ver=1.2.3 // specific version
MIT
This a fork of Clarkio's vulnerable-app repo.