Demo Day
Our international IT student team brings a varied range of skills and interests, from AI to cybersecurity. We aim to use this experience to deliver optimal solutions for project, using structured methodology and focusing on team dynamics . Committed to continuous learning, we want to ensure our project benefits from our collective knowledge and fresh perspectives. Visit our team website! You can find links, demos and illustrations in the section for our solutions.
Links to demo service
By adopting strict role-based access control (RBAC) and the principle of least privilege, we mitigate risks of unauthorized access or data breaches to our services. Regular code reviews and dependency checks help reduce the attack surface, fortifying our defenses against potential exploits. Additionally, designing a user-friendly interface based on Web Content Accessibility Guidelines (WCAG) ensures inclusivity and accessibility. Compliance with WCAG not only meets legal requirements but also reflects our commitment to equal access for all users, enhancing overall satisfaction and engagement.
About our assignment
Future Factory 2024 is a project management & software development course running this spring. An existing application developed by a previous course, Tukko Traffic Visualizer, is a big part of our assignments. Team Synergy's focus is to enhance select features of the application, and release an improved Tukko v2.0.
In today's digital landscape, Synergy prioritizes security in feature implementation, collaborating closely with Combitech via our Product Owner Reima Parviainen, and coordinating our project via Scrum Master Marko Rintamäki.
What have we been developing?
Interface enhancements
1. Better darkmode colors (FEA106)
Analyzing the previous version of Tukko Traffic Visualizer, we found the colors to be high on contrast and not very soothing for use in dark environments. We have changed and improved the css-filters to adapt to what we consider a better experience. You can see the the changes in action in the animation below, or try the slider yourself via our team website!
Zoomed out
The filter make the page lower on contrast and making use of different colors. It is slightly ligther than the original. A reasoning behind this is the map will mostly be zoomed in, and from our development and testing we found the colors to be improved and easy for the eyes in zoomed in areas.
Zoomed in
The below image shows the new darkmode filters on a medium zoom.
2. Branding (FEA112)
The initial project was developed by team Iotitude in 2023, and our project is to continue the work on the web application. Hence a change in branding was needed to show the team working on the version 2.0. We changed logos and added our own GDPR.
An extended userguide will be added at a later point, once the selected features have been completed.
3. Color Contrast for Color Blindness (FEA110)
Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these.
One of our first thoughts and ideas when analyzing the contrast on the page was to see how it could be improved in terms of color blindness. By using the WGAC extension tools in different browsers, we tested and found better color schemes to fit the different forms of color blindness in a better way. We have added a new button with the accessibility icon(blue circle with a white stick-figure) to the mid-left of the web application. At current stage, the button simply turns on/off color contrast mode. At a later stage we want to enhance the functionality more, by adding more informative texts and other accessibility features within this module.
New button to indicate accessibility functionality
Below you can see an a visualization the functionality of the button, changing of contrast on the map tiles.
Tukko with a regular map, testing WGAC color contrast checker for different disabilities
We want to show how the WGAC color contrast checker looks on the regular map, where different filters are applied. The original color scheme shows significant difficulties reading and differentiating some sections of the map tiles (Click the GIF for a larger view).
Tukko with accessibility button enabled, improved contrasts and colors, testing WGAC color contrast checker for different disabilities
Finally, below you can see how the map tiles look when we use the color contrast accessibility button, while going through different filters. The main purpose is to make it easier to quickly see and differentiate objects and areas of the map for users who have different challenges with colors and contrasts (Click the GIF for a larger view).
4. Norwegian language added to the language options
While not having the time nor resources to implement Tukko's range to include Sweden and Norway, we still wanted to help improving the language modules for this. The language bar used in Tukko v1.0 were enhanced to include Norwegian for the first section of the multilingual focus.
We then created the files needed to translate the locale to norwegian. While there are still a couple challenges, like slow loading of the initial module, we try to make sure the default or selected language holds through a refresh of session for the user. The remaining sections to be translated correctly are Road works & specifics on traffic restrictions. Please do test our live server to look for additional bugs! The functionality of the feature can be seen below (Click the GIF for a larger view)!
Security features
1. Control Access to the Server (FEA407)
To secure the servers from unauthorized access, we decided to implement role-based access control (RBAC) based on the principle of least privilege.
In practise this means setting up user accounts, groups and permissions for all team members - using strong password policies recommended by the National Institute of Standards and Technology (NIST). The passwords are stored securely in a password manager utilizing multi-factor authentication (MFA) and are only accessible by administrators. Additionally firewall rules were configured in both the cPouta service and internally using UFW. SSH has also been hardened to disallow root login, limit authentication attempts, and only allow access to specified user accounts. Further hardening was performed on the server itself after running a Lynis audit scan.
Finally we decided to implement Fail2Ban, a daemon that automatically bans IP addresses that have too many failed login attempts, in order to prevent brute-force attempts on ssh logins. Below you can see the Fail2Ban sshd jail in action:
In the video below, we are showing an example of using Hydra to attempt to brute force the login via SSH. The result is a banned IP (no personal IPs were harmed or exposed in this attempt):
2. Regularily Scan for Known Security Vulnerabilities (FEA403)
To regularly scan for known security vulnerabilities, we decided to rely on the services offered by Gitlab's security dashboard. This meant setting up SAST, DAST, dependency checks, container scanning and other automated vulnerability scanning services. If we have time, we will also implement OWASP ZAP automated scanning using a Dockerized version of ZAP within the project. We will also aim to fix all critical vulnerabilities found during these scans.
3. Implement Automated Security Testing Pipeline (FEA405)
We configured the automated security testing pipeline via Gitlab's security dashboard. Every time changes are detected to the frontend and backend repositories, the pipeline will run automatically and scan the source code for vulnerabilities before displaying the results in the security dashboard. This meant setting up runners on the servers for SAST scanning and configuring the Gitlab yaml file to include the scans in the CI/CD pipeline.
4. Protect Application with Web Application Firewall (FEA409)
For setting up a web application firewall, we decided to implement a Dockerized version of the Nginx reverse proxy utilizing the ModSecurity WAF module. This has been set up so that all traffic to the server will be first directed to Nginx and analyzed by the ModSecurity firewall rules, before being proxied to the Tukko application itself. This acts as an additional layer of security between Tukko and the servers, and has been configured to prevent the OWASP top 10 most common web vulnerabilities, including SQL injection attacks and XSS.
In the example below, we tried sending a curl request resembling a SQL injection to the server, but it was automatically blocked by ModSecurity as can be seen by the "403 Forbidden" message received in response:
Further Improvements we Want to Implement
1. Implement Web App Accessibility Measures (FEA105)
2. Localization for Swedish (FEA304)
3. Localization for Norwegian (FEA305)
4. Enforce Secure Coding Practices (FEA404)
5. Harden All the Containers (FEA406)
What could and should be tested?
To ensure the quality and reliability of your web application, you could conduct thorough testing across various areas. In terms of dark mode functionality, you could test the functionality by toggling between light and dark modes across different devices and screen sizes to ensure consistent appearance and readability.
We would love your feedback on the feature color contrast enhancements, you could validate by using tools like Color Contrast Analyzers to ensure compliance with WCAG standards. Additionally, you should ensure that the web application is responsive across different devices and screen resolutions.
Security testing includes vulnerability scanning to detect and remediate any known vulnerabilities, and penetration testing to identify potential exploits. Furthermore, access control testing ensures that only authorized users have access to specific features and resources, and finally Web Application Firewall (WAF) testing involves simulating various web-based attacks to ensure effective protection.
Future testing
Localization testing involves verifying language translations, date formats, and currency symbols to ensure a seamless user experience for Swedish and Norwegian users. Lastly, for accessibility measures, you could test with screen readers to ensure all content is accessible and navigable using keyboard shortcuts.
About our technical implementation and focus areas
Our team: SYNERGY
Our team embodies a versatile skill set, with each member proficient in various areas crucial for project success. Andreas leads the team with a strong focus on documentation, communication, and problem-solving, ensuring alignment and success within project parameters. Noora, leveraging her cybersecurity expertise, spearheads security efforts by analyzing risks, establishing protocols, and ensuring compliance. Niko, while aspiring in AI, takes the lead in testing strategies, collaborating with developers to ensure software perfection. Ashutosh brings contagious enthusiasm for coding and guides the team in crafting robust software solutions, aligning development with project goals. Markus, with his ICT background, optimizes operations by managing infrastructure, deployment, and system maintenance. Ali, with adaptability and quick-learning skills, efficiently handles general tasks including documentation, communication, scheduling, and development coordination. Together, our dynamic team collaborates across focus areas to drive project success.