Fix program resource logo SVGs #2566
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe changes expand image validation logic to support SVG images in addition to existing raster formats. New schemas are introduced to modularize base64 and URL validation, and the image validation in program resource logic is updated to allow SVG images. No control flow or public API signatures are altered. Changes
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
apps/web/lib/actions/partners/program-resources/add-program-resource.ts (1)
108-112: Fix file size calculation logic for URL inputs.The current logic assumes the
fileinput is always a base64 string, butuploadedImageAllowSVGSchemaalso accepts URLs. This will cause errors when a URL is provided.Apply this fix to handle both base64 and URL inputs:
- // Extract file size from base64 string - const base64Data = file.replace(/^data:.+;base64,/, ""); - const fileSize = Math.ceil((base64Data.length * 3) / 4); + // Calculate file size based on input type + let fileSize: number; + + if (file.startsWith('data:')) { + // Extract file size from base64 string + const base64Data = file.replace(/^data:.+;base64,/, ""); + fileSize = Math.ceil((base64Data.length * 3) / 4); + } else { + // For URL inputs, we can't determine size here + // Consider fetching the file or using a default size validation + fileSize = 0; // or implement actual size fetching + } if (fileSize / 1024 / 1024 > 10) throw new Error("File size is too large");
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/web/lib/actions/partners/program-resources/add-program-resource.ts(2 hunks)apps/web/lib/zod/schemas/misc.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
apps/web/lib/actions/partners/program-resources/add-program-resource.ts (1)
apps/web/lib/zod/schemas/misc.ts (1)
uploadedImageAllowSVGSchema(121-123)
apps/web/lib/zod/schemas/misc.ts (1)
packages/utils/src/constants/main.ts (1)
R2_URL(77-77)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (6)
apps/web/lib/zod/schemas/misc.ts (3)
103-109: Good modularization of URL validation logic.The extraction of URL validation into a separate
uploadedImageUrlSchemaimproves code reusability and maintainability.
115-116: Good refactoring to use the modularized URL schema.The update to use
uploadedImageUrlSchemamaintains consistency and leverages the new modular approach.
121-123: ```shell
#!/bin/bashCheck for parse/parseAsync usage of the resource schema in add-program-resource.ts
echo "Looking for logoResourceSchema.parse or parseAsync calls..."
rg -n "logoResourceSchema.(parse|parseAsync)" -C2 apps/web/lib/actions/partners/program-resources/add-program-resource.tsecho -e "\nLooking for any .parse or .parseAsync invocations in this file..."
rg -n ".parseAsync(" -C2 apps/web/lib/actions/partners/program-resources/add-program-resource.ts
rg -n ".parse(" -C2 apps/web/lib/actions/partners/program-resources/add-program-resource.ts</details> <details> <summary>apps/web/lib/actions/partners/program-resources/add-program-resource.ts (3)</summary> `6-6`: **Good update to support SVG images in program resources.** The import change aligns with the PR objective to fix program resource logo SVGs. --- `26-26`: **Schema usage updated correctly.** The `logoResourceSchema` now uses the SVG-supporting schema as intended. --- `114-114`: To confirm whether we need to switch to `parseAsync`, let’s pull in the surrounding context and schema definition: ```shell #!/bin/bash echo "1) Locate the parse call:" rg -n "programResourceFileSchema\.parse" apps/web/lib/actions/partners/program-resources/add-program-resource.ts echo -e "\n2) Show lines 100–130 around that usage:" sed -n '100,130p' apps/web/lib/actions/partners/program-resources/add-program-resource.ts echo -e "\n3) Find the import source for programResourceFileSchema:" rg -n "import.*programResourceFileSchema" apps/web/lib/actions/partners/program-resources/add-program-resource.ts echo -e "\n4) Search for the schema’s definition across the repo:" rg -n "programResourceFileSchema" -n .
| // Base64 encoded raster image or SVG | ||
| export const base64ImageAllowSVGSchema = z | ||
| .string() | ||
| .trim() | ||
| .regex(/^data:image\/(png|jpeg|jpg|gif|webp|svg\+xml);base64,/, { | ||
| message: | ||
| "Invalid image format, supports only png, jpeg, jpg, gif, webp, svg.", | ||
| }) | ||
| .transform((v) => v || null); |
There was a problem hiding this comment.
Critical security issue: Missing async validation for SVG base64 content.
The new base64ImageAllowSVGSchema only validates the regex pattern but lacks the async refinement check present in the original base64ImageSchema (lines 70-90). This means malicious content could be uploaded if it matches the SVG regex pattern, as the actual file buffer content is not validated.
Apply this fix to add proper async validation:
// Base64 encoded raster image or SVG
export const base64ImageAllowSVGSchema = z
.string()
.trim()
.regex(/^data:image\/(png|jpeg|jpg|gif|webp|svg\+xml);base64,/, {
message:
"Invalid image format, supports only png, jpeg, jpg, gif, webp, svg.",
})
+ .refine(
+ async (str) => {
+ const base64Data = str.split(",")[1];
+
+ if (!base64Data) {
+ return false;
+ }
+
+ try {
+ const buffer = new Uint8Array(Buffer.from(base64Data, "base64"));
+
+ // For SVG, check if it's valid XML structure
+ if (str.includes('svg+xml')) {
+ const svgContent = buffer.toString();
+ return svgContent.includes('<svg') && svgContent.includes('</svg>');
+ }
+
+ // For other formats, use fileTypeFromBuffer
+ const fileType = await fileTypeFromBuffer(buffer);
+ return fileType && allowedImageTypes.includes(fileType.mime);
+ } catch (e) {
+ return false;
+ }
+ },
+ {
+ message: "Invalid image format, supports only png, jpeg, jpg, gif, webp, svg.",
+ },
+ )
.transform((v) => v || null);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // Base64 encoded raster image or SVG | |
| export const base64ImageAllowSVGSchema = z | |
| .string() | |
| .trim() | |
| .regex(/^data:image\/(png|jpeg|jpg|gif|webp|svg\+xml);base64,/, { | |
| message: | |
| "Invalid image format, supports only png, jpeg, jpg, gif, webp, svg.", | |
| }) | |
| .transform((v) => v || null); | |
| // Base64 encoded raster image or SVG | |
| export const base64ImageAllowSVGSchema = z | |
| .string() | |
| .trim() | |
| .regex(/^data:image\/(png|jpeg|jpg|gif|webp|svg\+xml);base64,/, { | |
| message: | |
| "Invalid image format, supports only png, jpeg, jpg, gif, webp, svg.", | |
| }) | |
| .refine( | |
| async (str) => { | |
| const base64Data = str.split(",")[1]; | |
| if (!base64Data) { | |
| return false; | |
| } | |
| try { | |
| const buffer = new Uint8Array(Buffer.from(base64Data, "base64")); | |
| // For SVG, check if it's valid XML structure | |
| if (str.includes("svg+xml")) { | |
| const svgContent = buffer.toString(); | |
| return svgContent.includes("<svg") && svgContent.includes("</svg>"); | |
| } | |
| // For other formats, use fileTypeFromBuffer | |
| const fileType = await fileTypeFromBuffer(buffer); | |
| return fileType && allowedImageTypes.includes(fileType.mime); | |
| } catch (e) { | |
| return false; | |
| } | |
| }, | |
| { | |
| message: | |
| "Invalid image format, supports only png, jpeg, jpg, gif, webp, svg.", | |
| }, | |
| ) | |
| .transform((v) => v || null); |
🤖 Prompt for AI Agents
In apps/web/lib/zod/schemas/misc.ts around lines 93 to 101, the
base64ImageAllowSVGSchema currently only validates the string format with a
regex but lacks the async refinement that verifies the actual decoded file
content for security. To fix this, add an async refinement step similar to the
one in base64ImageSchema (lines 70-90) that decodes the base64 string and
validates the file buffer content to ensure it is a safe and valid image,
preventing malicious uploads.
Summary by CodeRabbit
New Features
Refactor