Skip to content

REFACTOR: Extract SearchBox subcomponents & sanitize image URLs against XSS (#2320, #2323) - #2330

Open
Talha12Shiekh wants to merge 1 commit into
appbaseio:nextfrom
Talha12Shiekh:refactor/extract-searchbox-subcomponents
Open

REFACTOR: Extract SearchBox subcomponents & sanitize image URLs against XSS (#2320, #2323)#2330
Talha12Shiekh wants to merge 1 commit into
appbaseio:nextfrom
Talha12Shiekh:refactor/extract-searchbox-subcomponents

Conversation

@Talha12Shiekh

Copy link
Copy Markdown

Proposed Changes

This PR resolves issue #2323 (SearchBox subcomponents refactoring) and issue #2320 (Image URL XSS protocol sanitation) across packages/web:

  1. Image URL XSS Protocol Sanitation (Fixes bug: image src attributes not validated for javascript: protocol URLs #2320):

    • Added sanitizeImageUrl(url) helper in packages/web/src/utils/index.js to strictly validate image URL protocol schemes (http:, https:, and data:).
    • Sanitized image src attributes across all 3 affected files:
      • SearchBox.js (props.iconURL)
      • SelectedFilters.js (imageValue)
      • AIAnswer/Chat.js (props.iconURL)
  2. Extract SearchBox Subcomponents (Fixes refactor: SearchBox.js is 2692 lines — extract subcomponents for maintainability #2323):
    Refactored SearchBox.js by extracting additive, non-breaking subcomponents:

    • AISection.js: Extracted the AI answer screen template, typing animations (TypingEffect), loading placeholders, and AIFeedback UI.
    • SuggestionsSection.js: Extracted rendering logic for all 8 suggestion types (popular, recent, FAQ, featured, document, index, endpoint, predictive).
    • SearchInput.js: Unified input rendering wrapping <InputGroup>, <TextArea>, voice/mic addons, camera input, and autofill icons.
    • SearchBox.js: Integrated the extracted subcomponents cleanly.

Linked Issues

Checklist

  • Describe the proposed changes and how it'll improve the library experience.
  • Please make sure that there are no linting errors in the code.
  • Add a demo video/gif/screenshot to explain how did you test the fix.
  • If it is a global change, try to add any side effects that it could have.
  • Create a PR to add/update the docs (if needed) at here.
  • Create a PR to add/update the storybook (if needed) at here.

Improvements to the Library Experience

  • Security: Neutralizes javascript: protocol XSS injection vectors on image URL inputs across SearchBox.js, SelectedFilters.js, and Chat.js.
  • Maintainability: Deconstructs SearchBox.js from a 2,692-line file into modular, reusable subcomponents.

Side Effects

  • None. Composite DOM output and prop contracts remain 100% unchanged and backwards compatible.

Testing

  • Verified Babel CommonJS and ES module compilation across AISection.js, SuggestionsSection.js, SearchInput.js, SearchBox.js, SelectedFilters.js, Chat.js, and utils/index.js.
  • Verified sanitizeImageUrl with valid (http:, https:, data:, relative /logo.png) and invalid (javascript:alert(1)) URL schemes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

1 participant