In this blog post, we will learn how to block the display of Power Apps (both Model-Driven and Canvas) in iFrames. Before we begin, ensure you subscribe to CRM Crate to remain informed about the latest developments in the Power Platform field.
Power Apps is a part of Microsoft’s Power Platform, designed to let users create custom apps with little to no coding. It comes in two main types: Model-Driven Apps and Canvas Apps.
Canvas Apps
Canvas Apps are like a blank canvas. You start from scratch and design the app by dragging and dropping elements, much like creating a PowerPoint presentation. This approach gives you complete control over the app’s appearance and functionality, making it highly customizable. You can connect to a wide range of data sources, use custom logic, and build tailored user experiences. It’s great for situations where you need a specific look and feel or when your app’s flow is unique.
Model-Driven Apps
Model-Driven Apps, on the other hand, are built around your data model and business processes. Instead of focusing on the design first, you start by defining the data structure and relationships. The app’s layout and interface are then automatically generated based on these definitions, although you can still customize it to some extent. This type is excellent for complex business applications where the data structure and processes are central, like CRM systems or case management tools.
In essence, Canvas Apps offer more flexibility in design, while Model-Driven Apps provide a more structured and data-centric approach. Both types enable businesses to create solutions tailored to their specific needs without requiring extensive coding knowledge.
Content Security Policy to prevent Power Apps from being displayed within an iFrame.
Content Security Policy (CSP) is now available for both model-driven and canvas Power Apps. Admins have control over whether the CSP header is included and can adjust its contents to some extent. These settings are applied at the environment level, so once you enable them, they affect all apps within that environment.
You can toggle and configure CSP through the Power Platform admin center. It’s a good idea to start by enabling it in a development or test environment first, as it might block certain scenarios if the policy isn’t set up correctly.
To set up CSP, go to the Power Platform admin center, then follow this path: Environments -> Settings -> Privacy + Security. The image below shows how the settings look by default.
After enabling the Content Security Policy for Model-Driven and Canvas Apps, the dedicated Power App for the Power Platform environment will no longer be displayed in HTML iframes on external web pages.
Below, the first image demonstrates the Model-Driven App being embedded within an external website using an HTML iFrame. In contrast, the second image shows that the Model-Driven App is not displayed on the external website due to the Content Security Policy (CSP) being enabled.
Blocking the display of Power Apps (both Model-Driven and Canvas) in iFrames is a crucial step for enhancing security and ensuring a seamless user experience. By preventing iFrame embedding, organizations can mitigate risks such as clickjacking and data leakage, while also maintaining control over how their applications are accessed and interacted with. Implementing this restriction not only helps safeguard sensitive data but also aligns with best practices for application security and user interface integrity. It is important for administrators and developers to configure these settings properly and regularly review their security policies to adapt to any evolving threats or requirements.
