Principle:Langgenius Dify WebAppPublishing
| Knowledge Sources | Dify |
|---|---|
| Domains | Frontend, Embedding, Publishing |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
Web App Publishing defines how Dify applications are embedded into third-party websites via iframe and chatbot widgets with configurable appearance options.
Description
The Web App Publishing principle governs the mechanism by which Dify-powered applications can be distributed and embedded within external websites. The primary embedding approach uses an iframe-based widget that loads the Dify application within a sandboxed context on the host page. A complementary chatbot widget provides a floating chat interface that can be triggered by user interaction, offering a less intrusive integration option.
The widget system provides a JavaScript API that host pages use to configure appearance, behavior, and communication parameters. Configuration options include theme colors, initial messages, position on the page, trigger button style, and allowed domains. The API is designed to be minimal and declarative, allowing non-technical users to embed Dify applications with just a few lines of HTML and JavaScript.
Security is a central concern for the embedding system. The iframe sandbox restricts the embedded application's capabilities, and cross-origin communication between the widget and host page follows the postMessage protocol with origin validation. The widget respects Content Security Policy headers and provides clear documentation of the permissions it requires, enabling host sites to maintain their security posture while integrating Dify applications.
Usage
Use this principle when:
- Modifying the embed widget JavaScript API or its configuration options
- Implementing new widget display modes or interaction patterns
- Updating the security model for cross-origin communication between widget and host page
Theoretical Basis
Web App Publishing follows the principle of Encapsulation from software engineering, where the embedded application is isolated from the host page through well-defined boundaries. The iframe sandbox model implements the Principle of Least Privilege, granting only the permissions necessary for the widget to function. The postMessage-based communication pattern aligns with the Actor Model, where isolated components communicate through asynchronous message passing.