將 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: [],
        },
    },
});