Compartir por

Inserción de una aplicación de código en un iframe

En este artículo se explica cómo insertar una aplicación de código en un iframe dentro de un host externo, como un recurso web de aplicación controlada por modelos, un sitio web personalizado u otro servicio que admita iframes. Dado que las aplicaciones de código aplican la directiva de seguridad de contenido (CSP) de forma predeterminada, debe actualizar la frame-ancestors directiva para permitir que el host cargue la aplicación.

Nota:

  • Solo los usuarios de Power Apps dentro del mismo tenant pueden acceder a una aplicación de código embebida. No puede compartir la dirección URL de iframe con usuarios fuera de su tenant.
  • No se pueden insertar aplicaciones de código en ninguna aplicación de escritorio nativa, que incluye Android e iOS. Esta limitación excluye las integraciones de primera parte, como Power Apps en Teams.

Prerrequisitos

  • Debe ser administrador del entorno de Power Platform para actualizar la configuración de CSP.
  • La aplicación de código debe implementarse en un entorno.

Obtención de la dirección URL de la aplicación de código

Para insertar una aplicación de código, necesita su dirección URL de reproducción. La dirección URL tiene la siguiente forma:

https://apps.powerapps.com/play/e/{environmentId}/app/{appId}?tenantid={tenantId}

Puede encontrar la dirección URL completa abriendo la aplicación en Power Apps y copiando la dirección desde el explorador. tenantId es un parámetro de consulta opcional para admitir el acceso de invitado y determina desde qué arrendatario abrir la aplicación.

Agregar el iframe a su host

Después de obtener la URL de la aplicación de código, agregue un elemento <iframe> al código HTML de su host. Sustituya la dirección URL de la aplicación por el src valor y establezca el ancho y alto según corresponda para el diseño.

<iframe
  width="1200"
  height="800"
  src="https://apps.powerapps.com/play/e/{environmentId}/{appId}"
  title="My code app">
</iframe>

Nota:

Si la aplicación de código usa la geolocalización del dispositivo, el micrófono, la cámara, la pantalla completa o las API del Portapapeles, incluya los permisos correspondientes en el allow atributo :

<iframe ... allow="geolocation; microphone; camera; fullscreen; clipboard-write"></iframe>

Configuración de CSP para permitir el uso de iframes

De forma predeterminada, las aplicaciones de código usan la siguiente frame-ancestors directiva, que restringe qué orígenes pueden cargar la aplicación en un marco:

frame-ancestors 'self' https://*.powerapps.com

Si inserta una aplicación de código en cualquier host fuera de https://*.powerapps.com, como una aplicación controlada por modelos, una instancia de Dynamics 365 o un sitio web personalizado, el explorador bloquea el marco y registra una infracción de CSP similar a la siguiente:

Refused to frame 'https://<environment>.powerplatformusercontent.com/' because it violates the following Content Security Policy directive: "frame-ancestors 'self' https://*.powerapps.com"

Para resolver este problema, agregue el origen del host a la directiva frame-ancestors para el entorno. Por ejemplo:

  • Para una aplicación Dynamics 365 o controlada por modelos: https://<your-org>.crm.dynamics.com
  • Para un dominio personalizado: https://contoso.com

Importante

Los valores personalizados se combinan con el valor predeterminado frame-ancestors . Después de guardar, la directiva efectiva es:

frame-ancestors 'self' https://*.powerapps.com https://<your-org>.crm.dynamics.com

Para obtener instrucciones sobre cómo actualizar la frame-ancestors directiva mediante el Centro de administración de Power Platform o la API REST, consulte Configuración de la directiva de seguridad de contenido.

Configuración de la directiva de seguridad de contenido
arquitectura

  • Last updated on