---
title: Como adicionar uma página incorporada (iframe) na Área de Membros?
description: "Página incorporada (iframe) na Área de Membros da Hubla: como adicionar, por que a página pode ficar em branco e como a aplicação autentica o membro via postMessage."
---

[Pular para o conteúdo](https://help.hub.la/hc/pt-br/pagina-incorporada-iframe#main-content)

[![logo-hubla-ajustado\_1](https://help.hub.la/hs-fs/hubfs/logo-hubla-ajustado_1.png?width=185&height=43&name=logo-hubla-ajustado_1.png)](https://help.hub.la/?hsLang=pt-br)

- [Central de Ajuda](https://help.hub.la/hc/pt-br)

Abrir navegação principal

Fechar navegação principal

- [Central de Ajuda](https://help.hub.la/hc/pt-br)
- [Acesse sua Conta](https://app.hub.la/auth)

[Acesse sua Conta](https://app.hub.la/auth)

 Como podemos ajudar?

- Não há sugestões porque o campo de pesquisa está em branco.

1. [Ajuda | Hubla](https://help.hub.la/hc/pt-br?hsLang=pt-br)
2. [Vendo ou quero vender um produto](https://help.hub.la/hc/pt-br/vendo-ou-quero-vender-um-produto?hsLang=pt-br)
3. [Área de Membros](https://help.hub.la/hc/pt-br/vendo-ou-quero-vender-um-produto?hsLang=pt-br#%C3%A1rea-de-membros)

# Como adicionar uma página incorporada (iframe) na Área de Membros?

## Exiba um site ou uma aplicação externa dentro da sua Área de Membros e veja o que fazer se a página não carregar.

A **página incorporada** exibe um site ou uma aplicação externa dentro da sua Área de Membros, como mais uma página do menu. O membro acessa sem sair da Hubla, e a Hubla consegue identificar o usuário logado para a aplicação por meio de um token de autenticação.

**Importante:** a URL da página incorporada precisa começar com **https://**.

## Como adicionar uma página incorporada

1

Abra a sua Área de Membros em modo de edição e, na barra lateral, clique em **Adicionar nova página**.![Barra lateral da Área de Membros com o botão Adicionar nova página destacado](https://help.hub.la/hubfs/FAQ/pagina-incorporada/iframe-01-adicionar-pagina.png)

2

Na janela **Adicionar nova página**, selecione a aba **Página incorporada**.

3

Escolha um ícone e um nome. É isso que o membro vê no menu.

4

No campo **URL da página incorporada**, informe o endereço do site ou da aplicação, começando com https://, e clique em **Salvar**.![Janela Adicionar nova página com a aba Página incorporada e o campo URL da página incorporada](https://help.hub.la/hubfs/FAQ/pagina-incorporada/iframe-02-modal-url.png)

Pronto! A partir daí, a página mostra o conteúdo dessa URL para os membros.

![Página incorporada exibindo um site dentro da Área de Membros](https://help.hub.la/hubfs/FAQ/pagina-incorporada/iframe-03-pagina-exibida.png)

## A página incorporada não carrega?

Se a página aparecer em branco, na grande maioria dos casos não é um erro da Hubla: o site externo está configurado para não ser exibido dentro de outro site (dentro de um *iframe*). Bancos, checkouts e vários aplicativos fazem esse bloqueio de propósito, por segurança.

![Página incorporada em branco na Área de Membros](https://help.hub.la/hubfs/FAQ/pagina-incorporada/iframe-04-pagina-em-branco.png)

Por que isso acontece

O site externo avisa o navegador que não pode ser incorporado em outras páginas por meio de uma destas configurações:

`X-Frame-Options`

Quando está como `DENY` ou `SAMEORIGIN`, o navegador bloqueia a exibição do site dentro de qualquer página de outro domínio, como a Área de Membros da Hubla.

`Content-Security-Policy: frame-ancestors`

Quando essa regra não inclui o domínio da Hubla, o navegador também bloqueia a incorporação.

Como resolver

Se o site é seu (ou de um parceiro)

Peça a quem cuida do site para liberar a incorporação pela Hubla: remover o `X-Frame-Options` (ou trocar por uma política que permita a Hubla) e adicionar o domínio da Hubla em `frame-ancestors`. Depois, recarregue a página na Área de Membros.

Se o site é de terceiros

Veja se o serviço oferece um link próprio para incorporação, como o "embed" de vídeos, formulários e planilhas, e use esse endereço. Se o serviço não permitir incorporação, não é possível exibi-lo na Área de Membros.

Checklist rápido

✓

A URL começa com https://

✓

O site externo permite ser exibido dentro de um iframe

✓

O domínio da Hubla está liberado em `frame-ancestors` (se o site é seu)

✓

Você está usando o link de incorporação do serviço (se o site é de terceiros)

**Ainda não funcionou?** Se os ajustes já foram feitos e a página continua em branco, [fale com o nosso suporte](https://wa.me/5511945247442) informando a URL que você está tentando incorporar.

## Para desenvolvedores

Esta parte é para quem desenvolve a aplicação que será exibida na página incorporada. A aplicação é carregada dentro de um `<iframe>` na Área de Membros, e toda a comunicação com a Hubla acontece via `window.parent.postMessage`.

Autenticação do usuário logado

A Hubla **não** envia dados do usuário na URL. A sua aplicação solicita um JWT assinado (o "ID token") que identifica o membro logado, e o seu backend valida esse token antes de liberar o acesso.

Fluxo

- A aplicação envia `ID_TOKEN_REQUEST` com um `requestId` gerado por você.
- A Hubla emite um JWT assinado cujo `audience` é a `origin` + `pathname` da URL cadastrada (a query string e o hash são ignorados).
- A Hubla responde com `ID_TOKEN_REPLY`, com o token (`ok: true`) ou um erro (`ok: false`).
- O seu backend valida o token e libera o acesso.

Requisição

```
window.parent.postMessage(
  {
    type: 'ID_TOKEN_REQUEST',
    requestId: 'id-unico-por-requisicao',
  },
  '*',
)
```

Resposta

```
// Sucesso
{ "type": "ID_TOKEN_REPLY", "requestId": "id-unico-por-requisicao", "ok": true, "idToken": "<JWT>" }

// Erro
{ "type": "ID_TOKEN_REPLY", "requestId": "id-unico-por-requisicao", "ok": false, "error": { "code": "UNAUTHENTICATED" } }
```

| Código | Significado |
| --- | --- |
| `UNAUTHENTICATED` | Usuário não autenticado na Hubla |
| `INVALID_ARGUMENT` | Requisição inválida (ex.: audience inválido) |
| `UNAVAILABLE` | Serviço temporariamente indisponível |
| `UNKNOWN` | Erro não classificado |

Validação do token (no seu backend)

Valide sempre no servidor, nunca apenas no front. Confira:

- a assinatura do JWT;
- o `audience` = `origin` + `pathname` da URL cadastrada;
- o emissor (`iss`) esperado;
- a expiração (`exp`): o token é de curta duração.

**Bom saber:** para validar, você vai precisar das chaves públicas (JWKS), do valor do `iss` e da lista de claims disponíveis no token (ex.: id e e-mail do usuário). Solicite esses dados à equipe da Hubla.

Exemplo

```
const requestId = crypto.randomUUID()

function getHublaIdToken(): Promise<string> {
  return new Promise((resolve, reject) => {
    const onMessage = (event: MessageEvent) => {
      const data = event.data
      if (!data || data.type !== 'ID_TOKEN_REPLY' || data.requestId !== requestId) return
      window.removeEventListener('message', onMessage)
      data.ok ? resolve(data.idToken) : reject(new Error(data.error?.code ?? 'UNKNOWN'))
    }
    window.addEventListener('message', onMessage)
    window.parent.postMessage({ type: 'ID_TOKEN_REQUEST', requestId }, '*')
  })
}

// Envie o token ao SEU backend, que o valida antes de liberar o acesso do usuário.
```

Comunicação via postMessage

- A aplicação envia mensagens com `window.parent.postMessage(mensagem, '*')`.
- A Hubla só responde ou age se a mensagem vier do seu iframe e da origem exata da URL cadastrada. Mensagens de outras origens são ignoradas.
- As respostas da Hubla vão somente para a origem da sua aplicação (nunca para `*`).
- Toda mensagem tem um campo `type` que identifica a ação.

| Mensagem | O que faz |
| --- | --- |
| `ID_TOKEN_REQUEST` | Solicita o ID token do usuário logado |
| `NAVIGATE` | Navega para outra página da Área de Membros |
| `DOWNLOAD_URL` | Baixa um arquivo |
| `SHARE_URL` | Abre o compartilhamento nativo do dispositivo |

`NAVIGATE`: navegar entre páginas da área

Leva o usuário para outra página da mesma Área de Membros, identificada pelo slug (gerado a partir do nome da página). Não navega para URLs externas.

```
window.parent.postMessage(
  {
    type: 'NAVIGATE',
    page: 'slug-da-pagina-destino',
    query: [{ key: 'foo', value: 'bar' }], // opcional
  },
  '*',
)
```

A navegação só acontece se o `page` corresponder a uma página existente e diferente da atual. O `query` opcional é repassado para a página de destino.

`DOWNLOAD_URL`: baixar arquivo

```
window.parent.postMessage(
  {
    type: 'DOWNLOAD_URL',
    url: 'https://.../arquivo.pdf', // https obrigatório
    filename: 'arquivo.pdf',
  },
  '*',
)
```

`SHARE_URL`: compartilhar

```
window.parent.postMessage(
  {
    type: 'SHARE_URL',
    url: 'https://...', // https obrigatório
    title: 'Título opcional',
  },
  '*',
)
```

## Ficou alguma dúvida?

[Fale com o nosso suporte](https://wa.me/5511945247442) e a gente te ajuda! 💚

- [Comprei ou quero comprar um produto](https://help.hub.la/hc/pt-br/comprei-ou-quero-comprar-um-produto?hsLang=pt-br#main-content)

    - [Acesso](https://help.hub.la/hc/pt-br/comprei-ou-quero-comprar-um-produto?hsLang=pt-br#acesso)
    - [Reembolso](https://help.hub.la/hc/pt-br/comprei-ou-quero-comprar-um-produto?hsLang=pt-br#reembolso)
    - [Assinatura](https://help.hub.la/hc/pt-br/comprei-ou-quero-comprar-um-produto?hsLang=pt-br#assinatura)
    - [Conta](https://help.hub.la/hc/pt-br/comprei-ou-quero-comprar-um-produto?hsLang=pt-br#conta)
    - [Dúvidas frequentes](https://help.hub.la/hc/pt-br/comprei-ou-quero-comprar-um-produto?hsLang=pt-br#d%C3%BAvidas-frequentes)
    - [Aplicativo para membros](https://help.hub.la/hc/pt-br/comprei-ou-quero-comprar-um-produto?hsLang=pt-br#aplicativo-para-membros)
- [Vendo ou quero vender um produto](https://help.hub.la/hc/pt-br/vendo-ou-quero-vender-um-produto?hsLang=pt-br#main-content)

    - [Conheça a Hubla](https://help.hub.la/hc/pt-br/vendo-ou-quero-vender-um-produto?hsLang=pt-br#conhe%C3%A7a-a-hubla)
    - [Gestão de Produtos](https://help.hub.la/hc/pt-br/vendo-ou-quero-vender-um-produto?hsLang=pt-br#gest%C3%A3o-de-produtos)
    - [Financeiro](https://help.hub.la/hc/pt-br/vendo-ou-quero-vender-um-produto?hsLang=pt-br#financeiro)
    - [Conta](https://help.hub.la/hc/pt-br/vendo-ou-quero-vender-um-produto?hsLang=pt-br#conta)
    - [Assinaturas](https://help.hub.la/hc/pt-br/vendo-ou-quero-vender-um-produto?hsLang=pt-br#assinaturas)
    - [Integrações](https://help.hub.la/hc/pt-br/vendo-ou-quero-vender-um-produto?hsLang=pt-br#integra%C3%A7%C3%B5es)
    - [Relatórios](https://help.hub.la/hc/pt-br/vendo-ou-quero-vender-um-produto?hsLang=pt-br#relat%C3%B3rios)
    - [Área de Membros](https://help.hub.la/hc/pt-br/vendo-ou-quero-vender-um-produto?hsLang=pt-br#%C3%A1rea-de-membros)
    - [Gestão de Grupos](https://help.hub.la/hc/pt-br/vendo-ou-quero-vender-um-produto?hsLang=pt-br#gest%C3%A3o-de-grupos)
    - [Ofertas e preços](https://help.hub.la/hc/pt-br/vendo-ou-quero-vender-um-produto?hsLang=pt-br#ofertas-e-pre%C3%A7os)
    - [Afiliados](https://help.hub.la/hc/pt-br/vendo-ou-quero-vender-um-produto?hsLang=pt-br#afiliados)
    - [Reembolso](https://help.hub.la/hc/pt-br/vendo-ou-quero-vender-um-produto?hsLang=pt-br#reembolso)
    - [Aplicativo para alunos](https://help.hub.la/hc/pt-br/vendo-ou-quero-vender-um-produto?hsLang=pt-br#aplicativo-para-alunos)
    - [Hubla Agents](https://help.hub.la/hc/pt-br/vendo-ou-quero-vender-um-produto?hsLang=pt-br#hubla-agents)
- [Vendo ou quero vender como afiliado](https://help.hub.la/hc/pt-br/vendo-ou-quero-vender-como-afiliado?hsLang=pt-br)

[![Contato Hubla](https://help.hub.la/hs-fs/hubfs/c%C3%B3pia%20de%20WhatsApp%20Image%202023-05-25%20at%2018.jpg?width=130&height=48&name=c%C3%B3pia%20de%20WhatsApp%20Image%202023-05-25%20at%2018.jpg "Contato Hubla")](https://wa.me/5511945247442)