{"id":20186112,"url":"https://github.com/leolanese/web-workers-interceptors","last_synced_at":"2026-06-13T09:01:32.042Z","repository":{"id":220491691,"uuid":"668698107","full_name":"leolanese/web-workers-interceptors","owner":"leolanese","description":"Vanilla JS Web Workers","archived":false,"fork":false,"pushed_at":"2024-02-04T16:40:49.000Z","size":64,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-13T03:33:22.843Z","etag":null,"topics":["intercept-fetch","interceptors","javascript","service-workers","web-workers"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leolanese.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-07-20T11:53:59.000Z","updated_at":"2024-12-18T11:58:20.000Z","dependencies_parsed_at":"2024-02-02T11:28:40.823Z","dependency_job_id":"1757f2f1-7a75-4643-9f0b-fc2faebbbde5","html_url":"https://github.com/leolanese/web-workers-interceptors","commit_stats":null,"previous_names":["leolanese/web-workers-interceptors"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/leolanese/web-workers-interceptors","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2Fweb-workers-interceptors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2Fweb-workers-interceptors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2Fweb-workers-interceptors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2Fweb-workers-interceptors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leolanese","download_url":"https://codeload.github.com/leolanese/web-workers-interceptors/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2Fweb-workers-interceptors/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34278154,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-13T02:00:06.617Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["intercept-fetch","interceptors","javascript","service-workers","web-workers"],"created_at":"2024-11-14T03:16:01.902Z","updated_at":"2026-06-13T09:01:32.001Z","avatar_url":"https://github.com/leolanese.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web-Workers with Interceptor\n\n\u003e Using vanilla JS to mount a Service Web-Worker that allow us to intercept 403, modify headers and delete cookies/localStorage\n\n\n\n# Communication Flow in Service Worker-based Application\n\nInteraction Flow between Site, main.js, interceptor-worker.js, and Serve\n\n## Interaction Flow between Site, main.js, interceptor-worker.js, and Server\n\n### `main.js` \nThe 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\n\n### `interceptor-worker.js`\nThis 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)\n\n\n\u003cbr /\u003e\n\n\n| Step | Site/User | main.js | interceptor-worker.js | Server |\n|------|-----------|---------|-----------------------|--------|\n| 1    | User opens the web page | Window load event is triggered |  |  |\n| 2    |  | Checks if service worker is available |  |  |\n| 3    |  | Service worker registration is initiated |  |  |\n| 4    |  |  | Service worker activates and claims clients |  |\n| 5    | User triggers a fetch request (for login or other services) |  |  |  |\n| 6    |  |  | Intercept fetch event, determine the request type and process accordingly |  |\n| 7    |  |  | If it's a login request, fetch it as is from the server | Server receives login request |\n| 8    |  |  |  | Server processes login request and returns response |\n| 9    |  |  | Extract and store sessionId from response |  |\n| 10   | User triggers another fetch request (for other services) |  |  |  |\n| 11   |  |  | Intercept fetch event, add Authorization header and potentially replace `{sessionId}` in URL, then fetch this modified request | Server receives modified request |\n| 12   |  |  |  | Server processes the request and returns a response |\n| 13   |  |  | Check response status. If status is `401` and sessionId exists, post message to client |  |\n| 14   |  | Receive message from service worker and handle accordingly (eg., delete sessionId if status is 401) |  |  |\n\n\n---\n\n## Reverse Proxy\n\n```js\n// install express + http-proxy-middleware\nnpm install express http-proxy-middleware --save\n```\n\n```js\nconst express = require('express');\nconst { createProxyMiddleware } = require('http-proxy-middleware');\n\nconst app = express();\n\napp.use('/services', createProxyMiddleware({ \n  target: 'https://test.services.com/services', \n  changeOrigin: true \n}));\n\napp.listen(3000);\n```\n\n```js\n// package.json\n\"reverse-proxy\": \"node server.js\"\n```\n\n// TODO: Update it with the back-end API target\n\u003e now your app is running on: `localhost:8080`, so we have to update your request to: `http://localhost:8080/services/.../login`\n\n\n---\n### :100: \u003ci\u003eThanks!\u003c/i\u003e\n#### Now, don't be an stranger. Let's stay in touch!\n\n\u003ca href=\"https://github.com/leolanese\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n  \u003cimg src=\"https://scastiel.dev/api/image/leolanese?dark\u0026removeLink\" alt=\"leolanese’s GitHub image\" width=\"600\" height=\"314\" /\u003e\n\u003c/a\u003e\n\n##### :radio_button: Linkedin: \u003ca href=\"https://www.linkedin.com/in/leolanese/\" target=\"_blank\"\u003eLeoLanese\u003c/a\u003e\n##### :radio_button: Twitter: \u003ca href=\"https://twitter.com/LeoLanese\" target=\"_blank\"\u003e@LeoLanese\u003c/a\u003e\n##### :radio_button: Portfolio: \u003ca href=\"https://www.leolanese.com\" target=\"_blank\"\u003ewww.leolanese.com\u003c/a\u003e\n##### :radio_button: DEV.to: \u003ca href=\"https://www.dev.to/leolanese\" target=\"_blank\"\u003edev.to/leolanese\u003c/a\u003e\n##### :radio_button: Blog: \u003ca href=\"https://www.leolanese.com/blog\" target=\"_blank\"\u003eleolanese.com/blog\u003c/a\u003e\n##### :radio_button: Questions / Suggestion / Recommendation: developer@leolanese.com\n\n## Servers up and running (this works only under VPN validation)\n\nRun `npm run reverse-proxy` for Express server which has the reverse proxy setup (server.js)\nRun `npm run server` for Angular application at `http://192.168.1.127:8080`\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleolanese%2Fweb-workers-interceptors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleolanese%2Fweb-workers-interceptors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleolanese%2Fweb-workers-interceptors/lists"}