L'embed JavaScript non viene visualizzato, il console log mostra: Impossibile eseguire postMessage su DOMWindow...

Ciao, ho esattamente lo stesso errore quando provo a integrare l’embedding di JavaScript sul nostro sito.

Ho consultato gli argomenti correlati e anche Google, ma non sono sicuro di cosa fare per risolvere il problema. Grazie!

[edit] Poiché non voglio mostrare questo messaggio di errore continuamente, l’ho abilitato solo su questo singolo vecchio post.

Impostazioni di embedding:

Impostazioni provate:

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

host: royaleapi.com
path allowed: 

Ho anche abilitato l’origine CORS per questi domini:

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

Ho inoltre aggiunto DISCOURSE_ENABLE_CORS: true nell’ENV all’interno di app.yml, quindi sono un po’ bloccato…

Sei sicuro che il parametro di query ?discuss=1 non sia la causa del problema?

Ci sono autorizzazioni di sicurezza sulla categoria del tuo blog, oppure è impostato per consentire al gruppo “tutti” di Creare / Rispondere / Vedere?

Quale versione di Discourse sta utilizzando il tuo sito?

Inoltre, qual è il messaggio di errore completo che vedi dopo il testo Failed to execute postMessage on DOMWindow? Mi aspetterei che fosse qualcosa come The target origin provided (<target_url>) does not match the recipient window's origin (<origin_url>).

Sono certo che non abbia nulla a che fare con il parametro ?discuss=1. Ho avuto lo stesso problema senza di esso: è solo che questo è un sito live e non voglio mostrare un enorme blocco di errore ai nostri utenti. Ma poiché me l’hai chiesto, ho modificato il sito e abilitato l’embed JavaScript solo su uno dei nostri post molto vecchi, dove non dovrebbero esserci visitatori. Quindi nessuna stringa di query. (Ho aggiornato il mio primo post per riflettere questo)

https://royaleapi.com/blog/season3

https://royaleapi.com/blog/season3

Versione di Discourse

2.6.0.beta5

Versione del sistema operativo

Ubuntu 20.04.1 LTS

Messaggio di errore completo

