Execute JavaScript in an iframe. Realize communication between parent-child pages

[Rendtime]

Self Checks

• [x] I have searched for existing issues search for existing issues, including closed ones.
• [x] I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
• [x] [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:)
• [x] Please do not modify this template :) and fill in all the required fields.

1. Is this request related to a challenge you're experiencing? Tell me about your story.

hello I use iframes to embed into other websites, and I want to click a button in the agent to execute JS code.

As follows:

<h1>Action</h1>
<button onclick="showChoice()">Fly</button>

<script>
function showChoice() {
console.log("ok");
window.parent.postMessage(‘action_fly', ' http://10.18.2.59:666 ');
}
</script>

HTML code can be executed, but JS code cannot be executed.

I want to send messages to the parent page in the intelligent agent, so that the parent page can receive the messages and perform various functions.

How to make the agents in the iframe execute JS code?

Looking forward to reply, thank

2. Additional context or comments

No response

3. Can you help us with this feature?

• [x] I am interested in contributing to this feature.

[crazywoola]

This function seems to pose potential security risks. Do you have any specific scenarios in mind where it would be used?

[Rendtime]

This function seems to pose potential security risks. Do you have any specific scenarios in mind where it would be used?

Yes, my scene is a map scene on a browser. I need intelligent agents to interact with map scenes. After the intelligent agent calculates some resources, they are displayed in the map scene

[ZeroZ-lab]

This does not seem to be a good practice and may have security issues. We can develop it as a feature, only able to set the postmessage name and value.

[Rendtime]

This does not seem to be a good practice and may have security issues. We can develop it as a feature, only able to set the postmessage name and value.

Great, this way we can communicate instantly with the parent page. If the parent page wants to pass information to the child page, which is the agent in the iframe. For example, the results calculated on the parent page can be further analyzed and processed by AI.

I think there are still many application scenarios for this

expectation

[Rendtime]

This function seems to pose potential security risks. Do you have any specific scenarios in mind where it would be used?

I want to achieve parent-child page communication, which is useful in web applications and even applications For example, in a 3D scene, after the AI executes some results, they need to be displayed in 3D. Conversely, after obtaining some data in the 3D scene, they need to be analyzed by the AI.

Below, I have made a simple diagram. After the AI obtains a certain point, it generates a button. After the user clicks this button, the scene flies to the designated location.

[gstrat88]

I believe both message send and listen could be added as a feature. I have created a custom client that does this job, if you would like I can share, although its bad aesthetically, and more a proof of concept.

There are lot of use cases when you want to execute actions on the parent page.

[Rendtime]

I believe both message send and listen could be added as a feature. I have created a custom client that does this job, if you would like I can share, although its bad aesthetically, and more a proof of concept.

There are lot of use cases when you want to execute actions on the parent page.

Is the customized client you mentioned developed using the DIY API? If there is any example code, please share one, thank you. I originally intended to send messages directly through the dify page, but it seems that this method of JavaScript script cannot run.

[gstrat88]

I believe both message send and listen could be added as a feature. I have created a custom client that does this job, if you would like I can share, although its bad aesthetically, and more a proof of concept. There are lot of use cases when you want to execute actions on the parent page.

Is the customized client you mentioned developed using the DIY API? If there is any example code, please share one, thank you. I originally intended to send messages directly through the dify page, but it seems that this method of JavaScript script cannot run.

I created a gist, actually is more than a test to create a chatbox with a lot of "missing" features using chatgpt (lol) You can ask whatever you want https://gist.github.com/gstrat88/624745f759a186987ae593ed52220dff

[Rendtime]

I believe both message send and listen could be added as a feature. I have created a custom client that does this job, if you would like I can share, although its bad aesthetically, and more a proof of concept. There are lot of use cases when you want to execute actions on the parent page.

Is the customized client you mentioned developed using the DIY API? If there is any example code, please share one, thank you. I originally intended to send messages directly through the dify page, but it seems that this method of JavaScript script cannot run.

I created a gist, actually is more than a test to create a chatbox with a lot of "missing" features using chatgpt (lol) You can ask whatever you want https://gist.github.com/gstrat88/624745f759a186987ae593ed52220dff

nice， The basic structure has been established

[gstrat88]

you can gist back if you would like :P

[dosubot[bot]]

Hi, @Rendtime. I'm Dosu, and I'm helping the Dify team manage their backlog and am marking this issue as stale.

Issue Summary:

• You inquired about executing JavaScript inside an iframe on other sites and enabling communication between parent and iframe via postMessage.
• Maintainers raised security concerns and suggested limiting functionality to setting postMessage name and value only.
• Contributor gstrat88 provided a proof-of-concept custom client for message sending and listening, which you found helpful.
• The issue remains unresolved, with ongoing interest in secure, controlled iframe-parent communication features.

Next Steps:

• Please let me know if this issue is still relevant to the latest version of Dify by commenting here to keep the discussion open.
• Otherwise, this issue will be automatically closed in 15 days.

Thank you for your understanding and contribution!