Configurar Compartir recursos de origen cruzado (CORS)

[Discourse]

Esta es una guía how-to que te guiará a través del proceso de configuración de Cross-Origin Resource Sharing (CORS) en Discourse.

CORS es un mecanismo que permite que muchos recursos (por ejemplo, fuentes, JavaScript, etc.) en una página web se soliciten desde un dominio diferente al dominio de origen del recurso.

Así es como puedes configurar CORS en tu sitio de Discourse:

Prerrequisitos

Antes de comenzar, la variable de entorno DISCOURSE_ENABLE_CORS debe establecerse en true para habilitar CORS.

Para obtener ayuda con esto, consulta Cómo establecer variables de entorno.

Si estás en un sitio alojado por Discourse, este paso ya se ha realizado y no necesitas tomar ninguna medida adicional para configurarlo.

Acceder a la Configuración del Sitio

Ve a tu panel de administración de Discourse. Desde allí, navega a la pestaña “Configuración”.

Localizar la Configuración de CORS

En la pestaña “Configuración”, usa la barra de búsqueda y escribe cors origin. Deberías ver la siguiente configuración relacionada con CORS:

Esta configuración te permite especificar los dominios que pueden realizar solicitudes de origen cruzado a tu instancia de Discourse.

Debes ingresar los dominios exactos aquí, separados por un espacio. Evita usar un comodín (*) ya que esto puede suponer riesgos de seguridad.

Al agregar varios dominios aquí, cada URL debe estar separada. Por ejemplo:

Guardar Cambios

Después de haber realizado los cambios necesarios, no olvides hacer clic en el botón Guardar Cambios en la parte inferior de la página.

Notas Importantes

La implementación incorrecta de CORS (Cross-Origin Resource Sharing) puede introducir riesgos de seguridad potenciales. Aquí hay algunas cosas a tener en cuenta al habilitar CORS en tu sitio:

• Especificar dominios exactos: Usar comodines (*) en la configuración de CORS puede permitir que cualquier dominio interactúe con tu servidor, lo cual es un riesgo de seguridad significativo. Se recomienda especificar dominios exactos.
• Minimizar los datos expuestos: CORS debe configurarse para exponer solo los datos necesarios de dominios externos en los que confíes. No se recomienda permitir que sitios que no controlas tengan acceso CORS.
• Usar HTTPS: Cuando sea posible, evita permitir sitios que no sean HTTPS en tu configuración de CORS, ya que esto puede exponer datos en formato no cifrado.

[Jagster (Jakke Lehtonen)]

Y si se utilizan anuncios de Google, quizás sea mejor no tocar esa configuración

CORS (y CSP) es un poco problemático porque muy a menudo un sitio debe permitir prácticamente todo y entonces es casi inútil.

[tknospdr (David Muszynski)]

He agregado DISCOURSE_ENABLE_CORS: "true" a la sección env del archivo app.yml de mi sitio.
Luego reconstruí la aplicación.
Luego fui a la sección cors_origins y agregué la URL completa de un sitio con el que estoy intentando que funcione una interacción y todavía no funciona.
He creado una página para mostrar información cuando el sitio principal está inactivo.
Puse este js en la página para verificar el sitio principal y redirigir a él una vez que vuelva a estar en línea, pero no parece estar funcionando.
Aquí está el código:

    <script>
        function checkSiteStatus() {
            fetch('https://discourse.technospider.com', {
                method: 'HEAD',
                mode: 'cors', // Usar CORS para obtener el código de estado
                cache: 'no-store' // Evitar el almacenamiento en caché
            })
            .then(response => {
                console.log('Comprobación del sitio: Estado', response.status);
                if (response.ok) { // Códigos de estado 200-299
                    console.log('El sitio está en línea, redirigiendo a Discourse');
                    window.location.replace('https://discourse.technospider.com');
                } else {
                    console.log('El sitio todavía está inactivo (estado: ' + response.status + '), reintentando en 20 segundos');
                    setTimeout(checkSiteStatus, 20000);
                }
            })
            .catch(error => {
                console.log('Comprobación del sitio: Error (probablemente inactivo o problema de CORS):', error.message);
                setTimeout(checkSiteStatus, 20000);
            });
        }
            
        // Empezar a comprobar inmediatamente
        checkSiteStatus();
    </script>

Y este es el error de la consola:

[Error] El origen https://www.technospider.com no está permitido por Access-Control-Allow-Origin. Código de estado: 200
[Error] La API Fetch no puede cargar https://discourse.technospider.com/ debido a comprobaciones de control de acceso.
[Error] Error al cargar el recurso: El origen https://www.technospider.com no está permitido por Access-Control-Allow-Origin. Código de estado: 200 (discourse.technospider.com, línea 0)
[Log] Comprobación del sitio: Error (probablemente inactivo o problema de CORS): – "Carga fallida" (berightback, línea 78)

Si alguien tiene alguna idea, me encantaría saberla. Grok y yo estamos perdidos.

[NateDhaliwal]

@tknospdr

true

Inténtalo sin las comillas dobles, de lo contrario, puede interpretarse como una cadena en lugar de un booleano.

[tknospdr (David Muszynski)]

Esperando a que termine la reconstrucción para probar. Si ese es el caso, entonces alguien necesita arreglar esta página:

Set Environmental Variables

This is a how-to guide for setting up environmental variables in a self-hosted Discourse installation. Required user level: Administrator Environmental variables play a crucial role in configuring your Discourse instance. They can store sensitive data like API keys and database passwords, making your installation more secure and flexible. In Discourse, environmental variables are set in the app.yml file within your Docker container setup…

Ya que muestra que se pone true entre comillas dobles.

Reconstrucción terminada, sin cambios.

[NateDhaliwal]

Bueno, eso es extraño… otras variables de entorno allí tienen valores true sin comillas.

[Olle11]

¿Es mejor usar esto en lugar de CSP si quieres usar javascript en las publicaciones, por ejemplo?

Actualmente, he confiado en componentes del tema o CSP para ejecutar js,

Saludos cordiales
Olle

[supermathie (Michael Brown)]

[cita=“NateDhaliwal, post:4, topic:270819”]
Inténtalo sin las comillas dobles, de lo contrario, puede interpretarse como una cadena en lugar de un booleano.
[/cita]

Aquí va a una variable de entorno, que solo puede ser una cadena. No importa.

Pero en general, es bueno tener esto en cuenta, ya que puede obtener resultados inesperados para valores de apariencia inocua:

pry(main)"> YAML.load('on: yes').to_s
=> "{true=>true}"