Skip to content

Remove Development Debug Code from Production Builds #10521

@praneeth622

Description

@praneeth622

Q&A (please complete the following information)

  • OS: Linux (Ubuntu 22.04)
  • Browser: Chrome, Firefox, Safari (affects all browsers)
  • Version: Latest
  • Method of installation: npm, dist assets
  • Swagger-UI version: 5.17.14 (and likely earlier versions)
  • Swagger/OpenAPI version:OpenAPI 3.0, Swagger 2.0 (affects all versions)

Content & configuration

Example Swagger/OpenAPI definition:

openapi: 3.0.0
info:
  title: Sample API
  version: 1.0.0
paths:
  /users:
    get:
      summary: Get users
      responses:
        '200':
          description: Successful response

Swagger-UI configuration options:

SwaggerUI({
  dom_id: '#swagger-ui',
  url: 'https://example.com/openapi.json',
  deepLinking: true
})
?yourQueryStringConfig

Describe the bug you're encountering

Development-only debugging code is executing in production builds, causing:

  1. Security Issue: The Debug component exposes internal application props to window.props in production environments, potentially exposing sensitive configuration data
  2. Console Pollution: Debug console logs are appearing in production builds, creating noise for end users and potentially exposing internal application state
  3. Performance Impact: Unnecessary debug operations are running in production

#Affected Components:

  • Debug component (debug.jsx) - exposes window.props globally
  • ExamplesSelect component (examples-select.jsx) - debug console logs
  • Spec Actions (actions.js) - parse error logging without environment checks

To reproduce...

Steps to reproduce the behavior:

  1. Build Swagger-UI for production (NODE_ENV=production)
  2. Open browser developer console
  3. Navigate to any Swagger-UI instance
  4. Check console for debug messages
  5. Type window.props in console - see internal application state exposed
  6. Trigger spec parsing errors - see detailed error logs in production

Expected behavior

In production builds:

  • No debug code should execute
  • window.props should not be set or should be undefined
  • Console should be clean of debug messages
  • Error handling should be user-friendly without exposing internal details
  • Only user-facing error messages should appear in production

Additional context or thoughts

This is both a security concern and code quality issue:

Security Impact:

  • Internal application configuration exposed via window.props
  • Potential information disclosure through debug logs
  • Stack traces and internal paths exposed in production

Code Quality Impact:

  • Unprofessional appearance with debug logs in production
  • Performance overhead from unnecessary debug operations
  • Violates production build best practices

Suggested Fix: Wrap all debug code in environment checks:

if (process.env.NODE_ENV === "development") {
  // debug code here
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    pull-request-welcomeIf a PR were to be made, we would help get it merged

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions