feat(graphiql): add shared types, constants, and validation

[amcaplan]

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

[amcaplan]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• feat(graphiql): integrate console with app server #6585
• feat(graphiql): complete GraphiQL section and app integration #6584
• feat(graphiql): add data fetching hooks #6583
• feat(graphiql): add GraphiQL editor with Monaco integration #6582
• feat(graphiql): add API version selector component #6581
• feat(graphiql): add base UI components #6580
• feat(graphiql): add shared types, constants, and validation #6579 👈 (View in Graphite)
• feat(graphiql): add graphiql-console package foundation #6578
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

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

[github-actions]

This PR seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action.
→ If there's no activity within a week, then a bot will automatically close this.
Thanks for helping to improve Shopify's dev tooling and experience.