Content security policy (CSP) error while doing SSO with Azure AD via MSAL in angular

479 Views Asked by Akshay Kumar Sharma At 20 October 2024 at 00:41

I am developing SSO functionality with Azure AD via MSAL in angular application. I am getting this error.

polyfills.9c9523e6b18dcf83.js:1 Refused to connect to 'https://login.microsoftonline.com/common/oauth2/v2.0/token' because it violates the following Content Security Policy directive: "connect-src 'self' wss:".
polyfills.9c9523e6b18dcf83.js:1 Refused to connect to 'https://login.microsoftonline.com/common/oauth2/v2.0/token' because it violates the document's Content Security Policy.

Content Security Meta Tag in index.html

  <meta http-equiv="Content-Security-Policy"
    content="default-src 'self';
    script-src 'self' 'unsafe-inline';
    style-src 'self' 'unsafe-inline';
    object-src 'none';
    base-uri 'self';
    connect-src 'self' https://login.microsoftonline.com/common/oauth2/v2.0/token;
    font-src 'self';
    frame-src 'self';
    img-src 'self';
    manifest-src 'self';
    media-src 'self';
    worker-src 'none';">

Original Q&A

There are 1 best solutions below

Dasari Kamali On 06 December 2023 at 12:32

Refer my SO thread answer here.

When I add the below URL, I face the same error code as yours.

https://login.microsoftonline.com/common/oauth2/v2.0/token

When I change it to below URL, the error is resolved.

https://login.microsoftonline.com;

index.html :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Your Angular App</title>
<base href="/">
 
<meta http-equiv="Content-Security-Policy"
    content="default-src 'self';
    script-src 'self' 'unsafe-inline';
    style-src 'self' 'unsafe-inline';
    object-src 'none';
    base-uri 'self';
    connect-src 'self' https://login.microsoftonline.com;
    font-src 'self';
    frame-src 'self';
    img-src 'self';
    manifest-src 'self';
    media-src 'self';
    worker-src 'none';">
 
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app-root></app-root>
</body>
</html>

Output :

It ran successfully as below,

enter image description here

I was able to Sign in as below.

enter image description here

Content security policy (CSP) error while doing SSO with Azure AD via MSAL in angular

There are 1 best solutions below

Related Questions in ANGULAR

Related Questions in AZURE

Related Questions in AZURE-ACTIVE-DIRECTORY

Related Questions in AZURE-AD-MSAL

Related Questions in MSAL

Trending Questions

Popular # Hahtags

Popular Questions