Skip to main content

Entendiendo los nuevos elementos 'IFRAME' en HTML5

HTML5 y CSS3 - 4 - Más nuevas etiquetas (Junio 2026)

HTML5 y CSS3 - 4 - Más nuevas etiquetas (Junio 2026)
Anonim

El elemento le permite incrustar otras páginas web directamente en su página web. Pero al usar iframes hay algunos problemas de seguridad y diseño que no se abordaron en HTML 4.01. HTML5 trae tres nuevos atributos a este elemento para ayudar a abordar estas preocupaciones:

El atributo sandbox

los salvadera atributo de la IFRAME El elemento es una característica de seguridad muy útil de iframes. Cuando lo colocas en una IFRAME Elemento, le está indicando al agente de usuario que rechace las funciones que podrían causar un riesgo de seguridad para el sitio y sus usuarios.

Por ejemplo:

sandbox = "" >

Le dice al navegador que no permita todas las funciones que podrían ser un riesgo de seguridad. Específicamente, los complementos no están permitidos. No se pueden enviar formularios. Sscripts no se ejecutará y los enlaces fuera de la IFRAME no están permitidos Por último, no se permite el acceso a cookies, almacenamiento local y otras páginas en el mismo dominio (origen).

Luego, usando el salvadera valores de palabras clave, puede volver a habilitar algunas de las características. Estas palabras clave son:

  • formas de permiso- permitir la presentación de formularios
  • permitir el mismo origen: Permitir que los scripts accedan a contenido como cookies del mismo dominio de origen
  • scripts permitidos-Permitir scripts para ejecutar en este IFRAME
  • permitir la navegación superior-Permitir IFRAME enlaces y guiones a la _parte superior objetivo

No es una buena idea establecer tanto scripts permitidos y permitir el mismo origen palabras clave juntas en el mismo IFRAME. Si haces esto, la página incrustada puede eliminar completamente el salvadera atributo, negando cualquier beneficio de seguridad.

El atributo srcdoc

los srcdoc atributo es un atributo que le da al diseñador web más control sobre los iframes, así como más seguridad. En lugar de enlazar a una página web en una URL diferente, el diseñador web coloca el HTML que se mostrará en una IFRAME dentro de srcdoc atributo.

Al principio, podría estar pensando: "¿En qué se diferencia esto de poner el HTML en la página?" Y, en cierto modo, no es muy diferente. Pero hay que tener en cuenta una de las funciones del IFRAME Elemento, que es mantener los datos que no son de confianza separados del resto del sitio.

Al colocar el HTML creado por una fuente no confiable, como un formulario, en un IFRAME puede "sandbox" el contenido que no es de confianza y aún mostrarlo en la página. Los comentarios de blog son un ejemplo. La mayoría de los blogs tienen solo un número limitado de etiquetas HTML que los comentaristas pueden usar en sus comentarios. Pero colocando esos comentarios en una caja de arena. IFRAME utilizando la srcdoc Atributo, los comentarios pueden ser más sólidos a la vez que protegen el sitio como un todo.

Seguridad y iframes

Los dos atributos anteriores proporcionan seguridad para su IFRAME Elementos, pero no son una prueba contra todos los sitios maliciosos. Si el sitio malintencionado puede convencer a un usuario para que acceda al contenido hostil directamente (por ejemplo, escribiendo la URL en su navegador) aún puede ser atacado.

Si es posible, es mejor establecer el contenido que se encuentra en el espacio aislado. IFRAME como el texto / html-sandboxed Tipo MIME.

El atributo sin fisuras

los sin costura atributo es un atributo booleano que le dice al navegador que muestre el IFRAME como si fuera parte del documento padre. Si quieres tu IFRAME para mostrar sin problemas, solo incluya este atributo en el elemento:

sin costura >

Pero haciendo el IFRAME Sin fisuras es más que solo el aspecto, también es la forma en que la página interactúa con el marco. Por ejemplo:

  • Enlaces en el IFRAME se abrirá en la ventana principal, a menos que el IFRAME la página tiene el objetivo _YO conjunto.
  • CSS en el IFRAME Se agregará a la cascada de todo el documento.
  • El elemento raíz de la IFRAME La página es considerada un hijo de la IFRAME.
  • El ancho y alto de la IFRAME se establecen de manera similar a cómo se establecerían otros elementos de nivel de bloque.
  • Cuando el documento principal es visto por una herramienta de representación de voz como un lector de pantalla, el IFRAME sería leído sin anunciarlo como un documento separado.
  • Cualquier script en el documento padre afectaría la IFRAME documento de la misma manera. Por ejemplo, si un script enumera todos los marcos en la página, los enlaces en el IFRAME sería listado también.

En otras palabras, la sin costura atributo hace mucho más que simplemente eliminar los bordes de la IFRAME. Si vas a configurar un IFRAME para que sea transparente, debe estar muy seguro de los contenidos para que no agregue ningún riesgo de seguridad a su sitio web al incrustar un sitio malicioso.