Iframes

Como usar

O termo Iframe quer dizer Inline Frame. Iframes são usados para permitir que você incorpore outros documentos web no documento atual. Isso é ótimo para incorporar vídeos do Youtube, mapas do Google Maps, etc. Exemplo de uso:

<iframe src="base.html"></iframe>

Você pode usar os atributos width e height para redimensionar o iframe:

<iframe src="base.html" width="500" height="350"></iframe>

Você pode mudar o conteúdo do iframe usando um link que usa o nome do iframe como target. O iframe carregará a URL especificada pelo link quando o link for clicado:

<iframe src="exemplo.html" name="iframe-exemplo"></iframe>
<a href="exemplo2.html" target="iframe-exemplo">Mudar Iframe</a>

Você também pode usar o atributo allowfullscreen em um iframe. Ele é um atributo booleano que define se o Iframe pode ser colocado em tela cheia.

<iframe src="exemplo.html" allowfullscreen></iframe>

O conteúdo do Iframe é usado como fallback, caso o navegador não suporte o iframe.

Segurança

Iframes tem sérios problemas de segurança. Eles podem ser usados para modificar a sua página web maliciosamente ou para capturar dados sensitivos. Há algumas medidas que podem ser tomadas para deixar o uso dos Iframes mais seguro.

Uma das medidas é usar o HTTPS. Além da sua função básica de criptografia da comunicação entre o cliente e o servidor, ele também previne que o conteúdo do documento incorporado possa ser acessado pelo documento pai, e vice-versa. Isso deixa os Iframes muito mais seguros.

Outra medida importante é usar o atributo sandbox. Ele impõe uma série de restrições ao iframe, restringindo coisas como o uso de scripts e popups. Ele aplica todas as restrições, por padrão. Como em uma whitelist, você pode passar o que você quer permitir no atributo. Se você quiser permitir mais de uma coisa, use o espaço para separar as permissões. Exemplo:
<iframe src="exemplo.html" sandbox="allow-popups allow-scripts"></iframe>. Se o sandbox tiver um valor vazio, ele aplicará todas as restrições.

Você pode configurar o seu servidor (usando o cabeçalho HTTP X-Frame-Options) para não permitir a incorporação de páginas em iframes.