Feat/dx 3070 map tag with react component #190

harshithad0703 · 2025-09-24T06:47:43Z

No description provided.

…der options

src/helper/react-utils.ts

+  for (let i = 0; i < keys.length - 1; i++) {
+    const key = keys[i];
+    if (!(key in current) || typeof current[key] !== 'object' || current[key] === null) {
+      current[key] = {};


The best fix is to add a safeguard in the setNestedProperty function so that if any key in the path is a dangerous prototype-polluting property like "__proto__", "prototype", or "constructor", the function throws an error or silently skips assignment. This prevents both reading from and writing to sensitive properties on the prototype chain.

This can be achieved by adding a check within the function's main loop and before the actual assignment, ensuring that none of the segments in the path match any of these dangerous strings. If a dangerous key is found, the function should immediately return or throw.

The required change is:

In src/helper/react-utils.ts, at/after line 173 (the setNestedProperty function), check each key (within the for loop and just before the assignment) against the blocked list. If any key is forbidden, abort the function or throw an error.

No external imports or dependencies are necessary; this is a simple safe-list implemented inline.

src/helper/react-utils.ts

+    current = current[key];
+  }
+
+  current[keys[keys.length - 1]] = value;


To fix the prototype pollution vulnerability, we need to prevent dangerous property names from being used in any part of the path. Specifically, the keys '__proto__', 'constructor', and 'prototype' must not be permitted in any segment. Best practice is to reject (throw an error) if these property names are encountered, since ignoring the assignment could silently break expected functionality.

The changes required:

In src/helper/react-utils.ts, inside the function setNestedProperty, before performing any property assignment/traversal, iterate through keys and check if any are in the forbidden set.

If a forbidden key is present, throw an error or log and return (depending on preference—but throwing is safest).

To do this, add a constant array of forbidden property names (['__proto__', 'constructor', 'prototype']) near the function or at module level.

No external dependencies are needed, as this is simple string comparison.

src/helper/react-utils.ts

+    current = current[key];
+  }
+
+  current[keys[keys.length - 1]] = value;


To prevent prototype pollution when setting nested properties using string paths, block assignments to the reserved property names __proto__ and constructor in any position of the path. The best fix is to add a check inside the loop iterating over keys and before the final assignment, returning early or throwing an error if any path segment is "__proto__" or "constructor". This should be implemented directly in setNestedProperty inside src/helper/react-utils.ts between lines 173-186. No external library is needed for this fix.

Copilot

Pull Request Overview

This PR introduces React integration functionality to the Contentstack Utils library, allowing conversion of JSON RTE (Rich Text Editor) content to React elements. The implementation provides a flexible framework for rendering Contentstack JSON content as React components while maintaining attribute mapping and custom rendering options.

Adds a comprehensive React integration module with default rendering options for all standard HTML elements
Implements utility functions for React-specific operations like prop conversion, style parsing, and text formatting
Provides comprehensive test coverage for various JSON RTE scenarios and edge cases

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/json-to-react.ts	Main converter function with default render options for all HTML node types
src/index.ts	Exports React integration functions and types
src/helper/react-utils.ts	React utility functions for prop conversion, styling, and element creation
src/Models/react-types.ts	TypeScript type definitions for React integration
test/json-to-react.test.ts	Comprehensive test suite covering various JSON RTE conversion scenarios
.talismanrc	Security configuration updates for new files

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-24T09:32:02Z

src/helper/react-utils.ts

+  const React = (globalThis as any).React || (typeof window !== 'undefined' ? (window as any).React : null);
+  if (React && React.createElement) {
+    defaultCreateElement = React.createElement;
+  } else {


Using globalThis and window with as any bypasses TypeScript's type safety. Consider using proper type guards or feature detection to safely access these global objects.

Suggested change

const React = (globalThis as any).React || (typeof window !== 'undefined' ? (window as any).React : null);

if (React && React.createElement) {

defaultCreateElement = React.createElement;

} else {

let React: any = undefined;

if (typeof globalThis === 'object' && globalThis !== null && 'React' in globalThis) {

React = (globalThis as { React?: unknown }).React;

} else if (typeof window === 'object' && window !== null && 'React' in window) {

React = (window as { React?: unknown }).React;

} else {

React = null;

}

if (

React &&

typeof React === 'object' &&

typeof (React as { createElement?: unknown }).createElement === 'function'

) {

defaultCreateElement = (React as { createElement: (...args: any[]) => ReactElement }).createElement;

} else {

Copilot · 2025-09-24T09:32:02Z

src/helper/react-utils.ts

+ * Parse CSS style string into React style object
+ */
+export function parseStyleString(styleStr: string): { [key: string]: string | number } {
+  const styles: any = {};


Using any type defeats the purpose of TypeScript. Consider using a more specific type like Record<string, string | number> or the return type directly.

Suggested change

const styles: any = {};

const styles: { [key: string]: string | number } = {};

Copilot · 2025-09-24T09:32:02Z

src/helper/react-utils.ts

+    const colonIndex = rule.indexOf(':');
+    if (colonIndex === -1) return;
+
+    const property = rule.substring(0, colonIndex).trim();
+    const value = rule.substring(colonIndex + 1).trim();
+


The CSS parsing logic could be more robust. Consider handling edge cases like empty rules, multiple colons, or malformed CSS. Also, using split(':') with proper validation might be clearer than manual substring operations.

Suggested change

const colonIndex = rule.indexOf(':');

if (colonIndex === -1) return;

const property = rule.substring(0, colonIndex).trim();

const value = rule.substring(colonIndex + 1).trim();

if (!rule.trim()) return; // skip empty rules

const parts = rule.split(':', 2);

if (parts.length !== 2) return;

const property = parts[0].trim();

const value = parts[1].trim();

Copilot · 2025-09-24T09:32:03Z

src/json-to-react.ts

+      findRenderContent(path, entryItem, (content: Document | Document[]) => {
+        const reactElement = documentToReact(content, mergedRenderOptions, createElement);
+        setNestedProperty(entryItem, path, reactElement);
+        return content as any; // Return original to satisfy the callback


Using as any to bypass type checking is not recommended. Consider updating the callback signature in findRenderContent to properly handle the return type, or use a more specific type assertion.

Suggested change

return content as any; // Return original to satisfy the callback

Copilot · 2025-09-24T09:32:03Z

src/Models/react-types.ts

+export interface ReactNode {
+  [key: string]: any;
+}
+


The ReactNode interface is too permissive with [key: string]: any. This should be more specific - React's actual ReactNode type is ReactElement | string | number | ReactFragment | ReactPortal | boolean | null | undefined. Consider aligning with React's actual type definition.

Suggested change

export interface ReactNode {

[key: string]: any;

}

// Local placeholder types to match React's actual ReactNode definition

export type ReactFragment = {} | ReactNode[];

export interface ReactPortal {}

export type ReactNode =

| ReactElement

| string

| number

| ReactFragment

| ReactPortal

| boolean

| null

| undefined;

harshithad0703 added 2 commits September 24, 2025 12:11

feat: add react component mapping functionality for json rte

be99ea1

test: add comprehensive tests for json to react and default react ren…

ca1a4c1

…der options

harshithad0703 requested a review from a team as a code owner September 24, 2025 06:47

github-advanced-security bot found potential problems Sep 24, 2025

View reviewed changes

harshithad0703 marked this pull request as draft September 24, 2025 09:26

harshithad0703 requested a review from Copilot September 24, 2025 09:30

Copilot AI reviewed Sep 24, 2025

View reviewed changes

@@ -173,16 +173,26 @@
             export function setNestedProperty(obj: any, path: string, value: any): void {
               const keys = path.split('.');
               let current = obj;
+              const dangerousKeys = ['__proto__', 'constructor', 'prototype'];
               for (let i = 0; i < keys.length - 1; i++) {
                 const key = keys[i];
+                if (dangerousKeys.includes(key)) {
+                  // Prevent prototype pollution by skipping dangerous keys
+                  return;
+                }
                 if (!(key in current) || typeof current[key] !== 'object' || current[key] === null) {
                   current[key] = {};
                 }
                 current = current[key];
               }
-              current[keys[keys.length - 1]] = value;
+              const lastKey = keys[keys.length - 1];
+              if (dangerousKeys.includes(lastKey)) {
+                // Prevent prototype pollution by skipping dangerous keys
+                return;
+              }
+              current[lastKey] = value;
             }
             /**

@@ -172,6 +172,13 @@
              */
             export function setNestedProperty(obj: any, path: string, value: any): void {
               const keys = path.split('.');
+              const forbidden = ['__proto__', 'constructor', 'prototype'];
+              // Check for dangerous property names
+              for (const k of keys) {
+                if (forbidden.includes(k)) {
+                  throw new Error(`Refusing to set property "${k}" due to prototype pollution risk.`);
+                }
+              }
               let current = obj;
               for (let i = 0; i < keys.length - 1; i++) {

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feat/dx 3070 map tag with react component #190

Feat/dx 3070 map tag with react component #190

Uh oh!

harshithad0703 commented Sep 24, 2025

Uh oh!

Check warning

Copilot Autofix

Check warning

Copilot Autofix

Check warning

Copilot Autofix

Copilot AI left a comment

Uh oh!

Copilot AI Sep 24, 2025

Uh oh!

Copilot AI Sep 24, 2025

Uh oh!

Copilot AI Sep 24, 2025

Uh oh!

Copilot AI Sep 24, 2025

Uh oh!

Copilot AI Sep 24, 2025

Uh oh!

Uh oh!

-  const React = (globalThis as any).React || (typeof window !== 'undefined' ? (window as any).React : null);
-  if (React && React.createElement) {
-    defaultCreateElement = React.createElement;
-  } else {
+  let React: any = undefined;
+  if (typeof globalThis === 'object' && globalThis !== null && 'React' in globalThis) {
+    React = (globalThis as { React?: unknown }).React;
+  } else if (typeof window === 'object' && window !== null && 'React' in window) {
+    React = (window as { React?: unknown }).React;
+  } else {
+    React = null;
+  }
+  if (
+    React &&
+    typeof React === 'object' &&
+    typeof (React as { createElement?: unknown }).createElement === 'function'
+  ) {
+    defaultCreateElement = (React as { createElement: (...args: any[]) => ReactElement }).createElement;
+  } else {

	const styles: any = {};
	const styles: { [key: string]: string \| number } = {};

-    const colonIndex = rule.indexOf(':');
-    if (colonIndex === -1) return;
-    const property = rule.substring(0, colonIndex).trim();
-    const value = rule.substring(colonIndex + 1).trim();
+    if (!rule.trim()) return; // skip empty rules
+    const parts = rule.split(':', 2);
+    if (parts.length !== 2) return;
+    const property = parts[0].trim();
+    const value = parts[1].trim();

-export interface ReactNode {
-  [key: string]: any;
-}
+// Local placeholder types to match React's actual ReactNode definition
+export type ReactFragment = {} | ReactNode[];
+export interface ReactPortal {}
+export type ReactNode =
+  | ReactElement
+  | string
+  | number
+  | ReactFragment
+  | ReactPortal
+  | boolean
+  | null
+  | undefined;

Feat/dx 3070 map tag with react component #190

Are you sure you want to change the base?

Feat/dx 3070 map tag with react component #190

Uh oh!

Conversation

harshithad0703 commented Sep 24, 2025

Uh oh!

Check warning

Uh oh!

Copilot Autofix

Check warning

Uh oh!

Copilot Autofix

Check warning

Uh oh!

Uh oh!

Copilot Autofix

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!