El embed de JavaScript no se muestra, el registro de la consola muestra: Falló al ejecutar postMessage en DOMWindow...

Hola, tengo exactamente el mismo error al intentar integrar la incrustación de JavaScript en nuestro sitio.

He revisado los temas relacionados y también he buscado en Google, pero no estoy seguro de qué debo hacer para solucionarlo. ¡Gracias!

[edit] Como no quiero que este mensaje de error aparezca todo el tiempo, lo he habilitado solo en esta única publicación antigua.

Configuración de la incrustación:

Configuraciones probadas:

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

host: royaleapi.com
path allowed: 

También he habilitado el origen CORS para estos dominios:

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

Además, he añadido DISCOURSE_ENABLE_CORS: true en el entorno dentro de app.yml, así que estoy un poco atascado aquí…

¿Estás seguro de que el parámetro de consulta ?discuss=1 no es la causa del problema?

¿Hay permisos de seguridad en tu categoría de blog, o está configurada para permitir que el grupo ‘todos’ cree, responda o vea?

¿En qué versión de Discourse se encuentra tu sitio?

Además, ¿cuál es el mensaje de error completo que ves después del texto Failed to execute postMessage on DOMWindow? Me esperaría que fuera algo como The target origin provided (<target_url>) does not match the recipient window's origin (<origin_url>).

Estoy seguro de que no tiene nada que ver con el parámetro ?discuss=1. Tuve el mismo problema sin él; es solo que este es un sitio en vivo y no quiero mostrar un bloque de error enorme a nuestros usuarios. Pero como has preguntado, he editado el sitio y ahora habilito la inserción de JavaScript solo en uno de nuestros posts muy antiguos, donde no debería haber visitantes. Así que sin cadena de consulta. (He actualizado mi primer post para reflejar esto)

https://royaleapi.com/blog/season3

https://royaleapi.com/blog/season3

Versión de Discourse

2.6.0.beta5

Versión del SO

Ubuntu 20.04.1 LTS

Mensaje completo del error

