Skip to content

Conversation

@amcaplan
Copy link
Contributor

@amcaplan amcaplan commented Nov 6, 2025

WHY are these changes introduced?

This PR builds on the foundation from PR #6578 by establishing the core type system, configuration validation, and default content for the GraphiQL console. This is the second PR in the 8-PR migration stack.

Context: The GraphiQL console will receive configuration from the Rails server via window.__GRAPHIQL_CONFIG__. This configuration includes URLs, API endpoints, and user data. We need:

  • Strong TypeScript types for configuration data
  • Security validation to prevent XSS attacks through config injection
  • Default content for the welcome screen and initial queries

WHAT is this pull request doing?

This PR adds the type definitions, security validation layer, and default content that will be used throughout the GraphiQL application.

Key Changes:

1. Type Definitions (src/types/config.ts):

  • GraphiQLConfig interface defining all configuration fields
  • Server data: apiVersion, apiVersions, appName, appUrl, storeFqdn
  • API endpoints: baseUrl
  • Optional initial state: query, variables, defaultQueries
  • Global window interface extension for window.__GRAPHIQL_CONFIG__

2. Security Validation (src/utils/configValidation.ts):

  • XSS Prevention: Validates all URLs to only allow http/https protocols
  • URL Allowlist: Restricts URLs to localhost and *.myshopify.com domains
  • String Sanitization: Detects and blocks script tags, event handlers, and javascript: URLs
  • Safe Fallbacks: Returns sanitized config with dangerous values replaced by safe defaults
  • Comprehensive 313-line test suite covering all attack vectors

Security Patterns Blocked:

// All of these would be rejected:
javascript:alert('xss')
data:text/html,<script>alert('xss')</script>
http://evil.com/steal-tokens
<script>alert('xss')</script>
<img onerror="alert('xss')" src=x>

3. Default Content (src/constants/defaultContent.ts):

  • Welcome message explaining GraphiQL features and keyboard shortcuts
  • Platform-aware control key display (⌘ for Mac, Ctrl for Windows/Linux)
  • Default shop query to fetch basic store information

Files Added:

  • src/types/config.ts - TypeScript interfaces
  • src/constants/defaultContent.ts - Welcome message and default query
  • src/utils/configValidation.ts - Security validation (153 lines)
  • src/utils/configValidation.test.ts - Security tests (313 lines)

Dependencies

Builds on: PR #6578 (package foundation)

How to test your changes?

# Run the comprehensive security validation tests
pnpm --filter @shopify/graphiql-console test src/utils/configValidation.test.ts

# Type check the new interfaces
pnpm --filter @shopify/graphiql-console tsc --noEmit

# All 313 test cases should pass, covering:
# - URL protocol validation
# - XSS attack prevention
# - Shopify domain allowlist
# - String sanitization
# - Safe fallback behavior

Measuring impact

  • n/a - this is foundational security infrastructure

Checklist

  • I've considered possible cross-platform impacts (Mac, Linux, Windows)
  • I've considered possible documentation changes

Copy link
Contributor Author

amcaplan commented Nov 6, 2025

@github-actions
Copy link
Contributor

github-actions bot commented Nov 6, 2025

Coverage report

St.
Category Percentage Covered / Total
🟡 Statements 79.33% 13657/17216
🟡 Branches 73.23% 6687/9132
🟡 Functions 79.42% 3520/4432
🟡 Lines 79.69% 12899/16187

Test suite run success

3385 tests passing in 1385 suites.

Report generated by 🧪jest coverage report action from 9296984

@amcaplan amcaplan force-pushed the 11-06-feat_graphiql_add_graphiql-console_package_foundation branch from 0093e1f to 7bb8bbe Compare November 6, 2025 16:53
@amcaplan amcaplan force-pushed the 11-06-feat_graphiql_add_shared_types_constants_and_validation branch from b3a1ffc to b199d75 Compare November 6, 2025 16:53
@amcaplan amcaplan force-pushed the 11-06-feat_graphiql_add_graphiql-console_package_foundation branch from 7bb8bbe to 6ad1b53 Compare November 6, 2025 17:27
@amcaplan amcaplan force-pushed the 11-06-feat_graphiql_add_shared_types_constants_and_validation branch from b199d75 to f14423d Compare November 6, 2025 17:27
@amcaplan amcaplan changed the base branch from 11-06-feat_graphiql_add_graphiql-console_package_foundation to graphite-base/6579 November 6, 2025 21:19
@amcaplan amcaplan force-pushed the 11-06-feat_graphiql_add_shared_types_constants_and_validation branch from f14423d to 2fd515e Compare November 6, 2025 21:20
@amcaplan amcaplan changed the base branch from graphite-base/6579 to 11-06-feat_graphiql_add_graphiql-console_package_foundation November 6, 2025 21:20
@amcaplan amcaplan changed the base branch from 11-06-feat_graphiql_add_graphiql-console_package_foundation to graphite-base/6579 November 6, 2025 21:27
@amcaplan amcaplan force-pushed the 11-06-feat_graphiql_add_shared_types_constants_and_validation branch from 2fd515e to 8c2c496 Compare November 6, 2025 21:27
@amcaplan amcaplan changed the base branch from graphite-base/6579 to 11-06-feat_graphiql_add_graphiql-console_package_foundation November 6, 2025 21:27
@amcaplan amcaplan force-pushed the 11-06-feat_graphiql_add_shared_types_constants_and_validation branch 5 times, most recently from d5b6f9a to 3274ef0 Compare November 6, 2025 23:21
@amcaplan amcaplan force-pushed the 11-06-feat_graphiql_add_graphiql-console_package_foundation branch from 16966e2 to 732bdea Compare November 6, 2025 23:21
Adds type definitions, configuration validation with XSS prevention,
and default GraphQL query constants.

- Add GraphiQL config type definitions
- Add default welcome message and shop query constants
- Add config validation with security checks (313 lines of tests)
- Prevent XSS attacks through URL validation and string sanitization

All validation tests pass
@amcaplan amcaplan force-pushed the 11-06-feat_graphiql_add_graphiql-console_package_foundation branch from 732bdea to 705da8c Compare November 6, 2025 23:34
@amcaplan amcaplan force-pushed the 11-06-feat_graphiql_add_shared_types_constants_and_validation branch from 3274ef0 to 9296984 Compare November 6, 2025 23:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant