将React应用嵌入现有React应用的实现建议及示例请求

Hey there! Embedding one React app into another and passing sensitive data like IDs and passwords is totally doable—let’s go through the most common approaches, along with code examples and critical security notes to keep your data safe.

1. Direct Component Embedding (Recommended for Shared Codebases) #

If you can access the source code of both apps, the cleanest way is to package the embedded app as a reusable React component. This lets you pass data directly via props, just like any other component.

Example Setup: #

Step 1: Package the Embedded App as a Component

In your embedded app’s codebase, refactor its root into a reusable component that accepts props:

// src/EmbeddedApp.js
import React from 'react';

const EmbeddedApp = ({ userId, authToken }) => {
  // Use the passed userId and authToken to initialize your app
  React.useEffect(() => {
    if (userId && authToken) {
      // Initialize your embedded app's logic here
      console.log('Received credentials:', { userId, authToken });
    }
  }, [userId, authToken]);

  return (
    <div className="embedded-app-container">
      {/* Your embedded app's UI goes here */}
      <h2>Embedded App</h2>
      <p>User ID: {userId}</p>
    </div>
  );
};

export default EmbeddedApp;

Step 2: Import and Use It in Your Existing App

In your existing app, import the component and pass the required data via props. Important: Never hardcode sensitive data—use environment variables or secure auth flows to fetch these values:

// src/App.js (Existing App)
import React from 'react';
import EmbeddedApp from './path/to/EmbeddedApp';

const ExistingApp = () => {
  // Fetch or retrieve sensitive data securely (e.g., from auth context, environment variables)
  const userId = process.env.REACT_APP_USER_ID;
  const authToken = localStorage.getItem('authToken'); // Only store tokens, NOT passwords!

  return (
    <div className="existing-app-container">
      <h1>Main App</h1>
      {/* Embed the app and pass data */}
      <EmbeddedApp userId={userId} authToken={authToken} />
    </div>
  );
};

export default ExistingApp;

2. Iframe Embedding (For Fully Independent Apps) #

If the embedded app is a standalone deployed app (e.g., has its own URL), use an iframe and communicate via postMessage to pass data. This is useful when you can’t share code between the two apps.

Example Setup: #

Step 1: Send Data from the Existing App to the Iframe

// src/App.js (Existing App)
import React, { useRef, useEffect } from 'react';

const ExistingApp = () => {
  const iframeRef = useRef(null);

  useEffect(() => {
    const iframe = iframeRef.current;
    if (iframe) {
      // Wait for the iframe to load before sending data
      const handleLoad = () => {
        const sensitiveData = {
          userId: process.env.REACT_APP_USER_ID,
          authToken: localStorage.getItem('authToken')
        };
        // Send data to the iframe—always specify the target origin for security
        iframe.contentWindow.postMessage(
          sensitiveData,
          'https://your-embedded-app-url.com' // Replace with your embedded app's actual URL
        );
      };
      iframe.addEventListener('load', handleLoad);
      return () => iframe.removeEventListener('load', handleLoad);
    }
  }, []);

  return (
    <div>
      <h1>Main App</h1>
      <iframe
        ref={iframeRef}
        src="https://your-embedded-app-url.com"
        width="100%"
        height="600px"
        title="Embedded React App"
      />
    </div>
  );
};

export default ExistingApp;

Step 2: Receive Data in the Embedded App

// src/index.js (Embedded App)
import React from 'react';
import ReactDOM from 'react-dom/client';
import EmbeddedApp from './EmbeddedApp';

// Listen for messages from the parent app
window.addEventListener('message', (event) => {
  // Verify the origin to prevent malicious messages
  if (event.origin !== 'https://your-existing-app-url.com') return;

  // Extract the data
  const { userId, authToken } = event.data;
  // Pass the data to your app (e.g., via context or state)
  ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
      <EmbeddedApp userId={userId} authToken={authToken} />
    </React.StrictMode>
  );
});

Critical Security Notes (Don’t Skip This!) #

Since you’re dealing with sensitive data like passwords, keep these rules in mind:

• Never pass plaintext passwords directly. Instead, have your existing app handle authentication with a backend, then pass a short-lived auth token to the embedded app.
• Use HTTPS everywhere. This prevents data interception during transmission.
• Validate postMessage origins. Always check that messages come from a trusted URL to avoid cross-site scripting (XSS) attacks.
• Store sensitive data securely. Use environment variables (with .env files, never committed to version control) or secure storage like sessionStorage instead of localStorage for tokens.
• Avoid exposing sensitive data in the DOM. Never render passwords or tokens in your UI unless absolutely necessary.

内容的提问来源于stack exchange，提问作者leonlai