feat: Add responsive widths config endpoint and CORS iframe processing to core by bhokaremoin · Pull Request #2121 · percy/cli

bhokaremoin · 2026-02-26T19:44:08Z

Overview

This PR introduces two major enhancements to the Percy CLI core package:

A new /percy/widths-config endpoint for responsive snapshot capture with mobile device height support
CORS iframe processing logic moved from SDK-specific implementations to core for reusability across all SDKs

Changes

1. Responsive Widths Configuration Endpoint

New API Endpoint: GET /percy/widths-config

Returns computed widths list for responsive snapshot capture
Accepts optional widths query parameter (e.g., ?widths=375,1280)
Merges three width sources intelligently:
- Mobile device widths: Includes height information from deviceDetails
- User-passed widths: From query parameters (without heights)
- Config widths: Fallback from Percy configuration (without heights)
Returns deduplicated, sorted array of width objects
Mobile widths are prioritized to preserve height information when duplicates exist

Example Response:

{
  "success": true,
  "widths": [
    { "width": 375 },
    { "width": 390, "height": 844 },
    { "width": 428, "height": 926 },
    { "width": 1920 }
  ]
}

SDK Integration:

New getResponsiveWidths() function in @percy/sdk-utils
All SDKs can now fetch computed widths with a single API call
Graceful error handling returns empty array on failure

2. CORS Iframe Processing (Moved from Playwright SDK)

Centralized CORS iframe handling in core:

Previously, CORS iframe processing was implemented in @percy/playwright
Now moved to @percy/core for reusability across all SDKs
Processes corsIframes array in DOM snapshots before validation

Processing Logic:

Extracts iframe snapshots and resources from corsIframes array
Creates HTML resources for each iframe with text/html MIME type
Appends percy_width query parameter to iframe URLs for responsive context
Merges iframe resources into main snapshot resources
Updates iframe src attributes in HTML with processed URLs
Cleans up corsIframes property after processing

New Utility Functions:

processCorsIframes() - Handles single object or array of DOM snapshots
processCorsIframesInDomSnapshot() - Processes CORS iframes in single snapshot
appendUrlSearchParam() - Safely appends query parameters to URLs

Benefits:

✅ All SDKs can now handle CORS iframes without duplicating logic
✅ Consistent behavior across Playwright, Selenium, Puppeteer, etc.
✅ Centralized maintenance and testing

Files Changed

Core Package

packages/core/src/api.js - New /percy/widths-config endpoint
packages/core/src/percy.js - CORS iframe processing integration
packages/core/src/utils.js - CORS processing & width computation utilities

SDK Utils Package

packages/sdk-utils/src/get-responsive-widths.js - New utility (added)
packages/sdk-utils/src/index.js - Export new function

Tests

packages/core/test/api.test.js - 11 tests for widths-config endpoint
packages/core/test/snapshot.test.js - 7 tests for CORS iframe processing
packages/core/test/utils.test.js - 37 tests for utility functions
packages/sdk-utils/test/index.test.js - 11 tests for getResponsiveWidths

Test Coverage

✅ 48 new test cases added
✅ CORS iframe processing (single, multiple, arrays, edge cases)
✅ Responsive widths computation (deduplication, sorting, priorities)
✅ URL parameter handling (append, update, invalid URLs)
✅ SDK integration (error handling, response parsing, edge cases)

Breaking Changes

None - This is purely additive functionality.

Related Issues

PPLT-4949

- Add GET /percy/widths-config endpoint to compute responsive widths - Implement computeResponsiveWidths() in core utils for width/height calculation - Add getResponsiveWidths() SDK method to fetch computed widths - Mobile device widths include height, other widths are height-agnostic - Returns widths sorted in ascending order

- Add processCorsIframes and processCorsIframesInDomSnapshot utilities in utils.js - Add appendUrlSearchParam utility for adding query parameters to URLs - Integrate CORS iframe processing in snapshot method before validation - Process iframe resources and update HTML src attributes with width-aware URLs - Support both single domSnapshot object and array of domSnapshots

packages/core/src/utils.js

…nce its common

Copilot

Pull request overview

Adds core support for responsive-width computation (including mobile device height metadata) and centralizes CORS iframe snapshot processing so all SDKs can reuse the same logic.

Changes:

