Skip to content

Remove Development Debug Code from Production Builds #10521

Open
@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

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions