How we use CodeSigningPlugin with [email protected] & [email protected]? #818

baka3k · 2024-12-10T09:06:03Z

baka3k
Dec 10, 2024

I created sample React by command:

npx react-native TestApp --skip-install
cd TestApp
npx @callstack/[email protected]

After the project was created, I also tried generating the index.bundle file using a command:

react-native bundle --platform android --dev false --minify true --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle

The sample project works well with React Native version 0.76.5.
The package.json file is shown below

{
  "name": "TestApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "react": "18.3.1",
    "react-native": "0.76.5",
    "react-native-safe-area-context": "^5.0.0",
    "react-native-screens": "^4.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@callstack/repack": "^5.0.0-rc.2",
    "@callstack/repack-init": "5.0.0-rc.2",
    "@react-native-community/cli": "15.0.1",
    "@react-native-community/cli-platform-android": "15.0.1",
    "@react-native-community/cli-platform-ios": "15.0.1",
    "@react-native/babel-preset": "0.76.5",
    "@react-native/eslint-config": "0.76.5",
    "@react-native/metro-config": "0.76.5",
    "@react-native/typescript-config": "0.76.5",
    "@rspack/core": "^1.1.5",
    "@rspack/plugin-react-refresh": "^1.0.1",
    "@swc/helpers": "^0.5.15",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "babel-loader": "^9.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.3.1",
    "terser-webpack-plugin": "5.3.10",
    "typescript": "5.0.4",
    "webpack": "5.93.0"
  },
  "engines": {
    "node": ">=18"
  }
}

I tried to add config to rspack.config.mjs file

new Repack.plugins.ChunksToHermesBytecodePlugin({
        enabled: true,
        test: /\.(js)?bundle$/,
      }),

It works well, bundle transformed to binary
But when I tried add

new Repack.plugins.CodeSigningPlugin({
        enabled: true,
        privateKeyPath: './private_key.pem',
      }),

Nothing happened, Have no error,
But bundle is not signed, I can not find signature & 'RCSSB' in bundle file

So, how we use CodeSigningPlugin with [email protected] & [email protected]?

Answered by jbroma

Dec 11, 2024

This is the correct behaviour, we don't sign the index.bundle since they contain the main entry to the app and need to be bundled with the app itself so there is no point in doing code signing there.

compiler.hooks.assetEmitted.tapPromise(
      { name: pluginName, stage: 20 },
      async (file, { outputPath, content, compilation }) => {
		// 👇 this is usually equal to `index.bundle`
        const mainBundleName = compilation.outputOptions.filename as string;
        if (!this.shouldSignFile(file, mainBundleName, excludedChunks)) {
          return;
        }
      // ...
	  }
);

View full answer

jbroma · 2024-12-10T10:35:44Z

jbroma
Dec 10, 2024
Maintainer

Thanks for lettings us know, I'll verify this and get back to you

0 replies

jbroma · 2024-12-10T11:32:36Z

jbroma
Dec 10, 2024
Maintainer

@baka3k I've checked and CodeSigning seems to be working in our super app showcase, can you verify you've configured everything properly based on https://github.com/callstack/super-app-showcase?

Remember to generate RSA256 keys and put the in the root of the repo and then run bundle:ios in one of the mini-apps like auth or dashboard

0 replies

baka3k · 2024-12-10T13:51:46Z

baka3k
Dec 10, 2024
Author

Thanks @jbroma , let me check it again.

One more question,

The situation we're facing is as follows:

We have multiple independent MiniApp development teams, and we want each team to use their own unique private key.
This means that when verifying a bundle, we need to pass in the public key of the respective team (which is fetched from the server).
However, when examining the repack source code, we found that the 'verify' function is currently only allowing for a single public key that is hardcoded into the source code, as shown below."

fun verifyBundle(context: Context, token: String?, fileContent: ByteArray?) {
            if (token == null) {
                throw Exception("The bundle verification failed because no token for the bundle was found.")
            }

            val stringPublicKey = getPublicKeyFromStringsIfExist(context)
                    ?: throw Exception("The bundle verification failed because PublicKey was not found in the bundle. Make sure you've added the PublicKey to the res/values/strings.xml under RepackPublicKey key.")

            val publicKey = parsePublicKey(stringPublicKey)
                    ?: throw Exception("The bundle verification failed because the PublicKey is invalid.")

            val claims: Map<String, Any?> = verifyAndDecodeToken(token, publicKey)

            val contentHash = claims["hash"] as String?
                    ?: throw Exception("The bundle verification failed because the token is invalid.")

            val fileHash = computeHash(fileContent)

            if (contentHash != fileHash) {
                throw Exception("The bundle verification failed because the bundle hash is invalid.")
            }
        }

               context: Context
       ): String? {
           val packageName: String = context.packageName
           val resId: Int =
                   context.resources.getIdentifier("RepackPublicKey", "string", packageName)
           if (resId != 0) {
               return context.getString(resId).ifEmpty {
                   null
               }
           }
           return null
       }

