O conteúdo incorporado é a melhor maneira de manter os usuários no seu site e compartilhar conteúdo de outras páginas ou sites. Isso pode ser tão pequeno quanto um Tweet incorporado, que é exibido no estilo e formato do Twitter. Ele pode ser tão grande quanto um site totalmente separado incorporado ao seu, como uma loja da Shopify incorporada em que os visitantes podem fazer uma compra sem sair do seu site.
Agora mais do que nunca, é importante que nossos sites permaneçam seguros quando incorporamos conteúdo.
Há várias maneiras de os desenvolvedores incorporarem conteúdo em um site. A técnica mais comum é usar um
<iframe>,
que permite incorporar qualquer conteúdo ao seu site com apenas um URL. Já é possível adicionar o atributo sandbox para tornar um iframe mais seguro.
Como alternativa, use um elemento HTML proposto:
- O
<fencedframe>é proposto como uma maneira de preservar a privacidade ao incorporar conteúdo de terceiros. - O
<portal>é proposto para transições de página mais fluidas.
Leia este artigo para saber como melhorar a segurança do seu conteúdo incorporado.
Incorporar com iframes
Os 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 pai.
O conteúdo de terceiros exibido em um iframe pode interagir com o site principal
usando postMessage(). Isso permite que os desenvolvedores enviem valores arbitrários entre
contextos de navegação. O receptor de mensagens 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 um iframe tiver conteúdo malicioso, é possível que ações não intencionais (como uma execução de JavaScript ou envio de formulário) sejam executadas.
Para evitar isso, o sandbox attribute restringe as
APIs executáveis no iframe e desativa recursos potencialmente prejudiciais.
<iframe src="https://example.com" sandbox></iframe>
O Sandbox pode indisponibilizar algumas 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
mais.
Política de permissões
À medida que recursos cada vez mais poderosos foram desenvolvidos para a Web, as 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 principal e ao conteúdo de iframe. As permissões concedidas
a um site principal também podem ser concedidas ao iframe usando o atributo allow.
<iframe src="https://example.com" allow="fullscreen"></iframe>
Incorporar com frames isolados
Um frame isolado (<fencedframe>) é um elemento HTML proposto para conteúdo incorporado, semelhante a um iframe. Ao contrário de um iframe, um frame isolado restringe a comunicação com o contexto de incorporação para permitir o acesso a dados entre sites sem compartilhar frames com esse contexto. Da mesma forma, os dados próprios na página do familiar responsável não podem ser compartilhados com o frame isolado.
<fencedframe src="https://3rd.party.example"></fencedframe>
Os frames isolados são uma proposta do Sandbox de privacidade que sugere que os sites de nível superior particionem os dados. Muitas das propostas do Sandbox de privacidade visam atender a casos de uso entre sites sem cookies de terceiros ou outros mecanismos de rastreamento. Algumas APIs do Sandbox de privacidade podem exigir que determinados 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 de URN independente de local que pode ser renderizado em um frame isolado. Com as fontes opacas, os sites podem mostrar conteúdo sem revelar o URL de origem do anúncio ao proprietário do site.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
No fim das contas, os frames isolados não vão substituir os iframes. Não será necessário usá-los. Os frames isolados são propostos para um frame mais particular para uso quando dados de diferentes partições de nível superior precisam ser mostrados na mesma página.
Incorporar com portais
Portal (<portal>) é um elemento HTML proposto com um contexto de navegação independente, que pode melhorar a experiência de transição de página. Os portais incorporam conteúdo como iframe, mas o usuário não pode acessar o código do portal. Um portal é somente leitura e não pode ser usado pelos
usuários.
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 criadas para incorporar conteúdo. Por um tempo, foi comum criar sites com vários elementos
<frame>
e <frameset>. Sites com vários elementos <frameset> mostravam o URL da página mãe na barra de endereços, independente da origem dos vários frames individuais. Isso dificultava o compartilhamento de links para conteúdo no site. Essas APIs foram descontinuadas.
Houve também uma época em que tecnologias de plug-in, como o elemento Java <applet>, eram usadas para cobrir outros casos de uso. que foi substituído pelo elemento
<object>. Ambos eram usados com frequência para mostrar plug-ins do Flash, mas também eram usados para mostrar outros elementos HTML (semelhante a iframes).
Outros elementos, como <canvas>, <audio>, <video> e <svg>, tornaram os elementos <object> e <applet> obsoletos.
Embora <object> e <embed> ainda não estejam oficialmente descontinuados, é melhor
evitar usá-los, principalmente porque eles têm alguns comportamentos estranhos.
O <applet> foi removido da especificação HTML em 2017.
Conclusão
É possível incorporar conteúdo com segurança em qualquer site usando a especificação de iframe
existente. Mais elementos HTML, incluindo <fencedframe> e <portal>, foram propostos para melhorias de segurança e estilo. Vamos continuar compartilhando o
progresso da proposta de frames isolados à medida que
ela avança.