O conteúdo incorporado é a melhor maneira de manter os usuários no seu site e, ao mesmo tempo, compartilhar conteúdo de outras páginas ou sites. Ele pode ser pequeno, como um tweet incorporado, que aparece no estilo e formato do Twitter. Ele pode ser um site totalmente separado incorporado ao seu, como uma loja incorporada da Shopify em que os visitantes podem fazer uma compra sem sair do site.
Agora, mais do que nunca, é importante que nossos sites permaneçam seguros ao incorporar conteúdo.
Os desenvolvedores podem incorporar conteúdo a um site de várias maneiras. A técnica mais comum é usar uma <iframe>, que permite incorporar qualquer conteúdo no seu site apenas com um URL. Já é
possível adicionar o atributo sandbox para tornar um iframe mais seguro.
Como alternativa, você pode usar um elemento HTML proposto:
- O método
<fencedframe>foi proposto como uma forma de incorporar conteúdo de terceiros que preserva a privacidade. - O
<portal>foi proposto para proporcionar transições de página mais perfeitas.
Continue lendo para saber como melhorar a segurança do seu conteúdo incorporado.
Incorporar com iframes
Iframes podem ser usados para todos os tipos de casos de uso, como adicionar mapas ou formulários a uma página de contato e exibir anúncios.
<iframe src="https://example.com/maps"></iframe>
Cada iframe tem o próprio contexto de navegação, com o próprio histórico de sessão e documento. O contexto que incorpora o iframe é chamado de contexto de navegação parent.
O conteúdo de terceiros exibido em um iframe pode interagir com o site pai
pela postMessage(). Isso permite que os desenvolvedores enviem valores arbitrários entre
contextos de navegação. O receptor da mensagem pode usar o listener de eventos onmessage
para receber os valores.
// inside iframe
window.parent.postMessage("ping", "https://example.com");
// window
window.addEventListener("message", (event) => {
console.log(event.data);
})
Mais segurança com o atributo sandbox.
Se algum conteúdo malicioso for implantado em um iframe, é possível que ações não intencionais (como uma execução de JavaScript ou o envio de formulário) possam ser executadas.
Para evitar isso, o atributo sandbox restringe as
APIs executáveis no iframe e desativa recursos potencialmente nocivos.
<iframe src="https://example.com" sandbox></iframe>
O sandbox pode tornar indisponíveis determinadas APIs importantes para seu conteúdo incorporado. Para permitir uma API desativada, adicione explicitamente um argumento ao atributo sandbox.
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
Há vários valores possíveis para a
especificação sandbox,
incluindo allow-forms, allow-same-origin, allow-popups e
muito mais.
Política de permissões
À medida que recursos cada vez mais eficientes são desenvolvidos para a Web, políticas de permissões foram criadas para gerenciar as permissões de todos eles. Uma política de permissões
pode ser aplicada a um site pai e ao conteúdo de iframe. As permissões concedidas
a um site pai também podem ser concedidas ao iframe usando o atributo allow.
<iframe src="https://example.com" allow="fullscreen"></iframe>
Incorporar com frames delimitados
Um frame isolado (<fencedframe>) é um
elemento HTML proposto para o conteúdo incorporado, semelhante a um iframe. Ao contrário
de um iframe, um frame isolado restringe a comunicação com o contexto de embedding para
permitir que o frame acesse dados entre sites sem compartilhá-los com o contexto
de incorporação. Da mesma forma, os dados próprios na página do pai não podem ser compartilhados com
o frame isolado.
<fencedframe src="https://3rd.party.example"></fencedframe>
Fenced Frames é uma proposta do Sandbox de privacidade (link em inglês) que sugere que sites de nível superior particionam dados. Muitas das propostas do Sandbox de privacidade têm como objetivo atender a casos de uso entre sites, sem a necessidade de cookies de terceiros ou outros mecanismos de rastreamento. Algumas APIs do Sandbox de privacidade podem exigir que alguns documentos sejam renderizados em um frame isolado.
Por exemplo, um frame isolado será criado para o vencedor do leilão de anúncios da API FLEDGE. A API FLEDGE vai fornecer uma fonte opaca, um esquema URN independente de local, que pode ser renderizado dentro de um frame delimitado. As origens opacas permitem que os sites exibam conteúdo nos sites sem revelar o URL da origem do anúncio ao proprietário do site.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
Em última análise, frames isolados não vão substituir iframes. Você não precisará usá-los. Os frames delimitados são propostos como um frame mais particular para uso quando os dados de diferentes partições de nível superior precisam ser exibidos na mesma página.
Incorporar com portais
O portal (<portal>) é um elemento HTML proposto com um contexto de navegação independente, que pode melhorar a experiência de transição da página. Os portais incorporam conteúdo como o iframe, mas o usuário não pode acessar o código do portal. Os usuários não podem interagir com um portal somente para visualização.
Os portais oferecem a baixa complexidade de um aplicativo de várias páginas com as transições perfeitas de um aplicativo de página única. Essas transições podem ser animadas, substituindo rapidamente o conteúdo na janela do navegador.
<portal src="https://example.com/"></portal>
A especificação do portal ainda está nos estágios iniciais de desenvolvimento.
Outros elementos HTML usados para incorporações
Ao longo da história da Web, vários elementos HTML foram propostos e APIs foram criadas para incorporar conteúdo. Por um tempo, era comum criar sites com
vários elementos <frame>
e
<frameset>. Sites com vários elementos <frameset> exibiam o URL da
página pai na barra de endereço, independentemente da origem dos muitos frames
individuais. Isso dificultava o compartilhamento de links para o conteúdo do site. Essas
APIs foram descontinuadas.
Houve um tempo em que as tecnologias de plug-in, como o elemento <applet>
do Java, eram usadas para cobrir outros casos de uso. Posteriormente, ele foi substituído pelo
elemento <object>. Esses dois elementos eram comumente usados para exibir plug-ins em Flash, mas também eram usados para exibir outros elementos HTML (semelhantes a iframes).
Outros elementos, como <canvas>, <audio>, <video> e <svg>,
renderizaram os elementos <object> e <applet> como obsoletos.
Embora <object> e <embed> ainda não tenham sido oficialmente descontinuados, é melhor
evitá-los, especialmente porque têm alguns comportamentos estranhos.
O <applet> foi removido da especificação HTML em 2017.
Conclusão
É possível incorporar conteúdo a qualquer site com segurança usando as especificações de iframe atuais. Outros elementos HTML, incluindo <fencedframe> e <portal>, foram propostos para melhorias de segurança e estilo. Vamos continuar a compartilhar
o progresso da proposta Fenced Frames à medida que
ela avança.
Imagem principal por Jackson So.