Using AngularJS in Eclipse, Part 4) Create Components

This is the last of four posts on how to run (inside Eclipse) the examples provided in AngularJS's home page:

• Using AngularJS in Eclipse, Part 1) The Basics
• Using AngularJS in Eclipse, Part 2) Add Some Control
• Using AngularJS in Eclipse, Part 3) Wire up a Backend
• Using AngularJS in Eclipse, Part 4) Create Components

The example covered on this post is the Create Components:

Using AngularJS in Eclipse, Part 3) Wire up a Backend

This is the third of four posts on how to run (inside Eclipse) the examples provided in AngularJS's home page:

• Using AngularJS in Eclipse, Part 1) The Basics
• Using AngularJS in Eclipse, Part 2) Add Some Control 
• Using AngularJS in Eclipse, Part 3) Wire up a Backend
• Using AngularJS in Eclipse, Part 4) Create Components

The example covered on this post is the Wire up a Backend:

Using AngularJS in Eclipse, Part 2) Add Some Control

This is the second of four posts on how to run (inside Eclipse) the examples provided in AngularJS's home page:

• Using AngularJS in Eclipse, Part 1) The Basics
• Using AngularJS in Eclipse, Part 2) Add Some Control 
• Using AngularJS in Eclipse, Part 3) Wire up a Backend
• Using AngularJS in Eclipse, Part 4) Create Components

The example covered on this post is the Add Some Control:

Using AngularJS in Eclipse, Part 1) The Basics

This is the first of four posts on how to run (inside Eclipse) the examples provided in AngularJS's home page:

• Using AngularJS in Eclipse, Part 1) The Basics
• Using AngularJS in Eclipse, Part 2) Add Some Control 
• Using AngularJS in Eclipse, Part 3) Wire up a Backend
• Using AngularJS in Eclipse, Part 4) Create Components

The example covered on this post is the The Basics.

I'm doing this on an OSX laptop and the first step was to download and unzip (eclipse-standard-kepler-SR1-macosx-cocoa.tar.gz (32bit version of Eclipse's Kerpler) into the ~/_Dev/_AngularJS folder.

I fired up eclipse, chose the ~/_Dev/_AngularJS/workspace as the workspace root and installed the Eclipse Grovy REPL Scripting Environment 1.6.0 (update site) and Angular-JS Eclipse Tooling (update site) plugins.

A really SIMPLE and clean AngularJS+Firebase example

As seen on the First PoC of sending TeamMentor's server-side request URLS to Firebase (and seeing it in realtime in an AngularJS page) I created a Simple AngularJS website which I'm very happy with (and I mean Simple with a capital S).

The main reason I really like the solution shown below, is because it represents a number of really nice, clean and Simple solutions for common (complex) problems that exist while developing in Javascript.

The created application is an:

• AngularJS real-time viewer for HTTP requests, 
• ... made to an ASP.NET web application (TeamMentor),  
• ... captured by an custom C# HttpHandler filter, 
• ... submitted to Firebase using its REST API and 
• ... pushed back to the AngularJS app using open HTML 5 WebSockets.

Eclipse Groovy REPL script to sync a Browser with file changes (with recursive folder search via Java's WatchService)

Since I am using Eclipse to develop using AngularJS (see Creating an Eclipse UI to run AngularJS e2e tests using Karma), I needed a way to refresh the browser window every-time I made changes to any AngularJS related file (note that due to the nature of the AngularJS projects, I need the change to trigger on any change made inside the root folder and all its subfolders).

Since there didn't seem to be an easy way to do this ('auto browser refresh on file changes') in  Eclipse, I used the Eclipse Grovy REPL Scripting Environment to develop a script/macro that:

• Based on a title of an opened eclipse editor file:
• ... find the full path of that file, and:
• ... create a Java WatchService that monitors the file's folder and subfolders, and:
• ... when a StandardWatchEventKinds.ENTRY_MODIFY is received :
• Create/Open a new Eclipse view with a browser (called Synced Browser), and:
• ...refresh the index page 

First PoC of sending TeamMentor's server-side request URLS to Firebase (and seeing it in realtime in an AngularJS page)

After getting my head around how Firebase works (see Using Firebase to sync data with a webpage (via Javascript, REST and Firebase Admin panel) and Trying our Firebase (Beta) hosting solution and good example of Firebase Security rules), I really wanted to see how it could work on a key feature that I've been wanting to add to TeamMentor for ages: Realtime viewing  of traffic and logs

And it worked :)

This is really exciting!!! (can you tell :)  ), specially since I can see so many great uses of this type of technique and technology in TeamMentor (for example it will allow for much better understanding on how the content is used, and for better collaboration between its readers (and authors))

Trying out Firebase (Beta) hosting solution and good example of Firebase Security rules

