将 auth0 与 heroku 一起使用时的内容安全策略问题

Question

我试图让 auth0 与 heroku 一起工作，但遇到了一些困难。

我可以让它毫无问题地在本地工作，但它不能与 Heroku 一起工作

我的设置：React 应用程序从 express 中作为静态资源作为服务器

auth0 提供程序的代码：

const providerConfig = {
    domain: process.env.AUTH0_DOMAIN,
    clientId: process.env.AUTH0_CLIENT_ID,
    redirectUri: window.location.origin,
};

ReactDOM.render(
    <Auth0Provider {...providerConfig}>
        <BrowserRouter history={history}>
            <App />
        </BrowserRouter>
    </Auth0Provider>,
    document.getElementById("root")
);

我尝试登录时遇到的错误：

Refused to connect to 'https://small-dust-7659.eu.auth0.com/oauth/token' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

非常感谢任何帮助，谢谢！

Answer 1

Auth0 需要了解您的来源，因此它可以允许从您在 Heroku 上的站点发出跨域 (CORS) 请求。

此处有关于如何设置的详细说明。

基本上在您的应用程序页面上，您可以设置您的来源和 URL。

Answer 2

问题与头盔配置有关..

我将 auth0 域添加到 connectSrc 并解决了问题

    helmet({
    contentSecurityPolicy: {
        directives: {
            defaultSrc: ["'self'"],
            objectSrc: ["'none'"],
            scriptSrc: ["'self'", "unpkg.com", "polyfill.io"],
            styleSrc: ["'self'", "https: 'unsafe-inline'"],
            ----> connectSrc: ["'self'", "xxxxxx.eu.auth0.com"],
            upgradeInsecureRequests: [],
        },
    },
});