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. Pode ser um Tweet incorporado, que aparece no estilo e formato do Twitter. 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 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 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 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, entre 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 limitado 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 de anúncios ao proprietário.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
No final, os frames delimitados 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. Os usuários não podem interagir com o portal, que é 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 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>. Os dois elementos eram comumente usados para mostrar plug-ins
Flash, mas também para mostrar outros elementos HTML (semelhantes aos iframes).
Outros elementos, como <canvas>, <audio>, <video> e <svg>,
renderizaram 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.
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
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.