Introduces GET /percy/widths-config to compute a merged, deduped, sorted list of responsive widths (preserving mobile heights where applicable).
Moves CORS iframe extraction/rewriting into @percy/core snapshot flow via new utility helpers.
Adds getResponsiveWidths() to @percy/sdk-utils plus extensive tests for both features.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/core/src/api.js	Adds `/percy/widths-config` endpoint that returns computed responsive widths.
packages/core/src/utils.js	Adds URL param helper, CORS iframe processing utilities, and responsive-width computation helper.
packages/core/src/percy.js	Hooks CORS iframe processing into snapshot flow before validation.
packages/sdk-utils/src/get-responsive-widths.js	Adds SDK helper to call `/percy/widths-config` and return computed widths.
packages/sdk-utils/src/index.js	Exports `getResponsiveWidths` from sdk-utils.
packages/core/test/api.test.js	Tests for `/percy/widths-config` behavior across multiple scenarios.
packages/core/test/utils.test.js	Unit tests for `computeResponsiveWidths`, URL param helper, and CORS iframe processing.
packages/core/test/snapshot.test.js	Integration tests ensuring snapshots process CORS iframes and upload resources.
packages/sdk-utils/test/index.test.js	Tests sdk-utils `getResponsiveWidths()` request formatting and failure handling.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/core/src/api.js

packages/core/src/utils.js

bhokaremoin · 2026-02-28T11:21:34Z

@copilot open a new pull request to apply changes based on the comments in this thread

Copilot · 2026-02-28T11:21:40Z

@bhokaremoin I've opened a new pull request, #2123, to work on those changes. Once the pull request is ready, I'll request review from you.

Copilot

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/core/src/utils.js

packages/sdk-utils/src/get-responsive-widths.js

Copilot · 2026-02-28T17:15:25Z

@bhokaremoin I've opened a new pull request, #2124, to work on those changes. Once the pull request is ready, I'll request review from you.

Copilot · 2026-02-28T17:16:02Z

@bhokaremoin I've opened a new pull request, #2125, to work on those changes. Once the pull request is ready, I'll request review from you.

Copilot · 2026-02-28T17:16:34Z

@bhokaremoin I've opened a new pull request, #2126, to work on those changes. Once the pull request is ready, I'll request review from you.

…sInDomSnapshot (#2124) * Initial plan * fix: escape percyElementId before using in RegExp to prevent regex injection Co-authored-by: bhokaremoin <75439850+bhokaremoin@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: bhokaremoin <75439850+bhokaremoin@users.noreply.github.com>

packages/core/src/utils.js

* Initial plan * Use Array.isArray check in getResponsiveWidths to ensure stable array return type Co-authored-by: bhokaremoin <75439850+bhokaremoin@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: bhokaremoin <75439850+bhokaremoin@users.noreply.github.com>

…malformed input (#2125) * Initial plan * Add validation for malformed corsIframes entries in processCorsIframesInDomSnapshot Co-authored-by: bhokaremoin <75439850+bhokaremoin@users.noreply.github.com> * adding validation for widths as well --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: bhokaremoin <75439850+bhokaremoin@users.noreply.github.com> Co-authored-by: bhokaremoin <bhokaremoin@gmail.com>

Copilot

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/core/src/utils.js

packages/sdk-utils/src/get-responsive-widths.js

Copilot

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/core/src/api.js

Copilot · 2026-02-28T19:30:25Z

@bhokaremoin I've opened a new pull request, #2127, to work on those changes. Once the pull request is ready, I'll request review from you.

packages/core/src/utils.js

packages/sdk-utils/src/get-responsive-widths.js

packages/core/src/percy.js

…nsiveWidths

bhokaremoin · 2026-03-03T12:22:10Z

packages/core/src/config.js

                type: 'array',
                items: { type: 'string' }
+              },
+              corsIframes: {


had to add it here, since post validate we can do domSnapshot.corsIframe.
Tried get it processed before validation, then faced the issue where for Js its domSnapshot and Python its dom_snapshot. adding handling for both didn't make sense

packages/core/src/utils.js

bhokaremoin added 5 commits February 26, 2026 13:44

adding unit tests

31eb593

fixing test coverage

a20e477

fixing test coverage

e4a32e8

github-advanced-security bot found potential problems Feb 26, 2026

View reviewed changes

packages/core/src/utils.js Fixed Show fixed Hide fixed

bhokaremoin added 4 commits February 27, 2026 02:01

adding tests for cors iframes functionality

7dc5b43

moving creatating of iframe resource object logic to CLI from sdk, si…

3a46b09

…nce its common

fixing test

c5073d8

adding nosemgrep comment for the regex error

b2cafcf

bhokaremoin changed the title ~~Pplt 4949 add cors iframe handling and multi dom width config~~ feat: Add responsive widths config endpoint and CORS iframe processing to core Feb 28, 2026

bhokaremoin marked this pull request as ready for review February 28, 2026 11:15

bhokaremoin requested a review from a team as a code owner February 28, 2026 11:15

bhokaremoin requested review from Shivanshu-07, Copilot and pankaj443 February 28, 2026 11:15

Copilot started reviewing on behalf of bhokaremoin February 28, 2026 11:16 View session

Copilot AI reviewed Feb 28, 2026

View reviewed changes

packages/core/src/api.js Show resolved Hide resolved

packages/core/src/utils.js Outdated Show resolved Hide resolved

Copilot AI mentioned this pull request Feb 28, 2026

fix: Validate width range and escape percyElementId in RegExp for widths-config endpoint #2123

Closed

bhokaremoin requested a review from Copilot February 28, 2026 17:09

Copilot started reviewing on behalf of bhokaremoin February 28, 2026 17:09 View session

Copilot AI reviewed Feb 28, 2026

View reviewed changes

packages/core/src/utils.js Show resolved Hide resolved

packages/core/src/utils.js Show resolved Hide resolved

packages/sdk-utils/src/get-responsive-widths.js Show resolved Hide resolved

Copilot AI mentioned this pull request Feb 28, 2026

Fix regex injection via unescaped percyElementId in processCorsIframesInDomSnapshot #2124

Merged

This was referenced Feb 28, 2026

Validate required fields in corsIframes entries to avoid throwing on malformed input #2125

Merged

Guard getResponsiveWidths return type with Array.isArray #2126

Merged

github-advanced-security bot found potential problems Feb 28, 2026

View reviewed changes

packages/core/src/utils.js Dismissed Show dismissed Hide dismissed

Copilot AI and others added 2 commits February 28, 2026 23:27

bhokaremoin requested a review from Copilot February 28, 2026 18:47

Copilot started reviewing on behalf of bhokaremoin February 28, 2026 18:47 View session

Copilot AI reviewed Feb 28, 2026

View reviewed changes

packages/core/src/utils.js Show resolved Hide resolved

packages/core/src/utils.js Show resolved Hide resolved

packages/sdk-utils/src/get-responsive-widths.js Show resolved Hide resolved

bhokaremoin requested a review from Copilot February 28, 2026 18:57

Copilot started reviewing on behalf of bhokaremoin February 28, 2026 18:58 View session

Copilot AI reviewed Feb 28, 2026

View reviewed changes

packages/core/src/api.js Show resolved Hide resolved

Copilot AI mentioned this pull request Feb 28, 2026

Fix ReDoS vulnerability in processCorsIframesInDomSnapshot #2127

Closed

adding no semgrep

e3f3eeb

rahulXbrowserstack reviewed Mar 2, 2026

View reviewed changes

packages/core/src/utils.js Outdated Show resolved Hide resolved

packages/core/src/utils.js Show resolved Hide resolved

packages/sdk-utils/src/get-responsive-widths.js Show resolved Hide resolved

packages/core/src/percy.js Show resolved Hide resolved

fix: prioritize user-passed widths over mobile widths in computeRespo…

3161fef

…nsiveWidths

rahulXbrowserstack approved these changes Mar 2, 2026

View reviewed changes

bhokaremoin added 3 commits March 2, 2026 23:05

fixing test

fd51004

adding cors iframe in config so it can become part of domSnapshot

9f19ae6

fixing test with the config change

bc5df1a

bhokaremoin commented Mar 3, 2026

View reviewed changes

rishigupta1599 reviewed Mar 5, 2026

View reviewed changes

packages/core/src/utils.js Show resolved Hide resolved

rishigupta1599 approved these changes Mar 5, 2026

View reviewed changes

rahulXbrowserstack approved these changes Mar 5, 2026

View reviewed changes

prklm10 merged commit bb0c86f into master Mar 10, 2026
72 of 75 checks passed

prklm10 deleted the PPLT-4949-add-cors-iframe-handling-and-multi-dom-width-config branch March 10, 2026 12:04

bhokaremoin added the ✨ enhancement New feature or request label Mar 10, 2026

Conversation

bhokaremoin commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Changes

1. Responsive Widths Configuration Endpoint

2. CORS Iframe Processing (Moved from Playwright SDK)

Files Changed

Core Package

SDK Utils Package

Tests

Test Coverage

Breaking Changes

Related Issues

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

bhokaremoin commented Feb 28, 2026

Uh oh!

Copilot AI commented Feb 28, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI commented Feb 28, 2026

Uh oh!

Copilot AI commented Feb 28, 2026

Uh oh!

Copilot AI commented Feb 28, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI commented Feb 28, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bhokaremoin Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

bhokaremoin commented Feb 26, 2026 •

edited

Loading