PostMessage Events Rejected: Undefined parentOrigin in Lex Web UI

[longhornrumble]

I’m experiencing an issue with the AWS Lex Web UI when embedded on our site (https://www.myrecruiter.ai). Although CloudFront is correctly serving our files and CORS is configured properly, our postMessage commands (e.g., to toggle minimize) are being rejected due to an “invalid origin” error.

Reproduction Steps:
1. Embed the Lex Web UI:
Use the standard embed script from CloudFront:

<script src="https://dmztpxvxb3gp8.cloudfront.net/lex-web-ui-loader.min.js"></script> <script> var loaderOpts = { baseUrl: 'https://dmztpxvxb3gp8.cloudfront.net/', shouldLoadMinDeps: true }; var loader = new ChatBotUiLoader.IframeLoader(loaderOpts); var chatbotUiConfig = { ui: { parentOrigin: "https://www.myrecruiter.ai" // Our expected parent origin }, lex: { sessionAttributes: { userAgent: navigator.userAgent } } }; loader.load(chatbotUiConfig).catch(function (error) { console.error(error); }); </script>

2.	Send a PostMessage Command:

From the parent page (https://www.myrecruiter.ai), attempt to send a command:

const iframe = document.getElementById("lex-web-ui-iframe");
iframe.contentWindow.postMessage({ event: "toggleMinimizeUi" }, "https://dmztpxvxb3gp8.cloudfront.net");

3.	Observed Behavior:
•	The Lex Web UI logs an error such as “Ignoring event - invalid origin: https://dmztpxvxb3gp8.cloudfront.net”.
•	Debugging reveals that within the iframe, window.lexWebUiConfig?.ui?.parentOrigin is undefined—even though our config file (lex-web-ui-loader-config.json) and CloudFront settings are correct.

Expected Behavior:
The Lex Web UI should merge our configuration so that parentOrigin is set to “https://www.myrecruiter.ai”. This would allow postMessage events from our site to be accepted and processed by the chatbot.

Notes:
• We’ve verified that:
• The chatbot renders correctly.
• CloudFront response headers include the correct CORS settings.
• The config file is served correctly and includes the proper parentOrigin.
• Despite this, the internal configuration within the Lex Web UI (as used for origin validation) does not reflect our custom settings.

Questions:
• Is there a known issue or a required update in Lex Web UI that might cause the parentOrigin setting not to be merged into the runtime configuration?
• What is the recommended method to ensure that the Lex Web UI correctly recognizes our parent origin so that postMessage commands are accepted?

Any help or guidance on how to resolve this configuration merging issue would be greatly appreciated.

[atjohns]

• Is there a known issue or a required update in Lex Web UI that might cause the parentOrigin setting not to be merged into the runtime configuration?

If you use the CloudFormation deployment, this should all merge correctly. I have seen issues with manually uploading changes to the config that might cause a problem, but generally these are timeouts and fail before postMessage (on the initialization of the iframe). Is your iframe initializing and displaying correctly but erroring when you try to minimize/maximize?

• What is the recommended method to ensure that the Lex Web UI correctly recognizes our parent origin so that postMessage commands are accepted?

No tried and true answer here. Generally just recheck that the CFN parameters are correct and that it matches your embed script correctly. Makes sure the specific web pages are listed and that all Cognito settings are correct (I assume they are in your case otherwise you'd get different errors but it cannot hurt to double-check)