During iFrame Login with the New Universal Login Fails with Content Security Policy directive: "frame-ancestors 'none'"

Overview

When a user logs in to a website with iFrame with the New Universal Login with a social provider (Google), the silent authentication fails with the following error:

Refused to frame ‘https://canonical-domain.us.auth0.com/’; because an ancestor violates the following Content Security Policy directive: "frame-ancestors ‘none’.

Cause

When the iFrame tries to render the login widget because the connection for the rendered application is not enabled, it fails because the login widget can not be rendered on an iFrame.

When a silent auth returns an error like login required , the SDK is the one that sends the /authorize request to Auth0, and that is when it tries to render the login page. The error is seen in the browser console when the New Universal Login is used.

Solution

The connection for the main application and the application rendered inside the iFrame should be active for both. It can be any connection, database, social, etc.

  1. In the left menu in the Dashboard.
  2. Navigate to Applications and select the application.
  3. Click Connections.

  1. The same connection needs to be active for both applications.