🖼️Iframes

Si requieres embeber un sitio donde esté el widget presente a través de un iframe, debes tener en consideración que existen requisitos de seguridad a cumplir para que no existan conflictos en el uso de cámara, micrófono, pantalla completa, gps, etc.

Atributos

Lo primero que debes considerar es que debes añadir dos atributos olbigatorios allow y allowfullscreen, de lo contrario no funcionará correctamente el embebido.

<iframe src="..." allow="camera; microphone; autoplay; fullscreen; picture-in-picture" allowfullscreen="true"></iframe>

Permisos extras

Si requieres de otros permisos como GPS, giroscopio, sensor de luz, etc. deberás añadirlos al atributo allow basado en la documentación MDN.

<iframe 
  src="https://tu-aplicacion.com" 
  allow="camera; microphone; autoplay; fullscreen; picture-in-picture; geolocation; gyroscope; accelerometer"
  allowfullscreen="true"
  sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals"
  width="400" height="600">java</iframe>

Explicación de Atributos

Atributo	Proósito	Requerido
allow="autoplay"	Permite reproducción automática de audio/video
allow="camera"	Acceso a la cámara del dispositivo
allow="microphone"	Acceso al micrófono del dispositivo
allow="fullscreen"	Permite modo pantalla completa
allowfullscreen="true"	Atributo legacy para pantalla completa
allow="picture-in-picture"	Modo picture-in-picture
allow="geolocation"	GPS (si usas funciones de localización)

⚠️ Consideraciones Importantes

Usando librerías

También te sugiremos para evitar problemas de dominio cruzado el uso de nuestra librería de código abierto iFrameX, que te permitirá crear iframes sin necesidad de un source diferente al actual, inyectando el contenido Javascript, CSS y HTML de forma dinámica.

Not found