Atributos de contenido, seguridad y diseño para IFRAME

La iframe elemento incrusta otras páginas web directamente en la página actual. HTML5 presenta tres nuevos atributos a este elemento para ayudar a abordar las preocupaciones de seguridad y usabilidad de HTML4 iframe implementación.

El atributo 'sandbox'

La salvadera atributo del iframe element es una función de seguridad útil para iframes. Cuando lo colocas en un iframe elemento, el agente de usuario no permite funciones que puedan presentar un riesgo de seguridad para el sitio y sus usuarios.

Por ejemplo:

le indica al navegador que no permita todas las funciones que puedan ser un riesgo para la seguridad, por lo que no se permiten complementos, formularios, scripts, enlaces salientes, galletas, almacenamiento local y acceso a la página del mismo sitio.

Luego, usando el salvadera valores de palabras clave, vuelva a habilitar algunas de las funciones. Estas palabras clave son:

  • permisos-formularios: Permitir el envío de formularios.
  • permitir-mismo-origen: Permite que los scripts accedan a contenido como cookies del mismo dominio de origen.
  • instagram viewer
  • permitir-scripts: Permita que los scripts se ejecuten en este IFRAME.
  • allow-top-navigation: Permite que los enlaces y las secuencias de comandos de iframe lleguen al destino "_top"

No establezca ambos permitir-scripts y permitir-mismo-origen palabras clave juntas en el mismo iframe. Si lo hace, la página incrustada puede eliminar el salvadera atributo, negando sus beneficios de seguridad.

El atributo 'srcdoc'

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

Al colocar HTML creado por una fuente que no es de confianza, como un formulario, en un iframe puede aislar el contenido que no es de confianza y seguir mostrándolo en la página. Los comentarios de blogs son un ejemplo. La mayoría de los blogs ofrecen solo un número limitado de etiquetas HTML que los comentaristas pueden usar en sus comentarios. Pero colocando esos comentarios en un espacio aislado iframe utilizando la srcdoc atributo, los comentarios pueden ser más robustos sin dejar de proteger el sitio en su conjunto.

Seguridad e iframes

Los dos atributos anteriores brindan seguridad para su iframe elementos, pero no son una defensa contra todos los sitios maliciosos. Si el sitio malicioso puede convencer a los visitantes de su sitio para que accedan al contenido hostil directamente (por ejemplo, escribiendo la URL en su navegador), aún pueden ser atacados.

Si puede, configure el contenido que está en la zona de pruebas iframe como el texto / html-sandboxed Tipo de Mimica.

El atributo 'transparente'

La sin costura El atributo es un atributo booleano que le dice al navegador que muestre el iframe como si fuera parte del documento principal. Si quieres tu iframe para que se muestre sin problemas, solo incluye este atributo en el elemento:

Pero haciendo el iframe Seamless es más que solo la apariencia, también es la forma en que la página interactúa con el marco. Algunos consejos:

  • Enlaces en el iframe se abrirá en la ventana principal a menos que el iframe la página tiene el objetivo "_SELF" establecido.
  • CSS en el iframe se agregará a la cascada de todo el documento.
  • El elemento raíz de la iframe la página se considera un elemento secundario de la iframe.
  • El ancho y alto del iframe se establecen de manera similar a cómo otros elementos a nivel de bloque se establecería.
  • Cuando el documento principal es visualizado por una herramienta de procesamiento de voz como un lector de pantalla, el iframe se leería sin anunciarlo como un documento separado.

Cualquier secuencia de comandos en el documento principal afectaría la iframe documento de la misma manera. Por ejemplo, si una secuencia de comandos enumera todos los marcos de la página, los enlaces en el iframe también aparecería en la lista.

En otras palabras, el sin costura El atributo hace mucho más que eliminar los bordes del iframe. Si va a establecer un iframe Para que sea fluido, debe estar muy seguro del contenido para no agregar ningún riesgo de seguridad a su sitio web al incrustar un sitio malicioso.