Cómo Crear un iframe en HTML

En este tutorial vamos a ver cómo crear iframes mediante la etiqueta iframe de HTML. Esta etiqueta nos permite incluir el contenido de otros sitios web u orígenes en nuestra web, de modo que los contenidos del iframe no interfieran con nuestra página. Es decir, que existe un contexto para el contenido del iframe y otro para el contenido de nuestra página, por lo que ni la ejecución de código JavaScript ni los estilos CSS del iframe afectarán a la página que incluya un iframe, y viceversa.

Habrás podido comprobar que en muchas páginas web de programación se incluyen bloques de código independientes desde Codepen, jsFiddle o Glitch, pudiendo ver tanto el código que se incluye como el resultado del mismo, sin que ello afecte a la página en la que se muestran los contenidos. Esto se consigue mediante iframes.

La etiqueta iframe

Para crear un iframe basta con que uses la etiqueta iframe, que consta de una etiqueta de apertura y otra de cierre, especificando la URL que quieres que se incluya mediante el atributo src:

<iframe src="/pagina"></iframe>

También puedes cargar páginas externas si especificas una ruta absoluta:

<iframe src="https://www.otraweb.com/pagina"></iframe>

Configura el tamaño del iframe

Para especificar el tamaño del iframe puedes usar los atributos width y height, que sirven para especificar la anchura y la altura del mismo:

<iframe src="/pagina" width="600" height="400"></iframe>

Los atributos width y height tienen por defecto los valores 300 y 150 respectivamente.

Atributo srcdoc: Establece los contenidos del iframe

Además de definir el origen del iframe con el atributo src, también podemos usar el atributo srcdoc para establecer el contenido del iframe. Por ejemplo, podemos pasarle código HTML a este atributo para que se muestre en el interior del iframe:

<iframe srcdoc="<p>Esto es código HTML</p>"></iframe>

Has de saber que el atributo srcdoc es relativamente nuevo, por lo que no está soportado ni por Internet Explorer ni por el navegador Edge en su versión 18 o inferior.

Atributo sandbox: restringe los contenidos del iframe

En muchas ocasiones, el contenido de los iframes incluye scripts o eventos como envíos de formularios o ventanas emergentes. Mediante el atributo sandbox podemos establecer el comportamiento del contenido de un iframe, definiendo aquellos elementos o eventos que están permitidos y aquellos que no.

Si omites el atributo sandbox, todos los elementos y eventos estarán permitidos:

<iframe src="/pagina"></iframe>

Si agregas el atributo sandbox, podrás definir una lista con una o más opciones que representa a aquellos elementos o eventos que estarán permitidos. Para especificar varias opciones, estas deben estar separadas por un espacio:

<iframe src="/pagina" sandbox="allow-forms allow-scripts"></iframe>

A continuación tienes una lista con algunas de las opciones más utilizadas del atributo sandbox:

• allow-forms: Permitir el envío de formularios desde el iframe.
• allow-modals: Permitir que se abran ventanas modales, como por ejemplo los eventos alert() de JavaScript.
• allow-orientation-lock: Permitir que se bloquee la orientación de la pantalla.
• allow-pointer-lock: El iframe podrá bloquear el cursor del usuario (sufre!).
• allow-popups: Permitir que se muestren ventanas emergentes, como las que se crean con las funciones window.open() o showModalDialog(), además de los enlaces que incluyan el atributo target="_blank".
• allow-same-origin: El recurso cargado mediante el iframe será tratado como si se hubiese cargado desde el mismo origen que la página en la que se muestra.
• allow-scripts: Se permitirá la ejecución de scripts en el iframe, salvo aquel código encargado de crear ventanas emergentes.
• allow-top-navigation: El iframe tendrá acceso al nivel de contexto más alto de la página que se muestra en el navegador, por lo que el JavaScript que se ejecute en su interior podrá hacer referencia a la página en la que se muestra.
• allow-top-navigation-by-user-activation: Esta opción tiene el mismo funcionamiento que la opción allow-top-navigation, con la diferencia de que solamente se le permitirá al iframe acceder al código de la página en la que se muestra si el usuario ha realizado alguna acción.

En caso de que el atributo sandbox esté presente pero no incluya ninguna opción, se asumirá que ninguna de las opciones anteriores está permitida.

Atributo allow: Comparte recursos con un iframe

El atributo allow es todavía un atributo experimental, por lo que solamente está soportado por navegadores basados en Chromium, como Chrome u Opera. El atributo allow es similar al atributo sandbox, pero sirve para que el iframe pueda tener acceso a ciertas funcionalidades de la página que lo contiene. Las opciones deben estar separadas por un espacio:

