mistercrunch commented on issue #26319:
URL: https://github.com/apache/superset/issues/26319#issuecomment-2617218852
Used GPT here to try and structure the thoughts into something more
ambitious that could superseed this SIP:
# SIP Proposal: Enhanced Route Management and URL Handling in Superset
## Abstract
This SIP proposes a comprehensive strategy to enhance and centralize route
management and URL handling in Superset. While the initial work to enable URL
prefix support (`APPLICATION_ROOT`) is a step forward, this proposal addresses
the need for deeper cohesion between the frontend and backend, security through
centralized sanitization, and validation to enforce best practices.
Additionally, it explores leveraging OpenAPI for route synchronization and
introduces strategies for enforcing standards and ensuring consistent behavior
across deployments.
---
## Problem Statement
The current URL handling approach has the following challenges:
1. **Frontend/Backend Route Mismatch**: Routes are defined independently,
increasing the risk of mismatches.
2. **Decentralized Utilities**: URL handling logic (e.g., Rison,
querystrings, sanitization) is fragmented, leading to redundancy and
inconsistency.
3. **Security Concerns**: Lack of centralized sanitization opens potential
security vulnerabilities, such as injection attacks from improperly processed
URLs or query parameters.
4. **Deployment Validation**: The application behaves differently when
`APPLICATION_ROOT` (or similar) is enabled, but there’s no systematic way to
validate this in CI/CD.
5. **OpenAPI Underutilization**: OpenAPI is already used but could be
leveraged to sync route definitions between frontend and backend.
---
## Proposed Solution
### 1. Centralized Route and URL Handling
- Introduce a `routes.ts` file as the single source of truth for frontend
routes, with metadata including:
- Route name, URL, and type (API, React Router).
- Expected querystring or Rison parameters.
- Relevant metadata, such as permissions or special handling rules.
- Centralize all URL/pathing utilities into a single `url-utils.ts` module:
- Handle Rison encoding/decoding with a reusable wrapper.
- Simplify querystring operations (e.g., appending, sanitizing).
- Include sanitization using libraries like `dompurify` to ensure safe URL
handling and prevent injection attacks.
### 2. Leverage OpenAPI for Synchronization
- Use OpenAPI as a source of truth for API routes, exposing metadata (e.g.,
parameters, expected responses) that can be consumed by both the frontend and
backend.
- Build a tool or script to generate a TypeScript file from OpenAPI specs to
ensure route consistency between the backend and frontend.
### 3. Security Enhancements
- Introduce a centralized sanitization strategy in `url-utils.ts`:
- Use `dompurify` or similar libraries to sanitize all URLs and
querystring parameters.
- Enforce sanitization by requiring all components to use the centralized
utilities for route handling.
### 4. Standard Enforcement and Validation
- Implement custom ESLint rules to enforce the use of centralized utilities
(`routes.ts` and `url-utils.ts`) for all route-related operations.
- Add test coverage to validate behavior with `APPLICATION_ROOT` (or
equivalent prefix) enabled and disabled. This should include:
- Running parts of the test suite with the prefix on and off.
- Validating that routes and utilities behave consistently across
configurations.
### 5. React Router and Navigation Improvements
- Centralize navigation-related routes in `routes.ts` and integrate them
with React Router.
- Create a wrapper or handler for React Router that:
- Dynamically generates routes from metadata in `routes.ts`.
- Handles navigation logic (e.g., redirects, transitions).
- Ensures consistent behavior with `APPLICATION_ROOT`.
---
## Open Questions
1. **Frontend/Backend Synchronization**:
- How do we best synchronize and share route metadata between the
frontend and backend? Options include:
- Shared JSON/YAML schema.
- A Python route generator that outputs a TypeScript file.
- Backend API endpoints that expose route metadata dynamically.
2. **Scope of Centralization**:
- Should we centralize navigation-related routes (React Router) and
API-related routes separately, or unify them into one list?
3. **Performance Implications**:
- Will dynamic route generation or centralized logic introduce noticeable
overhead?
4. **Sanitization Scope**:
- Should we sanitize all URLs globally or provide more granular options
based on context (e.g., specific components)?
---
## Next Steps
1. Define the structure of `routes.ts` and its metadata schema.
2. Create a POC for synchronizing routes using OpenAPI.
3. Audit the codebase for existing URL and path handling patterns,
consolidating into `url-utils.ts`.
4. Implement sanitization using `dompurify` or a similar library in
`url-utils.ts`.
5. Add ESLint rules and CI validation for route and utility usage.
6. Refactor existing components to use the centralized route and URL
handling modules.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
