Practical Exercise: Profile

Task

Develop a secure feature in Angular that handles form submissions for user profile updates, ensuring it is protected against CSRF vulnerabilities.

Instructions

Create an Angular feature where users can update their profile information, including email and password. This feature involves building a form component for user input and a service to simulate form submission.

1. UserProfileFormComponent: Build a form that allows users to input their email and password for updates. Include a submit button that saves the updated profile information to localStorage, simulating a backend update operation.

2. ProfileService: Simulate a service that handles the form submission, ensuring the use of CSRF protection techniques, such as including a CSRF token in the request header.

3. Display updated profiles: Show the updated profile information in a ProfileListComponent, ensuring all data displayed is securely handled to prevent CSRF vulnerabilities.

Ensure the entire form submission process is safeguarded against CSRF attacks by incorporating Angular’s built-in security features and demonstrating how to work with CSRF tokens for secure HTTP communications.

Coding Playground

Here is the code structure: