Repository navigation
Version 3.1.0 is not working in React-Native when is not in debugging mode or when is generating release #87
Description
Hello, I'm using serialize-javascript in React-Native instead of JSON.stringify function. The version 3.1.0 is not working in React-Native when the debugger is off or in the release apk (because there is no debugger).
The issue is:
Error: Secure random number generation is not supported by this browser. Use Chrome, Firefox or Internet Explorer 11.
Reproduce:
- In React-Native project install with npm, npx or yarn the package serialize-javascript.
- Create a serialize function:
import serializeJs from 'serialize-javascript';
...
const clearArrayUndefinedValues = (array) => {
try {
if (!Array.isArray(array))
throw new Error('Invalid argument. Must be an array.');
const filteredArr = array.reduce((arr, current) => {
if (typeof current === 'object' && current !== null) {
if (Array.isArray(current))
return [...arr, clearArrayUndefinedValues(current)];
// eslint-disable-next-line no-use-before-define
return [...arr, clearObjectUndefinedValues(current)];
} else if (current !== undefined) return [...arr, current];
return arr;
}, []);
return filteredArr;
} catch (error) {
console.log(
'##\t Error log in clearArrayUndefinedValues on app/shared/utils.js ->',
error
);
return null;
}
};
const clearObjectUndefinedValues = (object) => {
try {
if (typeof object !== 'object')
throw new Error('Invalid argument. Must be an object.');
if (object === null) throw new Error('Invalid argument. Must not be null.');
const filtered = Object.keys(object).reduce((obj, key) => {
const { [key]: current } = object;
if (typeof current === 'object' && current !== null) {
if (Array.isArray(current))
return { ...obj, [key]: clearArrayUndefinedValues(current) };
return { ...obj, [key]: clearObjectUndefinedValues(current) };
} else if (current !== undefined) return { ...obj, [key]: current };
return obj;
}, {});
return filtered;
} catch (error) {
console.log(
'##\t Error log in clearObjectUndefinedValues on app/shared/utils.js ->',
error
);
return null;
}
};
export const serialize = (object) => {
try {
if (typeof object !== 'object')
throw new Error('Invalid argument. Must be an object.');
if (object === null) throw new Error('Invalid argument. Must not be null.');
if (Array.isArray(object))
return serializeJs(clearArrayUndefinedValues(object));
return serializeJs(clearObjectUndefinedValues(object));
} catch (error) {
console.log('##\t Error log in serialize on app/shared/utils.js ->', error);
return null;
}
};
- Use a serialize function in any place of your code:
import { serialize } from '../shared/utils';
...
const JSONToObject = serialize(data);
My set is:
MacOs 10.15.5
i7 2.2Ghz
16GB
Running app in simulators:
iPhone 11 os 13.5
Pixel 3 os Android API 29.
Chrome version:
83.0.4103.61 64 bits
The previous version (3.0.0) working well. There are a prevision/way to fix this to work without debugger?
Activity
okuryu commentedon Jun 5, 2020
I'm not familiar with React Native, but as the error message says, you need
crypto.randomBytes(for Node.js) orCrypto.getRandomValues(for browsers). If you can apply something like the crypto pollyfill libs for React Native it might work well.danilojpferreira commentedon Jun 12, 2020
I tried to find something like this but I've no success. Idk how to fix this.
birdofpreyru commentedon Jun 14, 2020
I also bumped into this issue.
It happens because of the following single line (and the dependency on
randombyteslibrary, introduced by it):serialize-javascript/index.js
Line 38 in 05a3224
This comes from this commit: f21a6fb
I don't really understand, why random UUIDs are necessary during JS serialization. Lazy to dig in too deep, but my guess is that original implementation just cut some corners, and used in-place UID instead of building a separate index of transformed entities, thus the correct fix of the problem should be not relying on a more randomized UUID, but re-writing the algo to not use UUIDs at all.
The working workaround for RN is to shim
randombyteswith https://www.npmjs.com/package/react-native-randombytes, but it requires some efforts to setup, and alias therandombytesfor 3-rd party packages.Domiii commentedon May 3, 2021
To add to @birdofpreyru 's analysis:
randombytes: MissingnodesupportThe actual issue comes from
randombytesnot supporting node. It determines the "old browser" label (which will always throw) in browser.js:node, but because there might be an issue in your build setup, as explained below.It is used by
serialize-javascriptonly once during initialization here, evidently for security reasons.Put this code anywhere at the very beginning of your code:
As pointed out here, you can use the get-random-values polyfill. The annoying part is that it would be quite hacky to tell
randombytesto use that.umdbuild, and webpack@4 is not very good at that. This often translates it to Webpack deciding to use browser-only shims.birdofpreyru commentedon May 5, 2021
I had a second brief look at the code, and it still looks to me like a lame implementation rather than a security feature:
UIDis only used inside temporary placeholders during stringification, and there is noUIDincluded into stringified result. In my current understanding, if here:serialize-javascript/index.js
Lines 94 to 117 in 45fb0f1
amerllica commentedon Nov 22, 2022
Why didn't you close this issue? it's for version 3.x
birdofpreyru commentedon Nov 22, 2022
@amerllica The code in question, thus the issue, is still present in the current version v6.0.0.