Since Firebase now offers a Beta hosting service (and I was looking for a quick way to publish one of the firebase PoCs I'm working at the moment), I decided to take it for a spin.

I have to say that I'm really impressed with the end result, and as you will see below, there entire process (from install to published website) was really smooth.

Note 1: in the example below I already had created an Firebase app to hold the data (see Using Firebase to sync data with a webpage (via Javascript, REST and Firebase Admin panel) for details on how to create one) 

Note 2: at the time I wrote this post, the website created is/was (depending on when you are reading this) hosted at https://tm-admin-test.firebaseapp.com/

Starting with the instructions from Firebase hosting page:

XSS considerations when developing with Firebase

Following my previous post on Using Firebase to sync data with a webpage (via Javascript, REST and Firebase Admin panel), here are a couple security notes and 'areas of concern', that should be taken into account when developing real-time apps with Firebase:

• Firebase will reflect any payloads sent to it
• We are talking about DOM based XSS
• The current browsers XSS protection does not protect against DOM based XSS
• It is very easy to create a vulnerability (as you will see below, all it takes is a simple change from .text() to .html())
• If powerful DOM based API-manipulation frameworks are used (like jQuery), there are many more injection points (sinks)
• By nature of Firebase applications, the XSS exploit will have wormable capabilities (i.e. it will be able to distribute and self-propagate itself VERY quickly)
• Current static-analysis tools will struggle to pick up this type of vulns

Note: I think (and I will want to double check this) that if is safe (i.e OK) to put received Firebase data/payloads, on an AngularJS auto-binded location/variable (for example {{name}} : {{message}} )

Let's use the chat application provided by Firebase to see this in action (note that as you will see below, the chat application as provided by Firebase, is secure and not exploitable)

Using Firebase to sync data with a webpage (via Javascript, REST and Firebase Admin panel)

If you haven't seen the Anant Narayanan presentation on AngularJS conference called Building realtime apps with Firebase and AngularJS you are missing something good.

Firebase really seems to fix one of the pain points that I currently have in client-server development, which is how to send/synchronise data across multiple clients (including the server).

I first heard about Firebase from the Wire up a Backend example that can be found at http://angularjs.org, and today I was able to give it a test drive (since I want to use it on the AngularJS front-ends that I'm currently developing for TeamMentor)

Creating an Eclipse UI to run AngularJS e2e tests using Karma

This post shows how I created a nice set of views in Eclipse to quickly see the execution result of AngularJS e2e (end-to-end) tests, without leaving the Eclipse UI.

The image below shows this UI in action, where:

• The source code of the test is shown in the Eclipse Java editor
• Just below is the console out of the Karma runner (which is detecting files changes)
• On the top-right is the hooked browser (i.e. the one that will run the tests)
• On the middle-right is the simple AngularJS Hello World page
• On the bottom-right is the debug view of the hooked browser (which is what you get if you click on the Debug Button included on the top-right page)

Example of DOM XSS in WebSocket.org echo demo page (that bypasses Chrome's XSS detection)

I was looking at WebSockets today (because of its use in Firebase which is used in one of AngularJS samples), and noticed an DOM XSS example on the WebSocket echo page which is used as an example of how to use WebSockets (I found that page from this article Inspecting WebSocket Traffic with Chrome Developer Tools)

For historical record (and to reuse them in a Javascript SAST) I've copied the current (vulnerable) version of the HTML and JS provided to this gist.

Code samples (like these) should not be provided with these types of security vulnerabilities, since they should represent best practices.

Specially when we know that the normal developer workflow is to start with copy-n-pastes from these type of examples (note how that page, as of Fev 2014) has no references to security).


Let see the vulnerability in action.

Removing broken links from TeamMentor Articles using C# REPL and HtmlAgilityPack

After creating and using the TeamMentor TBot page to delete articles based on list of Guids the next action to do is to clean up and fix the links to the articles we removed.

Note that this is not a simple task, since there are multiple cases where the links are inside <li> tags (with or without text) which will also need to be removed (there was also a problem caused by the fact that the <li> tags were not correctly normalised (as you will see below)

I used the TM Link Status tool since it provides a nice analysis of what needs to be fixed, including REPL environments to script the object created during the 'link analysis' phase'.

Here is the workflow I followed, including some of the probs I had to solve along the way:

Reverting changes mades to TeamMentor articles

The problem was simple, there were a number of commits made to an TeamMentor GitHub repo that I wanted to completely reverse (without re-writing history).

For reference this happened when I was doing some 'Link fixing' tests on a server that was configured to auto commit to GitHub (which meant that the option to do a pure git reset --hard was not available since it would break the TM server)

In this case, the last good commit was e794cc839689dfc7915099d39972abde643a969d and the last bad commit was c53002083e85673f9a4dd7e6dbd2a37bc7ff9e2f (currently HEAD of master)

My first idea was to just do a git revert to the e794cc839689dfc7915099d39972abde643a969d which worked ok locally.

But I struggled to merge it with the master HEAD, because git was being too cleaver , since it realised that these two commits were compatible, and just fast-forwarded into the most recent one (vs doing a 'reverse merge')

Just added Flattr to this blog (I wonder how much Flattrs I will get?)

After Just Signed up for Flattr, what do you think of it? I decided to give it a try in this blog, since after all I'm also a content creator (and have recently reached my 1000 blog post).

What is interesting is that adding Flattr to this blog feels better than when I tried using Google AdSense (see Just disabled AdSense for this blog).

I guess the difference is that by adding AdSense to my blog I was exploiting my readers and benefiting from the 'getting out of control' ad industry (whose business model is to monitor and spy on everybody).

While by using Flattr I basically asking my readers to support me (if they like a particular blog post or content).

I also fell that it is a better relationship with the readers, since AdSense kinda pushes for the 'blockbuster post' with as much traffic as possible, where Flattr will (I hope) reward good and solid content, that added value to the reader, and that the reader liked enough to want to support it (lets see what happens :)  ).

For reference here is how I added Flattr to this blog:

Just Signed up for Flattr, what do you think of it?

While reading the Eclipse Memory Analyzer (MAT) - Tutorial I noticed a link to https://flattr.com which is a micro-payment solution for consumers of content to support the content creators.

Here is more info about Flattr:

• How Flattr works , Where can I flattr? , FAQ , Contact (Sweden and in London UK :)  )
• Flattr Wikipedia Article
• Bootstrapping a Podcast Economy with Flattr
• Twitter cuts off another payment service: Flattr is told to stop tying Favorites to money  and Twitter is forcing us to drop users ability to flattr creators by favoriting their tweets

Here are the steps I took to register: