[PR #5865] feat(cookies): Auto-extract and persist cookies from API responses #5382

New issue

Open

opened 2026-03-17 02:50:09 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:50:09 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/5865
Author: @yoga-ford
Created: 2/11/2026
Status: 🔄 Open

Base: main ← Head: FOSS-auto-cookie-management

📝 Commits (4)

fbc8800 updated automatic cookie management logic to align with the recent branch newchanges
3ae5abe feat: add cookie persistence to cookie jar service
dd899c8 fix(common): cookie deletion not working for GET requests
96e2164 Issue #5864 - PR-5865, Fixed security vulnerability reported by cubic as PR review

📊 Changes

7 files changed (+540 additions, -14 deletions)

View changed files

📝 packages/hoppscotch-common/locales/en.json (+1 -0)
📝 packages/hoppscotch-common/src/components.d.ts (+3 -0)
➕ packages/hoppscotch-common/src/components/http/Cookies.vue (+185 -0)
📝 packages/hoppscotch-common/src/components/http/RequestOptions.vue (+23 -0)
📝 packages/hoppscotch-common/src/helpers/RequestRunner.ts (+15 -2)
📝 packages/hoppscotch-common/src/helpers/kernel/rest/response.ts (+33 -1)
📝 packages/hoppscotch-common/src/services/cookie-jar.service.ts (+280 -11)

📄 Description

Closes #5864

Summary

This PR implements automatic cookie management for Hoppscotch Desktop, enabling seamless handling of HTTP cookies across requests with persistent local storage. Cookies received from API responses are automatically captured, stored, and reused in subsequent requests to matching domains, eliminating the need for manual cookie management.

Problem Statement

Currently, users must manually copy cookies from response headers and add them to subsequent requests when testing APIs that require session management. This creates significant friction when:

Testing multi-step authentication flows
Working with session-based APIs
Testing microservices across multiple environments
Resuming work after closing the application (cookies are lost)

Multiple users have reported this issue in #1383 (comments from @LMCom, @rishabmahesh) and #5063, indicating this is a real pain point.

What's Changed

Automatic Cookie Extraction: Parse Set-Cookie headers from API responses automatically
Domain-Based Storage: Store cookies in a Map structure organized by domain for efficient lookup
RFC 6265 Compliance: Parse cookies using set-cookie-parser-es library following HTTP cookie standards
Local Storage Persistence: Automatically save cookie jar to localStorage with Vue reactivity watchers
Automatic Cookie Injection: Include matching cookies in subsequent requests to the same domain
Cookie Deletion Fix: Fixed domain matching bug that prevented cookie deletion in GET requests
Vue Reactivity Enhancement: Ensure cookie jar updates trigger reactivity by creating new Map/Array references

Files Modified

Core Implementation

packages/hoppscotch-common/src/services/cookie-jar.service.ts (Modified)
- Core cookie jar service with reactive Map storage
- Methods: parseSetCookieString(), bulkApplyCookiesToDomain(), getCookiesForURL(), removeCookie()
- Local storage persistence using Vue watch() with deep: true
- Fixed cookie deletion with proper domain matching and Vue reactivity
packages/hoppscotch-common/src/helpers/kernel/rest/response.ts (Modified)
- Automatic cookie extraction from API response headers
- Parses Set-Cookie headers using set-cookie-parser-es
- Stores extracted cookies in cookie jar by domain
packages/hoppscotch-common/src/helpers/RequestRunner.ts (Modified)
- Automatic cookie injection into outgoing requests
- Retrieves matching cookies from jar based on request URL domain
- Formats cookies as Cookie header for HTTP requests

UI Components

packages/hoppscotch-common/src/components/http/Cookies.vue (Added - NEW)
- New Vue component for cookie management UI
- Displays cookies grouped by domain
- Features: view cookies, delete individual cookies, clear all for domain
- Shows cookie details: name, value, domain, path, expiration, flags
- Fixed clearAllCookies() with proper domain matching logic
packages/hoppscotch-common/src/components/http/RequestOptions.vue (Modified)
- Integrated Cookies component into request options panel
- Added cookies tab/section alongside headers, parameters, etc.

Configuration

packages/hoppscotch-common/locales/en.json (Modified)
- Added i18n strings for cookie management UI
- Labels: "Cookies", "Domain", "Clear All", "Delete Cookie", etc.
- Toast messages for success/error states
packages/hoppscotch-common/src/components.d.ts (Modified)
- TypeScript declarations for new Cookies.vue component
- Auto-generated component type definitions

Testing Scenarios

✅ Login Flow Testing: Session cookies from login responses automatically available for subsequent requests
✅ Multi-Domain Testing: Cookies properly isolated by domain
✅ Persistence Across Sessions: Cookie jar restored on application restart
✅ Cookie Deletion: Both individual cookie deletion and domain-level clearing work correctly
✅ Domain Matching: Handles .example.com and www.example.com variations properly

Notes to Reviewers

Why This Isn't a Duplicate of #1383: Issue #1383 addressed basic cookie manager UI (manual management). This PR implements automatic extraction and persistence - a new capability that addresses user requests in #1383 comments and #5063.
Backwards Compatibility: This feature is additive and doesn't break existing manual cookie management workflows.
Privacy Consideration: Cookies are stored in local storage, not synced to any backend. This aligns with desktop app privacy expectations.
Vue Reactivity Pattern: The cookie deletion fix creates entirely new Map/Array instances to ensure Vue's reactivity system detects changes. This follows Vue 3 best practices for reactive collections.
Browser vs Desktop: This implementation is specifically for Hoppscotch Desktop where we have full cookie control. The web version has browser security limitations that prevent similar functionality.

#1383 - Original cookie support request (manual management - implemented)
#5063 - Request for cookie persistence (marked as duplicate)
#4089 - Cookie manager for web app (different platform)

Ready for Review ✨

Summary by cubic

Automatically capture cookies from API responses, persist them locally, and reuse them in future requests in Hoppscotch Desktop. Adds a simple cookies tab to view and manage domain cookies, improving multi-step and session-based API testing.

New Features
- Auto-extract Set-Cookie headers and store cookies by domain.
- Persist the cookie jar in localStorage and restore on app start.
- Auto-inject matching cookies into outgoing requests as a Cookie header.
- New Cookies tab in Request Options with per-domain view, delete, and clear; shows active cookie count.
- RFC 6265 parsing via set-cookie-parser-es; supports domain patterns like .example.com.
Bug Fixes
- Fixed domain matching (including leading-dot and subdomain boundaries) so deleting and clearing cookies works reliably.
- Ensured Vue reactivity by replacing Map/Array references on updates.
- Merged script-updated cookies without duplicates (name+path).
- Addressed a security issue in cookie handling during extraction and injection.

^{Written for commit 96e2164dfa. Summary will update on new commits.}

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/5865 **Author:** [@yoga-ford](https://github.com/yoga-ford) **Created:** 2/11/2026 **Status:** 🔄 Open **Base:** `main` ← **Head:** `FOSS-auto-cookie-management` --- ### 📝 Commits (4) - [`fbc8800`](https://github.com/hoppscotch/hoppscotch/commit/fbc88001d2e2cb5bd27b56380f553ef934004cac) updated automatic cookie management logic to align with the recent branch newchanges - [`3ae5abe`](https://github.com/hoppscotch/hoppscotch/commit/3ae5abed0334ab8bd81fc35585e22524ce71840c) feat: add cookie persistence to cookie jar service - [`dd899c8`](https://github.com/hoppscotch/hoppscotch/commit/dd899c80ad9bf5fa6ef5efffb6b14baf38d81e0e) fix(common): cookie deletion not working for GET requests - [`96e2164`](https://github.com/hoppscotch/hoppscotch/commit/96e2164dfa160147180be1e1d6242a585dacddf2) Issue #5864 - PR-5865, Fixed security vulnerability reported by cubic as PR review ### 📊 Changes **7 files changed** (+540 additions, -14 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/locales/en.json` (+1 -0) 📝 `packages/hoppscotch-common/src/components.d.ts` (+3 -0) ➕ `packages/hoppscotch-common/src/components/http/Cookies.vue` (+185 -0) 📝 `packages/hoppscotch-common/src/components/http/RequestOptions.vue` (+23 -0) 📝 `packages/hoppscotch-common/src/helpers/RequestRunner.ts` (+15 -2) 📝 `packages/hoppscotch-common/src/helpers/kernel/rest/response.ts` (+33 -1) 📝 `packages/hoppscotch-common/src/services/cookie-jar.service.ts` (+280 -11) </details> ### 📄 Description # Automatic Cookie Management with Local Storage Persistence Closes #5864 ## Summary This PR implements automatic cookie management for Hoppscotch Desktop, enabling seamless handling of HTTP cookies across requests with persistent local storage. Cookies received from API responses are automatically captured, stored, and reused in subsequent requests to matching domains, eliminating the need for manual cookie management. ## Problem Statement Currently, users must manually copy cookies from response headers and add them to subsequent requests when testing APIs that require session management. This creates significant friction when: - Testing multi-step authentication flows - Working with session-based APIs - Testing microservices across multiple environments - Resuming work after closing the application (cookies are lost) Multiple users have reported this issue in #1383 (comments from @LMCom, @rishabmahesh) and #5063, indicating this is a real pain point. ## What's Changed - [x] **Automatic Cookie Extraction**: Parse `Set-Cookie` headers from API responses automatically - [x] **Domain-Based Storage**: Store cookies in a Map structure organized by domain for efficient lookup - [x] **RFC 6265 Compliance**: Parse cookies using `set-cookie-parser-es` library following HTTP cookie standards - [x] **Local Storage Persistence**: Automatically save cookie jar to `localStorage` with Vue reactivity watchers - [x] **Automatic Cookie Injection**: Include matching cookies in subsequent requests to the same domain - [x] **Cookie Deletion Fix**: Fixed domain matching bug that prevented cookie deletion in GET requests - [x] **Vue Reactivity Enhancement**: Ensure cookie jar updates trigger reactivity by creating new Map/Array references ## Files Modified ### Core Implementation 1. **`packages/hoppscotch-common/src/services/cookie-jar.service.ts`** (Modified) - Core cookie jar service with reactive Map storage - Methods: `parseSetCookieString()`, `bulkApplyCookiesToDomain()`, `getCookiesForURL()`, `removeCookie()` - Local storage persistence using Vue `watch()` with `deep: true` - Fixed cookie deletion with proper domain matching and Vue reactivity 2. **`packages/hoppscotch-common/src/helpers/kernel/rest/response.ts`** (Modified) - Automatic cookie extraction from API response headers - Parses `Set-Cookie` headers using `set-cookie-parser-es` - Stores extracted cookies in cookie jar by domain 3. **`packages/hoppscotch-common/src/helpers/RequestRunner.ts`** (Modified) - Automatic cookie injection into outgoing requests - Retrieves matching cookies from jar based on request URL domain - Formats cookies as `Cookie` header for HTTP requests ### UI Components 4. **`packages/hoppscotch-common/src/components/http/Cookies.vue`** (Added - NEW) - New Vue component for cookie management UI - Displays cookies grouped by domain - Features: view cookies, delete individual cookies, clear all for domain - Shows cookie details: name, value, domain, path, expiration, flags - Fixed `clearAllCookies()` with proper domain matching logic 5. **`packages/hoppscotch-common/src/components/http/RequestOptions.vue`** (Modified) - Integrated Cookies component into request options panel - Added cookies tab/section alongside headers, parameters, etc. ### Configuration 6. **`packages/hoppscotch-common/locales/en.json`** (Modified) - Added i18n strings for cookie management UI - Labels: "Cookies", "Domain", "Clear All", "Delete Cookie", etc. - Toast messages for success/error states 7. **`packages/hoppscotch-common/src/components.d.ts`** (Modified) - TypeScript declarations for new Cookies.vue component - Auto-generated component type definitions ## Testing Scenarios ✅ **Login Flow Testing**: Session cookies from login responses automatically available for subsequent requests ✅ **Multi-Domain Testing**: Cookies properly isolated by domain ✅ **Persistence Across Sessions**: Cookie jar restored on application restart ✅ **Cookie Deletion**: Both individual cookie deletion and domain-level clearing work correctly ✅ **Domain Matching**: Handles `.example.com` and `www.example.com` variations properly ## Notes to Reviewers 1. **Why This Isn't a Duplicate of #1383**: Issue #1383 addressed basic cookie manager UI (manual management). This PR implements **automatic** extraction and persistence - a new capability that addresses user requests in #1383 comments and #5063. 2. **Backwards Compatibility**: This feature is additive and doesn't break existing manual cookie management workflows. 3. **Privacy Consideration**: Cookies are stored in local storage, not synced to any backend. This aligns with desktop app privacy expectations. 4. **Vue Reactivity Pattern**: The cookie deletion fix creates entirely new Map/Array instances to ensure Vue's reactivity system detects changes. This follows Vue 3 best practices for reactive collections. 5. **Browser vs Desktop**: This implementation is specifically for Hoppscotch Desktop where we have full cookie control. The web version has browser security limitations that prevent similar functionality. ## Related Issues - #1383 - Original cookie support request (manual management - implemented) - #5063 - Request for cookie persistence (marked as duplicate) - #4089 - Cookie manager for web app (different platform) --- **Ready for Review** ✨  --- ## Summary by cubic Automatically capture cookies from API responses, persist them locally, and reuse them in future requests in Hoppscotch Desktop. Adds a simple cookies tab to view and manage domain cookies, improving multi-step and session-based API testing. - **New Features** - Auto-extract Set-Cookie headers and store cookies by domain. - Persist the cookie jar in localStorage and restore on app start. - Auto-inject matching cookies into outgoing requests as a Cookie header. - New Cookies tab in Request Options with per-domain view, delete, and clear; shows active cookie count. - RFC 6265 parsing via set-cookie-parser-es; supports domain patterns like .example.com. - **Bug Fixes** - Fixed domain matching (including leading-dot and subdomain boundaries) so deleting and clearing cookies works reliably. - Ensured Vue reactivity by replacing Map/Array references on updates. - Merged script-updated cookies without duplicates (name+path). - Addressed a security issue in cookie handling during extraction and injection. <sup>Written for commit 96e2164dfa160147180be1e1d6242a585dacddf2. Summary will update on new commits.</sup>  --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>