Configurar Cross-Origin Resource Sharing (CORS)

Documentação Auto-hospedagem
1

:notebook_with_decorative_cover: Este é um guia how-to que o guiará pelo processo de configuração do Cross-Origin Resource Sharing (CORS) no Discourse.

O CORS é um mecanismo que permite que muitos recursos (por exemplo, fontes, JavaScript, etc.) em uma página da web sejam solicitados de um domínio diferente do domínio de onde o recurso se originou.

Veja como você pode configurar o CORS em seu site Discourse:

Pré-requisitos

Antes de começar, a variável de ambiente DISCOURSE_ENABLE_CORS deve ser definida como true para habilitar o CORS.

Para obter ajuda com isso, consulte Como Definir Variáveis de Ambiente.

:sparkles: Se você estiver em um site hospedado pelo Discourse, esta etapa já foi concluída e você não precisa tomar nenhuma ação adicional para configurar isso.

Acessar Configurações do Site

Vá para o seu painel de administração do Discourse. De lá, navegue até a guia “Configurações”.

Localizar Configurações de CORS

Na guia “Configurações”, use a barra de pesquisa e digite cors origin. Você deverá ver a seguinte configuração relacionada ao CORS:

image
image1053×187 8.86 KB

Esta configuração permite especificar os domínios que têm permissão para fazer solicitações cross-origin para sua instância do Discourse.

Você deve inserir os domínios exatos aqui, separados por um espaço. Evite usar um curinga (*) , pois isso pode representar riscos de segurança.

Ao adicionar vários domínios aqui, cada URL deve ser separada. Por exemplo:

image
image1154×140 9.66 KB

Salvar Alterações

Depois de fazer as alterações necessárias, não se esqueça de clicar no botão Salvar Alterações na parte inferior da página.

Observações Importantes

A implementação incorreta do CORS (Cross-Origin Resource Sharing) pode introduzir riscos de segurança potenciais. Aqui estão algumas coisas a serem lembradas ao habilitar o CORS em seu site:

  • Especificar domínios exatos: Usar curingas (*) na configuração do CORS pode permitir que qualquer domínio interaja com seu servidor, o que é um risco de segurança significativo. Recomenda-se especificar domínios exatos.
  • Minimizar dados expostos: O CORS deve ser configurado para expor apenas os dados necessários de domínios externos nos quais você confia. Não é recomendado permitir que sites que você não controla acessem o CORS.
  • Usar HTTPS: Sempre que possível, evite permitir sites não HTTPS em sua configuração de CORS, pois isso pode expor dados em formato não criptografado.
2 curtidas
2

E se os anúncios do Google estiverem em uso, talvez seja melhor não mexer nessa configuração :wink:

CORS (e CSP) é um pouco problemático porque, muitas vezes, um site precisa permitir praticamente tudo e, então, torna-se quase inútil.

2 curtidas
3

Adicionei DISCOURSE_ENABLE_CORS: "true" à seção env do arquivo app.yml do meu site.
Em seguida, reconstruí o aplicativo.
Em seguida, fui para a seção cors_origins e adicionei o URL completo de um site com o qual estou tentando fazer uma interação funcionar, e ainda assim não está funcionando.
Criei uma página para servir informações quando o site principal estiver offline.
Coloquei este JS na página para verificar o site principal e redirecionar para ele assim que ele voltar ao ar, mas parece que não está funcionando.
Aqui está o código:

    <script>
        function checkSiteStatus() {
            fetch('https://discourse.technospider.com', {
                method: 'HEAD',
                mode: 'cors', // Use CORS para obter o código de status
                cache: 'no-store' // Evitar cache
            })
            .then(response => {
                console.log('Verificação do site: Status', response.status);
                if (response.ok) { // Códigos de status 200-299
                    console.log('Site está no ar, redirecionando para Discourse');
                    window.location.replace('https://discourse.technospider.com');
                } else {
                    console.log('Site ainda está fora do ar (status: ' + response.status + '), tentando novamente em 20 segundos');
                    setTimeout(checkSiteStatus, 20000);
                }
            })
            .catch(error => {
                console.log('Verificação do site: Erro (provavelmente fora do ar ou problema de CORS):', error.message);
                setTimeout(checkSiteStatus, 20000);
            });
        }
            
        // Começa a verificar imediatamente
        checkSiteStatus();
    </script>

E este é o erro no console:

[Error] Origin https://www.technospider.com is not allowed by Access-Control-Allow-Origin. Status code: 200
[Error] Fetch API cannot load https://discourse.technospider.com/ due to access control checks.
[Error] Failed to load resource: Origin https://www.technospider.com is not allowed by Access-Control-Allow-Origin. Status code: 200 (discourse.technospider.com, line 0)
[Log] Site check: Error (likely down or CORS issue): – "Load failed" (berightback, line 78)

Se alguém tiver alguma ideia, adoraria saber. Grok e eu não sabemos mais o que fazer.

4

Tente sem as aspas duplas, caso contrário, pode ser interpretado como uma string em vez de um booleano.

5

Aguardando a reconstrução terminar agora para testar. Se for esse o caso, então alguém precisa corrigir esta página:

Pois está mostrando que true deve ser colocado entre aspas duplas.

Reconstrução concluída, nenhuma alteração. :frowning:

6

Bem, isso é estranho… outras variáveis de ambiente lá têm valores true sem aspas.

7

Isso é melhor para usar do que CSP se você quiser usar javascript em posts, por exemplo?

Atualmente, tenho confiado em componentes de tema ou CSP para executar js.

Melhores cumprimentos
Olle

8

Aqui está entrando em uma variável de ambiente, que só pode ser uma string. Não importa.

Mas, em geral, é bom ter isso em mente, pois você pode obter resultados inesperados para valores aparentemente inofensivos:

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