VM469 embed-application-9cef8308c816fc1d83137e63d6c556c6cc2b68fe2b6e5ce16cca6766ba2c0ae4.js:1 Esecuzione di ‘postMessage’ su ‘DOMWindow’ non riuscita: l’origine di destinazione fornita (‘https://discuss.royaleapi.com’) non corrisponde all’origine della finestra di destinazione (‘https://royaleapi.com’).

Categoria del blog

Questa è una categoria pubblica, aperta a tutti. In realtà non ci sono post. Ho appena creato un nuovo post per vedere se è necessario avere un singolo elemento nella categoria.

Screenshot: Desktop

Screenshot: Mobile

1 Mi Piace

Non sono sicuro se questo possa essere rilevante, ma vedo alcuni errori nei log, anche se non sono certo di cosa si tratti:

[Fri 06 Nov 2020 04:47:14 PM UTC] Domains not changed.
[Fri 06 Nov 2020 04:47:14 PM UTC] Skip, Next renewal time is: Mon 04 Jan 2021 08:07:59 AM UTC
[Fri 06 Nov 2020 04:47:14 PM UTC] Add '--force' to force to renew.
[Fri 06 Nov 2020 04:47:14 PM UTC] Installing key to:/shared/ssl/discuss.royaleapi.com_ecc.key
[Fri 06 Nov 2020 04:47:14 PM UTC] Installing full chain to:/shared/ssl/discuss.royaleapi.com_ecc.cer
[Fri 06 Nov 2020 04:47:14 PM UTC] Run reload cmd: sv reload nginx
warning: nginx: unable to open supervise/ok: file does not exist
[Fri 06 Nov 2020 04:47:14 PM UTC] Reload error for :
Started runsvdir, PID is 663
ok: run: redis: (pid 677) 0s
chgrp: invalid group: 'syslog'
ok: run: postgres: (pid 675) 0s
rsyslogd: imklog: cannot open kernel log (/proc/kmsg): Operation not permitted.
rsyslogd: activation of module imklog failed [v8.1901.0 try https://www.rsyslog.com/e/2145 ]
supervisor pid: 671 unicorn pid: 702

Fammi sapere anche se una di queste informazioni dovrebbe essere oscurata. Dato che ho già pubblicato l’URL, ho pensato che non ci fossero problemi, poiché queste posizioni dei file sembrano essere standard per la configurazione.

@simon Questo è qualcosa per cui puoi eventualmente aiutarmi? È un comportamento previsto o verrà corretto in una futura versione?

Abbiamo aggiunto questo forum principalmente per abilitare i commenti sulle pagine del nostro sito, e se ciò non funzionasse dovremmo valutare altre soluzioni.

Grazie!

C’è un problema che non avevo notato in precedenza in questo screenshot:

La Path Allowlist è impostata su /blog/* invece che su /blog/.* (nota l’aggiunta del carattere punto.)

Prova a modificare la voce dell’host per cambiare la Path Allowlist in /blog/.*

Se ciò non risolve il problema, prova /.*. Prova anche a lasciare semplicemente l’impostazione vuota.

1 Mi Piace

Sì, nello screenshot c’era il problema, ma l’ho già modificato in /blog/.* da quando ho capito che probabilmente usa le espressioni regolari. Tuttavia, il problema persiste.

@simon Ho provato tutti e tre:

/blog/.*
/.*

(l’ultimo è vuoto) e nessuno di questi funziona.

L’errore che ricevo nella console sembra più un problema CORS che altro.

_embed-application-9cef8308c816fc1d83137e63d6c556c6cc2b68fe2b6e5ce16cca6766ba2c0ae4.js:7 
Impossibile eseguire 'postMessage' su 'DOMWindow': 
L'origine di destinazione fornita ('https://discuss.royaleapi.com') 
non corrisponde all'origine della finestra di destinazione ('https://royaleapi.com').

ma non sono sicuro di come risolverlo. Per i test, ho già provato ad aggiungere questo alla configurazione dell’app:

  DISCOURSE_ENABLE_CORS: true
  DISCOURSE_CORS_ORIGIN: '*'

Essenzialmente rendendolo completamente aperto, ma anche questo non funziona.

Nella pagina delle impostazioni di incorporamento Discourse, hai impostato l’opzione “Nome utente per la creazione di argomenti”? Se non è impostata, riceverai l’errore Failed to execute 'postMessage' on 'DOMWindow'.

1 Mi Piace

@simon Sì, il nome utente per la creazione dei topic è impostato su system. Ho anche provato a impostarlo sul mio nome utente, ma ottengo lo stesso errore.

Di interesse, oggi ho scoperto quanto segue:

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]

Tuttavia:

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

Potrebbe essere questo il motivo? Sembra quindi che gli script stessi non abbiano gli header access-control-allow-origin, anche se il dominio li ha. Dovrei provare a utilizzare la mia configurazione nginx e non quella integrata nell’immagine docker?

@simon Ho risolto questo problema.

Per risolvere un altro problema Unable to generate preview for URLs - #4 by seeminglee, ho abilitato le richieste HEAD sul sito e ora tutte le discussioni sono apparse; di conseguenza, i thread vengono generati automaticamente per i miei post del blog.

È incredibile: non credevo di essere finito in un vicolo cieco cercando di capire se si trattasse di un problema legato al CORS, quando invece era relativo alle richieste HEAD. Forse questo dovrebbe essere specificato da qualche parte nella documentazione.

Considerate questo problema chiuso.

2 Mi Piace

Grazie mille per il follow-up su questo!

Probabilmente questo dovrebbe essere aggiunto alla sezione Risoluzione dei problemi di Embed Discourse comments on another website via Javascript. Non sono sicuro di quanto sia comune avere le richieste HEAD disabilitate, ma è un problema difficile da individuare per i siti in cui sono state disabilitate.

1 Mi Piace

Beh, se hai fatto uno sforzo per bloccare le richieste HEAD per gli URL che rispondono alle richieste GET e violano l’RFC, è logico aspettarsi qualche problema, vero?

Onestamente, non mi ero reso conto che ci sono servizi che dipendono dalla sua esistenza. Non avrei “disabilitato” il metodo se avessi saputo che è necessario.

Inoltre, solo per chiarire: non è che io mi impegni appositamente a disabilitare il metodo. Semplicemente non ho scritto le rotte per supportare il metodo HEAD. Quindi, quello che ho fatto ora è aggiungere una funzione per rispondere a tutte le richieste HEAD verso endpoint validi.

2 Mi Piace

In realtà, @Falco mostra che semplicemente eseguendo

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

si può verificare se il metodo è implementato. Sembra un buon modo per controllarlo.

Comunque, apprezzo davvero molto il vostro aiuto!

2 Mi Piace

Oh, scusa per questo. Immagino che framework come Rails mi abbiano viziato al punto da aspettarmi che questo sia un comportamento predefinito “out of the box” per i siti web :sweat_smile:

2 Mi Piace

Sì, per favore: aggiorna la sezione Risoluzione dei problemi con questo. Sono bloccato con problemi di sicurezza CORS/Frame e spero che seguire i passaggi di @seeminglee possa aiutare. Come si abilitano le richieste HEAD?

@willywongi Potresti aver frainteso il mio problema, quindi lasciami spiegare cosa è successo.

  1. Ho seguito i passaggi ma non sono riuscito a incorporare i commenti sul sito.
  2. Si è scoperto che la mia app Discourse (installata su un dominio diverso) non riesce a “verificare” l’esistenza dei miei post del blog perché il mio sito principale non implementava il metodo HEAD su quegli URL.
  3. Dopo aver implementato un gestore per le richieste HEAD su quei percorsi, l’incorporamento funziona.

Per verificare se hai lo stesso problema, esegui curl contro l’URL che contiene il post del blog o dove desideri che appaia l’incorporamento dei commenti.

Ad esempio, se il tuo URL è https://example.com/blog/awesome-post, apri il terminale ed esegui:

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

Questo eseguirà una richiesta HEAD a quell’URL e ti restituirà il risultato. Se il codice di stato è diverso da 200 (quel numero si trova sulla prima riga della risposta), ad esempio:

HTTP/2 200

allora il server non implementa il metodo HEAD (oppure ha problemi a rispondere ad esso).

Se la risposta è 200, il problema dell’incorporamento non è legato alle richieste HEAD.

1 Mi Piace

Ah, ora è chiaro! Grazie.
Ho controllato il metodo HEAD e il mio sito risponde correttamente (200).

Sto ancora facendo fatica a incorporare un thread di Discourse, ma aprirò un nuovo thread se qualcosa dovesse fallire.

Ho riscontrato questo problema e si è scoperto che avevo cambiato il modo in cui veniva chiamato “Nome utente per la creazione dell’argomento” e me ne ero dimenticato di aggiornarlo nella pagina di incorporamento, suppongo che abbia provato a creare l’argomento e non abbia trovato il nome utente. Una volta aggiornato nella pagina delle impostazioni di incorporamento, l’errore è scomparso.

1 Mi Piace