Add Browser Push Notification Support

ajaygandecha commented 9 months ago

This ticket focuses on implementing the client side concern of leveling push notifications to the user through the browser. Safari and Chrome have push notification support.

Stories and Use Cases

Some immediate use cases of implementing push notification support would be:

As a Student, I want to be able to be notified if my XL reservation is ending soon so that I am made aware and can extend if needed.
As a CSXL Ambassador, I want to be notified of XL Checkins so that if I am on another tab, I can easily see that a user is trying to check in to the XL.

Some future use cases of implementing push notification support would be:

As a Student, I want to be notified when I receive a friend request so that I can approve it.
As a Student, I want to be notified if a group mate created a reservation for me on my behalf so that I am made aware.
As a Student, I want to be notified if my office hours ticket has been called so I can go to the office hour room.
As a Teaching Assistant, I want to be notified of tickets entering the office hour queue so that I can call the ticket.

KrisJordan commented 9 months ago

I was just reading about Web push trying to get an understanding of what it takes. It looks reasonably involved, but would be great to figure out how to bring into the stack!

krohan03 commented 6 months ago

XSS/CSRF Protections

As far as I am aware, we should already be protected against both XSS and CSRF attacks, which we need to be protected against according to the MDN Push Notifications API. There may be things that I missed that indicate that additional work is necessary for CSRF/XSS protection, so please take this with a grain of salt.

Cross-Site Request Forgery (CSRF)

Because the CSXL uses a bearer token system through local storage instead of Cookies, we should be protected from CSRF attacks. "Local Storage is vulnerable to XSS attacks, but not CSRF attacks. Local Storage is only accessible on the same domain" (Local Storage vs Cookies).

Cross-Site Scripting (XSS)

"There are no easy ways to prevent local storage data from being stolen using XSS attacks. Unlike cookies, there is no attribute that can prevent local storage from being accessible via javascript (and if there was, it would defeat the entire purpose of local storage)" (Local Storage vs Cookies).

While local storage methods are susceptible to XSS attacks, Angular has some built-in protections against script injection in inputs. Just to be careful, all inputs for the CSXL should ensure that user inputs are validated and/or are not directly displayed in a way that causes them to be run as code.

unc-csxl / csxl.unc.edu