<iframe src="/pagina" sandbox="camera geolocation"></iframe>

A continuación tienes una lista con algunas de las opciones más utilizadas del atributo allow:

• accelerometer: Conceder permiso al iframe para que tenga acceso a la API que se encarga de interactuar con el acelerómetro del dispositivo.
• ambient-light-sensor: Conceder permiso al iframe para que tenga acceso a la API que se encarga de interactuar con el sensor de luz ambiental del dispositivo.
• magnetometer: Conceder permiso al iframe para que tenga acceso a la API que se encarga de interactuar con los sensores del Magnetómetro del dispositivo.
• gyroscope: Conceder permiso al iframe para que tenga acceso a la API que se encarga de interactuar con los sensores del Giroscopio del dispositivo.
• geolocation: Conceder permiso al iframe para que tenga acceso a la API de la geolocalización.
• payment: Conceder permiso al iframe para que tenga acceso a la API de pagos de la página en la que se encuentra, también conocida como  Payment Request API.
• midi: Conceder permiso al iframe para que tenga acceso a la API Web MIDI.
• usb: Conceder permiso al iframe para que tenga acceso a la WebUSB API Web USB.
• autoplay: Permitir que los vídeos o las pistas de audio del iframe se reproduzcan automáticamente.
• speaker: Permitir que el iframe pueda reproducir audio por los altavoces del dispositivo.
• camera: Conceder permiso al iframe para que tenga acceso a la cámara mediante la API getUserMedia.
• microphone: Conceder permiso al iframe para que tenga acceso al micrófono mediante la API getUserMedia.
• display-capture: Conceder permiso al iframe para que tenga acceso a la cámara mediante la API getDisplayMedia.
• fullscreen: Permitir que el iframe tenga acceso a la pantalla completa.
• vibrate: Permitir que el iframe pueda emitir vibraciones en el dispositivo mediante la Vibration API.
• vr: Permitir que el iframe pueda tener acceso a la WebVR API de realidad virtual, aunque esta API ha sido sustituida por la API WebXR Device API.
• xr-spatial-tracking: Permitir que el iframe pueda tener acceso a los sensores de distancia de la WebXR API de realidad virtual.

Ninguna de estas opciones estará permitida salvo que se se indique específicamente mediante el atributo allow.

Atributo referrerpolicy: Comparte información con un iframe

Cuando se carga un iframe se envía información al mismo desde la página en la que se carga mediante la cabecera Referer. Esta cabecera proporciona información acerca de la página y el usuario que carga el iframe. Gracias al atributo referrerpolicy podemos establecer los datos que se compartirán con el iframe:

<iframe src="/pagina" referrerpolicy="origin"></iframe>

A continuación tienes la lista de valores que acepta el atributo referrerpolicy:

• no-referrer-when-downgrade: Envía información del referido al iframe en la cabecera Referer siempre y cuando la página disponga de un certificado SSL, utilizando ésta el protocolo HTTPS. El iframe puede cargarse mediante el protocolo HTTP. Este es el valor que este atributo tiene por defecto.
• no-referrer: No se enviará la cabecera Referer al iframe.
• origin: Se enviará la cabecera Referer al iframe, aunque solamente contendrá información acerca del origen, como el dominio, el protocolo y el puerto. No se enviará el path.
• same-origin: Solamente se enviará la cabecera Referer si el origen de la página y el del iframe es el mismo.
• strict-origin: Se enviará la cabecera Referer con el origen si tanto el iframe como la página en la que se incluye el iframe usan el protocolo HTTPS. Si el iframe se carga mediante el HTTPS, no se enviará nada.
• origin-when-cross-origin: Cuando el origen o el dominio junto con el puerto y el protocolo de la página sea el mismo que el del iframe, se enviará tanto tanto el origen como el path en la cabecera Referer. De lo contrario, solamente se enviará el origen.
• strict-origin-when-cross-origin: Se enviará tanto el origen como el path en la cabecera Referer si la página y el iframe que se carga en la misma pertenecen al mismo origen. Se enviará tanto el origen como el path si la página y el iframe se cargan mediante el protocolo HTTPS, pero no se enviará nada si el iframe se carga mediante el protocolo HTTP.
• unsafe-url: Se enviará tanto el origen como el path en la cabecera Referer cuando la página actual use el protocolo HTTPS pero el iframe use el protocolo HTTP.

Y esto ha sido lo más relevante acerca del uso de iframes.

---