Embed JavaScript não exibe o embed, console log mostra: Falha ao executar postMessage em DOMWindow...

Oi, estou com exatamente o mesmo erro ao tentar integrar a incorporação de JavaScript no nosso site.

Já pesquisei nos tópicos relacionados e também no Google, mas não tenho certeza do que preciso fazer para corrigir isso. Obrigado!

[edit] Como não quero que essa mensagem de erro apareça o tempo todo, ativei-a apenas neste único post antigo.

Configurações de incorporação:

Configurações testadas:

host: royaleapi.com
path allowed: /blog/.*

host: royaleapi.com
path allowed: 

Também ativei o CORS origin para os seguintes domínios:

  • https://royaleapi.com
  • https://cdn.royaleapi.com

E adicionei DISCOURSE_ENABLE_CORS: true nas variáveis de ambiente (ENV) dentro do app.yml, então estou um pouco travado aqui…

Tem certeza de que o parâmetro de consulta ?discuss=1 não é a causa do problema?

Existem permissões de segurança na sua categoria de blog, ou ela está configurada para permitir que o grupo “todos” Crie / Responda / Veja?

Em qual versão do Discourse seu site está?

Além disso, qual é a mensagem de erro completa que você vê após o texto Failed to execute postMessage on DOMWindow? Eu esperaria que fosse algo como The target origin provided (<target_url>) does not match the recipient window's origin (<origin_url>).

Tenho certeza de que não tem nada a ver com o parâmetro ?discuss=1. Tive o mesmo problema sem ele — é apenas que este é um site ao vivo e não quero mostrar um bloco de erro enorme para nossos usuários. Mas, já que você perguntou, editei o site e ativei o embed de JavaScript apenas em um de nossos posts muito antigos, onde não deve haver visitantes. Então, sem string de consulta. (Atualizei meu primeiro post para refletir isso)

https://royaleapi.com/blog/season3

https://royaleapi.com/blog/season3

Versão do Discourse

2.6.0.beta5

Versão do SO

Ubuntu 20.04.1 LTS

Mensagem de erro completa

