O conteúdo incorporado é a melhor maneira de manter os usuários no seu site, enquanto compartilha conteúdo de outras páginas ou sites. Pode ser um Tweet incorporado, que aparece 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.
Os desenvolvedores podem incorporar conteúdo em um site de várias maneiras. 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 para incorporar conteúdo de terceiros. - O
<portal>é proposto para transições de página mais suaves.
Continue lendo para saber como melhorar a segurança do 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 seu 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 pai
por meio de 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);
})
Segurança extra com o atributo sandbox
Se um conteúdo malicioso for implantado em um iframe, é 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 atributo sandbox restringe as
APIs executáveis no iframe e desativa recursos potencialmente nocivos.
<iframe src="https://example.com" sandbox></iframe>
O sandbox pode deixar indisponíveis algumas APIs importantes para o 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
outros.
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 pai e ao conteúdo do 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 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 com o contexto
de incorporação. Da mesma forma, os dados próprios na página principal não podem ser compartilhados com
o frame protegido.
<fencedframe src="https://3rd.party.example"></fencedframe>
Os frames delimitados são uma proposta do Sandbox de privacidade que sugere que os sites de nível superior devem particionar dados. Muitas das propostas do Sandbox de privacidade têm como objetivo 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 documentos selecionados sejam renderizados em um frame fechado.
Por exemplo, um frame fechado 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 localização, que pode ser renderizado em um frame cercado. As origens opacas permitem que os sites mostrem conteúdo sem revelar o URL da origem do anúncio ao proprietário do site.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
No final, os frames com restrições não vão substituir os iframes. Não é necessário usá-los. Os frames cercados 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, o que pode melhorar a experiência de transição
da 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 acessado 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 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 conteúdo no site. Essas
APIs foram descontinuadas.
Também houve um tempo em que tecnologias de plug-in, como o elemento <applet>
do Java, eram usadas para outros casos de uso. Ele foi substituído pelo
elemento <object>. Esses dois elementos eram usados com frequência para mostrar plug-ins
do Flash, mas também eram usados para mostrar outros elementos HTML (semelhantes a iframes).
Outros elementos, como <canvas>, <audio>, <video> e <svg>,
tornaram os elementos <object> e <applet> obsoletos.
Embora <object> e <embed> ainda não tenham sido oficialmente descontinuados, é melhor
evitar o uso deles, especialmente porque eles têm alguns comportamentos estranhos.
<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
do iframe. 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 delimitados conforme
ela avança.