Fix text controls truncated when special characters are used#34061
Fix text controls truncated when special characters are used#34061Xavrir wants to merge 2 commits intostorybookjs:nextfrom
Conversation
Split key vs value validation in validateArgs: keys keep strict allowlist (alphanumeric + space/underscore/hyphen), while values switch to a blocklist that only rejects structural delimiters (;:), HTML-injection vectors (<>"`), and control chars. This allows special characters like / * . @ in text control values without silently dropping them from the URL args. Closes storybookjs#31091
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughThe changes introduce new validation regexes ( Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Closes #31091
What I did
Fixed text controls being truncated/reverted when users type special characters like
/,.,@,*, etc.Root cause:
VALIDATION_REGEXP(/^[a-zA-Z0-9 _-]*$/) invalidateArgsrejected any string value containing characters outside the basic alphanumeric set. When validation failed, the arg was silently omitted from the URL. On the next URL read, the control reverted to its initial value — appearing "truncated."Fix: Split key vs value validation:
KEY_REGEXP = /^[a-zA-Z0-9 _-]*$/) — arg names should remain predictable identifiers.UNSAFE_VALUE_REGEXP) that only rejects characters that would break parsing or enable injection:;and:— structural delimiters in the args format (key:value;key:value)<,>,",`— HTML/script injection vectors\x00-\x1F,\x7F)Both
router/utils.tsandparseArgsParam.tsare updated in sync per the existing "keep in sync" comment.Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
yarn task --task sandbox --start-from auto --template react-vite/default-tslabelprop)user@example.com,path/to/file,image.png,Hello, world!<,>,", or backticks are still rejected (security)Documentation
No documentation changes needed — this is a bugfix to internal validation logic.
Summary by CodeRabbit
Bug Fixes
Tests