Is there a way to make the transmission of this public key dynamic?
For example:

MiniAppA verification using PublickeyA
MiniAppB verification using PublickeyB
MiniAppC verification using PublickeyC

Thanks & BestRegards,

2 replies

jbroma Dec 11, 2024
Maintainer

You are correct, we only support one public key now. Could you please submit a feature request which would also explain how would you like this to work? Then we can agree on some spec for that and proceed with it 👍

baka3k Dec 12, 2024
Author

Thank you, I will submit new feature request, let's continue this discussion in a new ticket
I think allowing verification with multiple public keys will increase the flexibility of development teams and significantly enhance security

Thanks & BestRegard,

baka3k · 2024-12-11T12:52:52Z

baka3k
Dec 11, 2024
Author

Hi @jbroma ,
I have rechecked the application you provided, and Codesigning ONLY works with this configuration

new Repack.plugins.ModuleFederationPluginV2({
        name: 'shopping',
        filename: 'index.c.bundle',
        dts: false,
        /**
         * This is a list of modules that will be shared between remote containers.
         */
        exposes: {
          './App': 'App',
        },
        remotes: {
          auth: `auth@http://localhost:9003/${platform}/mf-manifest.json`,
        },
      }),

JSBundle signing is only possible with this configuration.
Is this the specs? or bug at [email protected]?
Is there a way to sign individual standalone bundles?

Thanks & BestRegards,

4 replies

jbroma Dec 11, 2024
Maintainer

This is the correct behaviour, we don't sign the index.bundle since they contain the main entry to the app and need to be bundled with the app itself so there is no point in doing code signing there.

compiler.hooks.assetEmitted.tapPromise(
      { name: pluginName, stage: 20 },
      async (file, { outputPath, content, compilation }) => {
		// 👇 this is usually equal to `index.bundle`
        const mainBundleName = compilation.outputOptions.filename as string;
        if (!this.shouldSignFile(file, mainBundleName, excludedChunks)) {
          return;
        }
      // ...
	  }
);

Answer selected by baka3k

baka3k Dec 12, 2024
Author

@jbroma
Thanks for you confirmation, but I think index.bundle can be dynamically loaded from the server instead of being statically bundled within the app.
You may refer to the following :

How do you think about it?

jbroma Dec 12, 2024
Maintainer

if you are referring to the index.bundle of mini apps then that is not the case - the entry for mini apps is generated during build time and is called usually miniapp.container.bundle. If you want to use the MiniApp as a remote then index.bundle (or whatever is inside config output.filename) is not needed - it's only useful when running the app in standalone mode

baka3k Dec 12, 2024
Author

Got it.
My approach isn't limited to React Native for a Super App.
We can explore Flutter, React JS, and more....
And We have to ensure that all downloaded mini-apps are verified
Thanks for your help

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How we use CodeSigningPlugin with [email protected] & [email protected]? #818

{{title}}

Replies: 4 comments 6 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

How we use CodeSigningPlugin with [email protected] & [email protected]? #818

baka3k Dec 10, 2024

Replies: 4 comments · 6 replies

jbroma Dec 10, 2024 Maintainer

jbroma Dec 10, 2024 Maintainer

baka3k Dec 10, 2024 Author

jbroma Dec 11, 2024 Maintainer

baka3k Dec 12, 2024 Author

baka3k Dec 11, 2024 Author

jbroma Dec 11, 2024 Maintainer

baka3k Dec 12, 2024 Author

jbroma Dec 12, 2024 Maintainer

baka3k Dec 12, 2024 Author

baka3k
Dec 10, 2024

Replies: 4 comments 6 replies

jbroma
Dec 10, 2024
Maintainer

jbroma
Dec 10, 2024
Maintainer

baka3k
Dec 10, 2024
Author

jbroma Dec 11, 2024
Maintainer

baka3k Dec 12, 2024
Author

baka3k
Dec 11, 2024
Author

jbroma Dec 11, 2024
Maintainer

baka3k Dec 12, 2024
Author

jbroma Dec 12, 2024
Maintainer

baka3k Dec 12, 2024
Author