This gist describes the work which was done in the Frontend Technology Update project the summer for the OWASP Juice Shop Project under Google Summer of Code 2018. The work for the project done is in the gsoc-frontend branch of the Juice shop repository while the work done for the Challenge Pack project by @CaptainFreak is in the gsoc-challenges branch. Both the branches were rebased to a third branch gsoc-integration which would contain the combined progress overall by both projects.

The project was split into three phases:

1. Components and services were created in Angular that would replace the controllers and services in AngularJS. Unit tests were written for the Angular services. After that, the backend was made to point to the new frontend written in Angular.
2. Fixing the end-to-end tests and the integration tests which were broken and also fixing the challenges which were not working after the backend was made to point at the new frontend. Unit tests were also written for the Angular components. The branch gsoc-challenges was merged into gsoc-integration which brought in the new challenges implemented by @CaptainFreak
3. Refining and fixing glitches in the UI and completing the component unit tests.

Phase 1: Creating the new frontend

During this phase, work was done by making changes in my fork and submitting Pull requests to the main repo, the PRs can be found here.

In this phase, the backbone of the new frontend was set up while the application continued to use the code for the old frontend written in AngularJS. Components and Services were created in Angular. The tasks for the phase were straightforward as equivalent code had to be written in Angular for the new frontend . The views were created using Angular Material which would replace Bootstrap. By the end of this phase, the unit tests for the services were complete and Socket.io had been added to the new frontend for realtime communication with the server.

Finally, in the last PR for this phase, the backend was made to point at the new frontend due to which many end-to-end and integration tests failed. The end-to-end suite was disabled temporarily while the failing integration tests were fixed.

Phase 2: Integrating the challenges and refactoring the end-to-end test suite

From this phase onwards, the work was done by directly pushing commits to the gsoc-frontend. In this phase, the component unit tests were written, the challenges which were not working for the new frontend were either modified in a way to work or disabled. The e2e test suite was also refactored to work consistently with the new frontend.

During this phase, certain challenges had to be modified like the Zero Stars and the Typosquatting Tier 2 challenges. The Zero stars challenge could earlier be solved by directly interacting with the User Interface but now it could only be done by sending requests to the server. The library being typosquatted was changed to ng2-bar-rating by my mentor as the library being used earlier was based on AngularJS.

The mechanism used for searching the products was also different for the new frontend due to which the challenges related to searching like XSS Tier 1 , Chritsmas Special and User Crdentials challenges were disabled. Earlier, the search query was sent to the backend which would filter the products matching that query and return them to the client. For the new frontend, all the products were sent in a single backend call and the products would be filtered based on the search query without making any more backend calls.

All the XSS challenges failed to work because of the strict precautions Angular takes against Cross-Site Scripting. A new mechanism was decided for injecting scripts with the help of the HTML iframe element. Rather than inserting <script> tags directly, javascript was injected through the iframe as follows - <iframe src="javascript:alert('xss')"></iframe>

By the end of this phase, the end-to-end test suite was almost completely refactored with the exception of the XSS challenges and the CSRF challenge. The Eye Candy challenge which was based around Bootswatch theming was disabled as the new client-side no longer used Bootstrap. Along with repairing the challenges and the e2e suite, a major chunk of writing the component unit tests was completed. Finally, the new challenges implemented in the "Challenge Pack" Project were brought in the gsoc-integration branch.

Phase 3: Fixing glitches in the UI and completing the component unit tests

After the newly implemented challenges were brought into the gsoc-integration branch, certain end-to-end tests got broken again. The tests written for the new challenges were also designed for the old frontend due to which they had to be rewritten. @CaptainFreak and I mended these tests for the initial duration.

The work in this phase was focused on fixing glitches in the UI and completing or adding missing features. The UI glitches fixed till now include the scrollbars on the search page, adjusting the browser title and the favicon. The issues with the UI are being trakced in the following GitHub issue Along with that, the component unit tests were written as well.

Work to be completed

• Theming has to be implemented. Currently the theming has been done in Angular Material in a way which mimics the Bootswatch themes which were present before. Theming has to be implemented by following the principles of Material Design.

• Responsiveness is currently broken. The responsiveness is being added by using flex-layout.

• While most of the end-to-end tests have been fixed, the tests for XSS Tier 0, Tier 2, Tier 3, Tier 4, Tier 5 and CSRF challenges still need to be completed.

• Phasing out the old frontend

Links

• The GitHub branch for the Frontend Technology Update Project
• The heroku instance of the branch
• Link to remaining work for the project

My Experience

The project was a great learning experience. Apart from wrting the frontend in Angular, I got to learn about the backend code written in Node.js and the working of the security challenges during refactoring the end-to-end test suite using the framework Protractor. My mentor greatly helped in provinding the direction of how things were to be done and managing both the GSoC projects of Juice Shop. Juice shop is an amazing project with a great community of which I am honored to be a part of. Many thanks to OWASP and Google for making this summer productive.