VM469 embed-application-9cef8308c816fc1d83137e63d6c556c6cc2b68fe2b6e5ce16cca6766ba2c0ae4.js:1 Falha ao executar ‘postMessage’ no ‘DOMWindow’: A origem de destino fornecida (‘https://discuss.royaleapi.com’) não corresponde à origem da janela de destino (‘https://royaleapi.com’).

Categoria do Blog

Esta é uma categoria pública — aberta a todos. Na verdade, não há posts. Acabei de criar um novo post agora para ver se é necessário ter um único item na categoria.

Captura de tela: Desktop

Captura de tela: Mobile

1 curtida

Não tenho certeza se isso pode ser relevante, mas vejo alguns erros nos logs, embora não saiba exatamente o que são:

[Sex 06 Nov 2020 16:47:14 UTC] Domínios não alterados.
[Sex 06 Nov 2020 16:47:14 UTC] Ignorado, próximo horário de renovação: Seg 04 Jan 2021 08:07:59 UTC
[Sex 06 Nov 2020 16:47:14 UTC] Adicione '--force' para forçar a renovação.
[Sex 06 Nov 2020 16:47:14 UTC] Instalando chave em: /shared/ssl/discuss.royaleapi.com_ecc.key
[Sex 06 Nov 2020 16:47:14 UTC] Instalando cadeia completa em: /shared/ssl/discuss.royaleapi.com_ecc.cer
[Sex 06 Nov 2020 16:47:14 UTC] Executando comando de recarga: sv reload nginx
aviso: nginx: não foi possível abrir supervise/ok: arquivo não existe
[Sex 06 Nov 2020 16:47:14 UTC] Erro de recarga para :
runsvdir iniciado, PID é 663
ok: run: redis: (pid 677) 0s
chgrp: grupo inválido: 'syslog'
ok: run: postgres: (pid 675) 0s
rsyslogd: imklog: não foi possível abrir o log do kernel (/proc/kmsg): Operação não permitida.
rsyslogd: falha na ativação do módulo imklog [v8.1901.0 tente https://www.rsyslog.com/e/2145 ]
supervisor pid: 671 unicorn pid: 702

Além disso, por favor, me avise se alguma parte disso deve ser ofuscada. Como já publiquei a URL, imaginei que não haveria problema, já que esses locais de arquivo parecem ser padrão para a configuração.

@simon Isso é algo com o qual você pode me ajudar? Esse é o comportamento esperado ou será corrigido em uma versão futura?

Adicionamos este fórum principalmente para permitir comentários nas páginas do nosso site e, se isso não funcionar, precisaremos procurar outras soluções.

Obrigado!

Há um problema que eu não havia notado anteriormente nesta captura de tela:

A Lista de Permissões de Caminho está definida como /blog/* em vez de /blog/.* (observe a adição do caractere ponto.)

Tente editar a entrada do host para alterar a Lista de Permissões de Caminho para /blog/.*

Se isso não resolver o problema, tente /.*. Tente também deixar a configuração vazia.

1 curtida

Sim, minha captura de tela mostrava o problema, mas desde então eu já a alterei para /blog/.*, pois percebi que provavelmente está usando regex. No entanto, o problema persiste.

@simon Testei as três opções:

/blog/.*
/.*

(a última está vazia) e nenhuma delas funcionou.

O erro que recebo no console parece mais um problema de CORS do que qualquer outra coisa.

_embed-application-9cef8308c816fc1d83137e63d6c556c6cc2b68fe2b6e5ce16cca6766ba2c0ae4.js:7 
Falha ao executar 'postMessage' no 'DOMWindow': 
A origem de destino fornecida ('https://discuss.royaleapi.com') 
não corresponde à origem da janela de destino ('https://royaleapi.com').

mas não tenho certeza de como corrigir isso. Para testes, já tentei adicionar isso à configuração do app:

  DISCOURSE_ENABLE_CORS: true
  DISCOURSE_CORS_ORIGIN: '*'

Essencialmente deixando tudo aberto, mas isso também não funcionou.

Na página de configurações de incorporação do Discourse, você definiu a configuração “Nome de usuário para criação de tópicos”? Se não estiver definida, você receberá o erro Failed to execute 'postMessage' on 'DOMWindow'.

1 curtida

@simon Sim, o nome de usuário para criação de tópicos está definido como system. Também tentei definir como meu próprio nome de usuário e obtive o mesmo erro.

De interesse, hoje encontrei o seguinte:

curl -IXGET https://discuss.royaleapi.com

access-control-allow-origin: *
access-control-allow-headers: Content-Type, Cache-Control, X-Requested-With, 	X-CSRF-Token, Discourse-Present, User-Api-Key, User-Api-Client-Id, Authorization
access-control-allow-credentials: true
[truncated]

No entanto:

curl -IXGET https://discuss.royaleapi.com/javascripts/embed.js

HTTP/2 200
server: nginx
date: Tue, 08 Dec 2020 23:52:26 GMT
content-type: application/javascript
content-length: 2404
last-modified: Tue, 01 Dec 2020 01:49:39 GMT
vary: Accept-Encoding
expires: Wed, 09 Dec 2020 23:52:26 GMT
cache-control: max-age=86400
cache-control: public,immutable
accept-ranges: bytes

Isso poderia ser o motivo? Parece que os próprios scripts não possuem cabeçalhos access-control-allow-origin, mesmo que o domínio os tenha. Devo tentar usar minha própria configuração do nginx e não usar o que está embutido na imagem do Docker?

@simon Eu resolvi esse problema.

Para resolver outro problema Unable to generate preview for URLs - #4 by seeminglee, ativei as requisições HEAD no site, e agora todas as discussões apareceram, o que, por sua vez, fez com que os tópicos fossem gerados automaticamente para minhas postagens de blog.

Isso é incrível — não consigo acreditar que me envolvi na busca por determinar se era um problema relacionado ao CORS, quando na verdade estava relacionado a requisições HEAD. Talvez isso precise ser especificado em algum lugar na documentação.

Por favor, considere esse problema como fechado.

2 curtidas

Muito obrigado por acompanhar isso!

Possivelmente, isso deveria ser adicionado à seção de Solução de Problemas de Embed Discourse comments on another website via Javascript. Não tenho certeza de quão comum é ter as requisições HEAD desativadas, mas é um problema difícil de rastrear para sites onde elas foram desativadas.

1 curtida

Bom, se você se deu ao trabalho de bloquear solicitações HEAD para URLs que respondem a solicitações GET e violam a RFC, é de se esperar que haja alguma quebra, certo?

Para ser honesto, eu não percebi que existiam serviços que dependiam disso. Eu não teria “desativado” o método se soubesse que ele era necessário.

Além disso, só para deixar claro: não é que eu me esforce para desativar o método. Eu simplesmente não escrevi rotas para dar suporte ao método HEAD. Basicamente, o que fiz agora foi adicionar uma função para responder a todas as requisições HEAD para endpoints válidos.

2 curtidas

Na verdade, @Falco mostra que simplesmente executar

curl https://example.com/path/to -I

mostrará se o método está implementado. Isso parece ser uma boa maneira de verificar.

De qualquer forma, agradeço muito a ajuda de vocês dois!

2 curtidas

Ah, desculpe por isso. Acho que frameworks como o Rails me estragaram a ponto de eu esperar que isso fosse um padrão básico para sites :sweat_smile:

2 curtidas

Sim, por favor: atualize a seção de Solução de Problemas com isso. Estou travado em questões de segurança de CORS/Frame e espero que seguir os passos de @seeminglee possa ajudar. Como habilitar solicitações HEAD?

@willywongi Você pode estar confuso sobre qual era o meu problema, então deixe-me explicar o que aconteceu.

  1. Segui os passos, mas não consegui fazer os comentários serem incorporados no site.
  2. Descobri que meu aplicativo Discourse (instalado em um domínio diferente) não consegue “verificar” se meus posts de blog existem porque meu site principal não implementava o método HEAD nessas URLs.
  3. Após implementar o manipulador para requisições HEAD nesses caminhos, a incorporação funcionou.

Para verificar se você tem o mesmo problema que eu, execute o curl contra a URL que contém o post de blog ou onde deseja que a incorporação de comentários apareça.

Por exemplo, se sua URL for https://example.com/blog/post-incrivel, vá ao terminal e execute

curl https://example.com/blog/post-incrivel -I

Isso executará uma requisição HEAD para essa URL e mostrará o resultado. Se o código de status for qualquer coisa diferente de 200 (esse é o número na primeira linha da resposta), por exemplo:

HTTP/2 200

então o servidor não implementa o método HEAD (OU tem algum problema ao responder a ele).

Se a resposta FOR 200, então o problema da incorporação não tem nada a ver com requisições HEAD.

1 curtida

Ha, agora está claro! Obrigado.
Verifiquei o método HEAD e meu site responde corretamente (200) a ele.

Ainda estou com dificuldade para incorporar um tópico do Discourse, mas criarei um novo tópico se algo mais falhar.

Encontrei isso e o problema acabou sendo que alterei a forma como o "Nome de usuário para criação de tópico" era chamado e esqueci de atualizá-lo na página de Incorporação, acho que ele tentou criar o tópico e não encontrou o nome de usuário. Assim que atualizei na página de configurações de incorporação, o erro desapareceu.

1 curtida