UmbrellaFrame IFrame

UmbrellaFrame IFrame is a Power Apps Component Framework (PCF) control that renders a configurable iframe inside model-driven or canvas apps. It can load either a trusted URL through src or inline HTML through srcdoc.

Features

• Embed trusted web content with src.
• Render inline HTML with srcdoc when no URL is provided.
• Configure width, height, feature policy, fullscreen, payment request, sandbox, referrer policy, loading behavior, and accessible title from Power Apps properties.
• Defaults to 300x150 when no valid dimensions are provided.
• Removes inactive iframe attributes instead of leaving stale values behind.

Properties

Property	Type	Required	Description
controlSRC	SingleLine.Text	No	URL to load in the iframe. Takes precedence over controlSRCDOC.
controlSRCDOC	SingleLine.TextArea	No	Inline HTML to render when controlSRC is empty.
controlWidth	Decimal	No	Iframe width. Defaults to 300 when empty or less than/equal to zero.
controlHeight	Decimal	No	Iframe height. Defaults to 150 when empty or less than/equal to zero.
controlAllow	SingleLine.Text	No	Feature policy value for the iframe allow attribute.
controlAllowPaymentRequest	TwoOptions	No	Enables the allowpaymentrequest boolean attribute when true.
controlAllowfullScreen	TwoOptions	No	Enables the allowfullscreen boolean attribute when true.
controlSandbox	SingleLine.Text	No	Sandbox permissions, for example allow-scripts allow-forms.
controlReferrerPolicy	SingleLine.Text	No	Referrer policy, for example no-referrer or strict-origin-when-cross-origin.
controlTitle	SingleLine.Text	No	Accessible iframe title. Defaults to Embedded content.
controlLoading	SingleLine.Text	No	Browser loading behavior, usually lazy or eager.

Security And Licensing

An iframe can connect the user's browser to external services. In Power Apps, PCF controls that connect to external services are premium controls and should declare external usage in ControlManifest.Input.xml.

This control sets external-service-usage enabled="true" because the maker can configure external iframe URLs. For a locked-down internal release, add every approved domain to the manifest before packaging:

<external-service-usage enabled="true">
  <domain>contoso.com</domain>
  <domain>apps.contoso.com</domain>
</external-service-usage>

Recommended production settings:

• Prefer allowlisted HTTPS URLs.
• Use controlSandbox with the smallest permissions that still work.
• Set a meaningful controlTitle for screen readers.
• Avoid embedding pages that deny framing through X-Frame-Options or Content-Security-Policy.
• Treat srcdoc content as trusted content only.

Development

Install dependencies:

npm.cmd install

Build the PCF control:

npm.cmd run build

Run lint:

npm.cmd run lint

Start the local PCF harness:

npm.cmd start

npm.cmd is used in the examples because PowerShell execution policy can block the npm.ps1 shim on some Windows machines.

Packaging

The project includes a solution project at UmbrellaFrameIframeSolution/UmbrellaFrameIframeSolution.cdsproj.

Debug builds produce an unmanaged package for development. Release builds produce a managed package suitable for distribution:

dotnet build .\UmbrellaFrameIframeSolution\UmbrellaFrameIframeSolution.cdsproj -c Release

Import the generated solution zip into the target Power Platform environment, then publish customizations.

Release Checklist

1. Update the version in UmbrellaFrameIframeControl/ControlManifest.Input.xml.
2. Add approved external domains to external-service-usage.
3. Run npm.cmd run lint.
4. Run npm.cmd run build.
5. Build the solution in Release configuration.
6. Attach the managed solution zip to a GitHub release.

Repository Hygiene

Generated folders such as .vs/, obj/, bin/, and out/ should not be committed. If they are already tracked, remove them from Git history/index in a cleanup commit:

git rm -r --cached .vs obj out UmbrellaFrameIframeSolution/bin UmbrellaFrameIframeSolution/obj
git commit -m "Remove generated build artifacts"