https://github.com/leolanese/web-workers-interceptors
Vanilla JS Web Workers
https://github.com/leolanese/web-workers-interceptors
intercept-fetch interceptors javascript service-workers web-workers
Last synced: 5 days ago
JSON representation
Vanilla JS Web Workers
- Host: GitHub
- URL: https://github.com/leolanese/web-workers-interceptors
- Owner: leolanese
- Created: 2023-07-20T11:53:59.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-04T16:40:49.000Z (over 2 years ago)
- Last Synced: 2026-01-13T03:33:22.843Z (5 months ago)
- Topics: intercept-fetch, interceptors, javascript, service-workers, web-workers
- Language: JavaScript
- Homepage:
- Size: 62.5 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Web-Workers with Interceptor
> Using vanilla JS to mount a Service Web-Worker that allow us to intercept 403, modify headers and delete cookies/localStorage
# Communication Flow in Service Worker-based Application
Interaction Flow between Site, main.js, interceptor-worker.js, and Serve
## Interaction Flow between Site, main.js, interceptor-worker.js, and Server
### `main.js`
The main is the main thread of the JS runtime in the browser. It is responsible for registering the service worker in the client's browser. It also sets up a listener for messages coming from the service worker and handles them and executing most of the JavaScript code in your web application, including user interactions, DOM manipulation, and rendering updates
### `interceptor-worker.js`
This service worker script acts as a persistent intermediary between your application and the network. It controls the way network requests are handled and responses are processed, with the ability to intercept and modify them according to specific logic defined. It run in the background, separate from a webpage, and are not directly attached to the Document Object Model (DOM)
| Step | Site/User | main.js | interceptor-worker.js | Server |
|------|-----------|---------|-----------------------|--------|
| 1 | User opens the web page | Window load event is triggered | | |
| 2 | | Checks if service worker is available | | |
| 3 | | Service worker registration is initiated | | |
| 4 | | | Service worker activates and claims clients | |
| 5 | User triggers a fetch request (for login or other services) | | | |
| 6 | | | Intercept fetch event, determine the request type and process accordingly | |
| 7 | | | If it's a login request, fetch it as is from the server | Server receives login request |
| 8 | | | | Server processes login request and returns response |
| 9 | | | Extract and store sessionId from response | |
| 10 | User triggers another fetch request (for other services) | | | |
| 11 | | | Intercept fetch event, add Authorization header and potentially replace `{sessionId}` in URL, then fetch this modified request | Server receives modified request |
| 12 | | | | Server processes the request and returns a response |
| 13 | | | Check response status. If status is `401` and sessionId exists, post message to client | |
| 14 | | Receive message from service worker and handle accordingly (eg., delete sessionId if status is 401) | | |
---
## Reverse Proxy
```js
// install express + http-proxy-middleware
npm install express http-proxy-middleware --save
```
```js
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();
app.use('/services', createProxyMiddleware({
target: 'https://test.services.com/services',
changeOrigin: true
}));
app.listen(3000);
```
```js
// package.json
"reverse-proxy": "node server.js"
```
// TODO: Update it with the back-end API target
> now your app is running on: `localhost:8080`, so we have to update your request to: `http://localhost:8080/services/.../login`
---
### :100: Thanks!
#### Now, don't be an stranger. Let's stay in touch!
##### :radio_button: Linkedin: LeoLanese
##### :radio_button: Twitter: @LeoLanese
##### :radio_button: Portfolio: www.leolanese.com
##### :radio_button: DEV.to: dev.to/leolanese
##### :radio_button: Blog: leolanese.com/blog
##### :radio_button: Questions / Suggestion / Recommendation: developer@leolanese.com
## Servers up and running (this works only under VPN validation)
Run `npm run reverse-proxy` for Express server which has the reverse proxy setup (server.js)
Run `npm run server` for Angular application at `http://192.168.1.127:8080`