Cross-Site Script Inclusion

Public preview

Want everyone on your software team to learn this? Free 14-day trial.

Train my team

Such apps often requires keeping a lot of state in memory in JavaScript. To improve load times, you might consider interpolating the user's API key into the JavaScript used to render the webpage.

Application.jsx
jsx 
const apiKey = 'c9e2d730-4aba-42b2-9711-26ad584cba35';

function App() {
  const [message] = useState('Welcome, new user! Fetching your data...');

  useEffect(() => {
    // Load in data using the pre-populated API key.
    fetch('/api/profile', {
      headers: {
        Authorization: `Basic ${btoa(`${apiKey}:`)}`,
      },
    }).then(loadWelcomePage);
  }, []);

  return (
    <div className="component-app">
      <Message value={message} />
    </div>
  );
}

createRoot(document.getElementById('root')).render(<App />);