🔒 Security: Replace Math.random() with React useId() for Component IDs

[chawdamrunal]

Issue

The CldUploadWidget component uses Math.random() * 100 to generate Script element IDs, which creates only 100 possible values and leads to frequent ID collisions.

Security & Reliability Concerns

File: next-cloudinary/src/components/CldUploadWidget/CldUploadWidget.tsx:244
Severity: Low
Type: Security & Code Quality

Problems with current implementation:

<Script id={`cloudinary-uploadwidget-${Math.floor(Math.random() * 100)}`} ... />

• Limited entropy: Only 100 possible ID values (0-99)
• High collision probability: Multiple widgets on same page likely share IDs
• Predictable IDs: Could enable targeted DOM manipulation
• Inconsistent pattern: CldVideoPlayer already uses useId() (line 49)

Impact:

• Script load events may not fire correctly due to ID collisions
• Multiple upload widgets may interfere with each other
• Unpredictable behavior when rendering multiple instances

Solution

Replace Math.random() with React's built-in useId() hook:

const uniqueId = useId(); <Script id={`cloudinary-uploadwidget-${uniqueId.replace(/:/g, '')}`} ... />

Benefits:

• ✅ Guaranteed unique IDs across component tree
• ✅ Stable IDs that don't change between renders
• ✅ Zero collision risk even with many instances
• ✅ Follows React best practices
• ✅ Consistent with existing CldVideoPlayer implementation

Testing

• ✅ TypeScript compilation passes
• ✅ No linter errors
• ✅ Pattern matches CldVideoPlayer component
• ✅ useId() is available in React 18+ (peer dependency)

References

• React useId() Documentation
• CldVideoPlayer.tsx implementation

Hacktoberfest 2025

This contribution is part of Hacktoberfest 2025.

---

Checklist:

• Replaced Math.random() with useId()
• Added useId to React imports
• Consistent with existing patterns
• No breaking changes

[vercel]

Someone is attempting to deploy a commit to the Cloudinary DevX Team on Vercel.

A member of the Team first needs to authorize it.

[strausr]

@chawdamrunal Thanks so much for contributing this! 🎉
Replacing Math.random() with useId() is definitely the right direction and a great improvement for ID stability.

One small note — since useId() was introduced in React 18, this change could break for projects still using React 17 or lower (React.useId would be undefined).

To make it safe across versions, it might be good to add a small fallback so that if React.useId isn’t available, it falls back to a simple unique-ID generation:)

[strausr]

Thanks so much for opening this PR and contributing during Hacktoberfest!
Since Hacktoberfest has wrapped up and this PR has been inactive for a while, I’ll go ahead and close it for now to keep things tidy.

If you’d like to revisit this change or continue the discussion in the future, feel free to reopen or start a new PR. We really appreciate your effort and contribution to the project!