Using the following ways it is possible: -

1. Using window.postMessage
window.postMessage is a method that allows you to send messages between different windows (or iframes) regardless of their origin. This is one of the most common ways to handle communication between different web resources.
2. Using Local Storage Events
You can use the localStorage API to pass data between the web resources. When the storage event is fired, it notifies other windows or iframes that the data has changed.
3. Using Custom Events
Custom events can also be used to communicate between different parts of your application.

Example Implimentations: -
1. Using window.postMessage

HTML Web Resource

  
  


  
HTML Web Resource
  
  Send Message to React
  

React Web Resource

import React, { useEffect } from 'react';

const ReactResource = () => {
  useEffect(() => {
    const handleStorageEvent = (event) => {
      if (event.key === 'message') {
        const message = JSON.parse(event.newValue);
        console.log('Received data from HTML:', message.payload);
      }
    };

    window.addEventListener('storage', handleStorageEvent);

    return () => {
      window.removeEventListener('storage', handleStorageEvent);
    };
  }, []);

  const sendMessage = () => {
    const message = { type: 'data', payload: 'Hello from React!' };
    localStorage.setItem('message', JSON.stringify(message));
  };

  return (
    

      
React Web Resource
      Send Message to HTML
    
  );
};

export default ReactResource;

2. Using Local Storage Events: -

  
  


  
HTML Web Resource
  
  Send Message to React
  

React Web Resource

import React, { useEffect } from 'react';

const ReactResource = () => {
  useEffect(() => {
    const handleStorageEvent = (event) => {
      if (event.key === 'message') {
        const message = JSON.parse(event.newValue);
        console.log('Received data from HTML:', message.payload);
      }
    };

    window.addEventListener('storage', handleStorageEvent);

    return () => {
      window.removeEventListener('storage', handleStorageEvent);
    };
  }, []);

  const sendMessage = () => {
    const message = { type: 'data', payload: 'Hello from React!' };
    localStorage.setItem('message', JSON.stringify(message));
  };

  return (
    

      
React Web Resource
      Send Message to HTML
    
  );
};

export default ReactResource;

3. Using Custom Events
HTML Web Resource

  
  


  
HTML Web Resource
  
  Send Message to React
  

React Web Resource

import React, { useEffect } from 'react';

const ReactResource = () => {
  useEffect(() => {
    const handleCustomEvent = (event) => {
      console.log('Received data from HTML:', event.detail.payload);
    };

    window.addEventListener('customMessage', handleCustomEvent);

    return () => {
      window.removeEventListener('customMessage', handleCustomEvent);
    };
  }, []);

  const sendMessage = () => {
    const event = new CustomEvent('customMessage', { detail: { payload: 'Hello from React!' } });
    window.parent.dispatchEvent(event);
  };

  return (
    

      
React Web Resource
      Send Message to HTML
    
  );
};

export default ReactResource;

Also note that, 3ach of these methods has its own advantages and use cases, so you can choose the one that best fits your application's requirements.