VM469 embed-application-9cef8308c816fc1d83137e63d6c556c6cc2b68fe2b6e5ce16cca6766ba2c0ae4.js:1 Error al ejecutar ‘postMessage’ en ‘DOMWindow’: El origen de destino proporcionado (‘https://discuss.royaleapi.com’) no coincide con el origen de la ventana receptora (‘https://royaleapi.com’).

Categoría del blog

Esta es una categoría pública, abierta para todos. De hecho, no hay publicaciones. Acabo de crear una nueva publicación ahora mismo para ver si es necesario tener un solo elemento en la categoría.

Captura de pantalla: Escritorio

Captura de pantalla: Móvil

No estoy seguro de si esto podría ser relevante, pero veo algunos errores en los registros, aunque no sé exactamente qué son:

[Vie 06 Nov 2020 16:47:14 UTC] Los dominios no han cambiado.
[Vie 06 Nov 2020 16:47:14 UTC] Omitido, la próxima hora de renovación es: Lun 04 Ene 2021 08:07:59 UTC
[Vie 06 Nov 2020 16:47:14 UTC] Agregue '--force' para forzar la renovación.
[Vie 06 Nov 2020 16:47:14 UTC] Instalando la clave en: /shared/ssl/discuss.royaleapi.com_ecc.key
[Vie 06 Nov 2020 16:47:14 UTC] Instalando la cadena completa en: /shared/ssl/discuss.royaleapi.com_ecc.cer
[Vie 06 Nov 2020 16:47:14 UTC] Ejecutando el comando de recarga: sv reload nginx
advertencia: nginx: no se pudo abrir supervise/ok: el archivo no existe
[Vie 06 Nov 2020 16:47:14 UTC] Error de recarga para :
Se inició runsvdir, el PID es 663
ok: run: redis: (pid 677) 0s
chgrp: grupo inválido: 'syslog'
ok: run: postgres: (pid 675) 0s
rsyslogd: imklog: no se pudo abrir el registro del kernel (/proc/kmsg): Operación no permitida.
rsyslogd: falla en la activación del módulo imklog [v8.1901.0 consulte https://www.rsyslog.com/e/2145 ]
pid del supervisor: 671 pid de unicorn: 702

Además, por favor avíseme si alguno de estos datos debe ser ofuscado. Dado que ya publiqué la URL, supongo que no hay problema, ya que estas ubicaciones de archivos parecen ser estándar para esta configuración.

@simon ¿Podrías ayudarme con esto? ¿Es este un comportamiento esperado o se solucionará en una versión futura?

Hemos añadido este foro principalmente para permitir comentarios en las páginas de nuestro sitio, y si esto no funciona, tendremos que explorar otras soluciones.

¡Gracias!

Hay un problema que no había notado anteriormente en esta captura de pantalla:

La lista de permitidos de rutas está configurada como /blog/* en lugar de /blog/.* (nota la adición del carácter punto).

Intenta editar la entrada del host para cambiar la lista de permitidos de rutas a /blog/.*.

Si eso no soluciona el problema, prueba con /.*. También intenta dejar la configuración vacía.

Sí, mi captura de pantalla mostraba el problema, pero ya la cambié a /blog/.* desde que me di cuenta de que probablemente está usando expresiones regulares. Sin embargo, el problema persiste.

@simon He probado las tres opciones:

/blog/.*
/.*

(la última está vacía) y ninguna de ellas funciona.

El error que aparece en la consola parece más un problema de CORS que cualquier otra cosa.

_embed-application-9cef8308c816fc1d83137e63d6c556c6cc2b68fe2b6e5ce16cca6766ba2c0ae4.js:7 
Error al ejecutar 'postMessage' en 'DOMWindow': 
El origen de destino proporcionado ('https://discuss.royaleapi.com') 
no coincide con el origen de la ventana receptora ('https://royaleapi.com').

pero no estoy seguro de cómo solucionarlo. Para probar, ya he intentado agregar esto a la configuración de la aplicación:

  DISCOURSE_ENABLE_CORS: true
  DISCOURSE_CORS_ORIGIN: '*'

Básicamente, dejándolo totalmente abierto, pero tampoco funciona.

En la página de configuración de incrustación de Discourse, ¿has configurado la opción «Nombre de usuario para la creación de temas»? Si no está configurada, obtendrás el error Failed to execute 'postMessage' on 'DOMWindow'.

@simon Sí, el nombre de usuario para la creación de temas está configurado en system. También he intentado configurarlo con mi propio nombre de usuario y obtengo el mismo error.

De interés, hoy he descubierto lo siguiente:

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]

Sin embargo:

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

¿Podría ser esta la causa? Parece que los propios scripts no tienen encabezados access-control-allow-origin, aunque el dominio sí los tenga. ¿Debería intentar usar mi propia configuración de nginx en lugar de la incluida en la imagen de Docker?

@simon He resuelto este problema.

Para solucionar otro problema Unable to generate preview for URLs - #4 by seeminglee, habilité las solicitudes HEAD en el sitio. Ahora se muestran todas las discusiones y, como consecuencia, se generan automáticamente hilos para mis publicaciones del blog.

Esto es increíble: no puedo creer que haya caído en la trampa de intentar determinar si se trataba de un problema relacionado con CORS, cuando en realidad estaba relacionado con las solicitudes HEAD. Quizás esto deba especificarse en algún lugar de la documentación.

Por favor, considera este problema como cerrado.

¡Muchas gracias por dar seguimiento a esto!

Posiblemente esto debería agregarse a la sección de Solución de problemas de Embed Discourse comments on another website via Javascript. No estoy seguro de cuán común es tener las solicitudes HEAD deshabilitadas, pero es un problema difícil de rastrear para los sitios donde han sido deshabilitadas.

Bueno, si te tomaste la molestia de bloquear las solicitudes HEAD para URLs que responden a solicitudes GET y violan el RFC, ¿no es de esperar que se produzcan algunos fallos?

Para ser honesto, no me daba cuenta de que había servicios que dependen de que exista. No habría “desactivado” el método si hubiera sabido que era necesario.

Además, solo para aclarar: no es que me esfuerce por desactivar el método. Simplemente no escribí rutas que soporten el método HEAD. Básicamente, lo que he hecho ahora es agregar una función para responder a todas las solicitudes HEAD a los endpoints válidos.

En realidad, @Falco muestra que simplemente ejecutar

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

mostrará si el método está implementado. Esto parece una buena manera de verificarlo.

De todos modos, ¡realmente aprecio la ayuda de ambos!

Oh, lo siento por eso. Supongo que frameworks como Rails me han malcriado hasta el punto de esperar que esto sea una configuración predeterminada lista para usar en los sitios web :sweat_smile:

Sí, por favor: actualiza la sección de Solución de problemas con esto. Estoy atascado con problemas de seguridad de CORS/Frame y espero que seguir los pasos de @seeminglee pueda ayudar. ¿Cómo habilito las solicitudes HEAD?

@willywongi Es posible que hayas entendido mal cuál era mi problema, así que déjame explicar qué ocurrió.

  1. Seguí los pasos, pero no pude lograr que los comentarios se incrustaran en el sitio.
  2. Resultó que mi aplicación de Discourse (instalada en un dominio diferente) no podía «verificar» que mis publicaciones de blog existieran, porque mi sitio principal no implementaba el método HEAD en esas URLs.
  3. Tras implementar un manejador para solicitudes HEAD en esas rutas, la incrustación funcionó.

Para ver si tienes el mismo problema que yo, ejecuta curl contra la URL que contiene la publicación de blog o donde quieras que aparezca la incrustación de comentarios.

Por ejemplo, si tu URL es https://ejemplo.com/blog/publicacion-impresionante, abre la terminal y ejecuta:

curl https://ejemplo.com/blog/publicacion-impresionante -I

Esto ejecutará una solicitud HEAD a esa URL y te mostrará el resultado. Si el código de estado es cualquier cosa distinta de 200 (ese es el número en la primera línea de la respuesta), por ejemplo:

HTTP/2 200

entonces el servidor no implementa el método HEAD (o tiene problemas para responder a él).

Si la respuesta es 200, entonces el problema de la incrustación no tiene nada que ver con las solicitudes HEAD.

¡Ja, ahora está claro! Gracias.
Verifiqué el método HEAD y mi sitio web responde correctamente (200) a él.

Todavía estoy teniendo dificultades para incrustar un hilo de Discourse, pero abriré un nuevo hilo si algo más falla.

Me encontré con esto y el problema resultó ser que cambié la forma en que se llamaba “Nombre de usuario para la creación de temas” y olvidé actualizarlo en la página de Incrustación, supongo que intentó crear el tema y no encontró el nombre de usuario. Una vez actualizado en la página de configuración de incrustación, el error desapareció.