Skip to content

Typescript redirect sample doesn't work in Chrome with common govt policies #282

New issue
New issue
Open
Open
Typescript redirect sample doesn't work in Chrome with common govt policies#282
@aadhoc

Description

@aadhoc
aadhoc
opened on Oct 22, 2020

Library versions

  • react-aad-msal: Current (2.3.5)
  • msal: Current (1.4.0)

Describe the bug
The typescript sample DOES work with current v1.4.0 MSAL and "redirect"...
But the "redirect" technique breaks when adding browser policies: BlockThirdPartyCookies, DefaultPopupsSetting.

These settings are common to US government computers:

  • BlockThirdPartyCookies: shouldn't affect well behaved cookies like microsoft logins!?
  • DefaultPopupsSetting: "Do not allow any site to show popups" shouldn't affect the redirect technique!?

Clicking on the redirect checkbox counts down, allows login via login.microsoftonline.com, then goes back to sample page with the unchaned "Automatic Redirect" and "Authentication Values" boxes, but the "Errors" box says

If authentication fails, this box will have the errors that occurred
errorCode: popup_window_error
errorMessage: Error opening popup window. This can happen if you are using IE or if popups are blocked in the browser.

Strange to see "opening popup window" when using the "redirect" mode sample.

(Note the same policies now exist in MS Edge since it now has the same Chromium engine.)

Expected behavior
Expected the typescript sample to work in "redirect" mode.
Expected the popup blocker policy not to break it.
(I did expect that the popup blocker would break the "popup" mode, so I didn't even try that).

To Reproduce

Steps to reproduce the behavior:

  1. Download github repo
  2. Put the typescript sample into a Visual Studio 2019 project so it can be easily run with https on localhost
    https://github.com/syncweek-react-aad/react-aad/tree/master/samples/react-typescript
  3. Set sample specifically with msal v1.4.0 in the package (it doesn't work at all with higher versions of msal)
    "msal": "1.4.0",
  1. npm install
  2. Set clientId and subscription in authProvider.
  3. Ensure https://localhost:44300 is a valid Redirect URI in Azure.
  4. Run the sample. Verify that "redirect" mode works for login.
  5. Set policies in windows for Chrome:
    Add to file BlockAndNoPop.reg and run it
Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome]
"BlockThirdPartyCookies"=dword:00000001
"DefaultPopupsSetting"=dword:00000002

Remove these two entries selectively afterward via regedit, or if you are sure you have no other policies, you can use this to delete the Chrome key values:

Windows Registry Editor Version 5.00

[-HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome]

  1. Start Chrome & verify policies
    Check, and reload the policies (if necessary) with this to ensure they are enabled:
    chrome://policy/
    Should show both the policies are active.

  2. Run the sample

  • View https://localhost:44300
  • Click the redirect checkbox
  • Goes to login.microsoftonline.com
  • Allows login
  • After return to sample webapp, errors occur
    (See generated console errors below)

Desktop (please complete the following information):

  • Browser: Chrome for Windows
  • Version 85.0.4183.121

Portion of console log

index.js:1 [ERROR] ClientAuthError: Error opening popup window. This can happen if you are using IE or if popups are blocked in the browser.
console.<computed> @ index.js:1
ERROR @ Logger.ts:19
_callee4$ @ MsalAuthProvider.ts:293
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ runtime.js:118
asyncGeneratorStep @ MsalAuthProvider.ts:18
_throw @ MsalAuthProvider.ts:18
Promise.then (async)
asyncGeneratorStep @ MsalAuthProvider.ts:18
_next @ MsalAuthProvider.ts:18
(anonymous) @ MsalAuthProvider.ts:18
(anonymous) @ MsalAuthProvider.ts:18
(anonymous) @ MsalAuthProvider.ts:51
_callee3$ @ MsalAuthProvider.ts:149
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ runtime.js:118
asyncGeneratorStep @ MsalAuthProvider.ts:18
_throw @ MsalAuthProvider.ts:18
Promise.then (async)
asyncGeneratorStep @ MsalAuthProvider.ts:18
_next @ MsalAuthProvider.ts:18
(anonymous) @ MsalAuthProvider.ts:18
(anonymous) @ MsalAuthProvider.ts:18
(anonymous) @ MsalAuthProvider.ts:51
_callee6$ @ MsalAuthProvider.ts:325
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ runtime.js:118
asyncGeneratorStep @ MsalAuthProvider.ts:18
_next @ MsalAuthProvider.ts:18
(anonymous) @ MsalAuthProvider.ts:18
(anonymous) @ MsalAuthProvider.ts:18
_callee5$ @ MsalAuthProvider.ts:317
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ runtime.js:118
asyncGeneratorStep @ MsalAuthProvider.ts:18
_next @ MsalAuthProvider.ts:18
(anonymous) @ MsalAuthProvider.ts:18
(anonymous) @ MsalAuthProvider.ts:18
MsalAuthProvider @ MsalAuthProvider.ts:60
./src/authProvider.ts @ authProvider.ts:17
__webpack_require__ @ bootstrap:784
fn @ bootstrap:150
./src/App.tsx @ App.css?4433:45
__webpack_require__ @ bootstrap:784
fn @ bootstrap:150
./src/index.tsx @ index.css?f3f6:45
__webpack_require__ @ bootstrap:784
fn @ bootstrap:150
1 @ serviceWorker.ts:142
__webpack_require__ @ bootstrap:784
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
Show 25 more frames
authProvider.ts:6 [MSAL] Thu, 22 Oct 2020 00:30:18 GMT:1.4.0-Verbose AuthResponseHandler has been called
authProvider.ts:6 [MSAL] Thu, 22 Oct 2020 00:30:18 GMT:1.4.0-Verbose Interaction type is redirect
authProvider.ts:6 [MSAL] Thu, 22 Oct 2020 00:30:18 GMT:1.4.0-Verbose One callback was provided to handleRedirectCallback, calling authResponseCallback with response
index.js:1 Warning: Cannot update a component (`SampleAppRedirectOnLaunch`) while rendering a different component (`AzureAD`). To locate the bad setState() call inside `AzureAD`, follow the stack trace as described in https://fb.me/setstate-in-render
    in AzureAD (at SampleAppRedirectOnLaunch.tsx:71)
    in SampleAppRedirectOnLaunch (at SampleBox.tsx:25)
    in div (at SampleBox.tsx:18)
    in SampleBox (at App.tsx:55)
    in div (at App.tsx:54)
    in AzureAD (at App.tsx:29)
    in div (at App.tsx:24)
    in App (at src/index.tsx:15)
    in Provider (at src/index.tsx:14)
console.<computed> @ index.js:1
printWarning @ react-dom.development.js:88
error @ react-dom.development.js:60
warnAboutRenderPhaseUpdatesInDEV @ react-dom.development.js:23241
scheduleUpdateOnFiber @ react-dom.development.js:21165
dispatchAction @ react-dom.development.js:15660
setLoginObject @ SampleAppRedirectOnLaunch.tsx:67
(anonymous) @ SampleAppRedirectOnLaunch.tsx:92
getChildrenOrFunction @ AzureAD.tsx:128
AzureAD @ AzureAD.tsx:176
renderWithHooks @ react-dom.development.js:14803
mountIndeterminateComponent @ react-dom.development.js:17482
beginWork @ react-dom.development.js:18596
beginWork$1 @ react-dom.development.js:23179
performUnitOfWork @ react-dom.development.js:22157
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
scheduleUpdateOnFiber @ react-dom.development.js:21199
dispatchAction @ react-dom.development.js:15660
(anonymous) @ AzureAD.tsx:74
(anonymous) @ MsalAuthProvider.ts:357
(anonymous) @ MsalAuthProvider.ts:357
_callee4$ @ MsalAuthProvider.ts:296
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ runtime.js:118
asyncGeneratorStep @ MsalAuthProvider.ts:18
_throw @ MsalAuthProvider.ts:18
Promise.then (async)
asyncGeneratorStep @ MsalAuthProvider.ts:18
_next @ MsalAuthProvider.ts:18
(anonymous) @ MsalAuthProvider.ts:18
(anonymous) @ MsalAuthProvider.ts:18
(anonymous) @ MsalAuthProvider.ts:51
_callee3$ @ MsalAuthProvider.ts:149
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ runtime.js:118
asyncGeneratorStep @ MsalAuthProvider.ts:18
_throw @ MsalAuthProvider.ts:18
Promise.then (async)
asyncGeneratorStep @ MsalAuthProvider.ts:18
_next @ MsalAuthProvider.ts:18
(anonymous) @ MsalAuthProvider.ts:18
(anonymous) @ MsalAuthProvider.ts:18
(anonymous) @ MsalAuthProvider.ts:51
_callee6$ @ MsalAuthProvider.ts:325
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ runtime.js:118
asyncGeneratorStep @ MsalAuthProvider.ts:18
_next @ MsalAuthProvider.ts:18
(anonymous) @ MsalAuthProvider.ts:18
(anonymous) @ MsalAuthProvider.ts:18
_callee5$ @ MsalAuthProvider.ts:317
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ runtime.js:118
asyncGeneratorStep @ MsalAuthProvider.ts:18
_next @ MsalAuthProvider.ts:18
(anonymous) @ MsalAuthProvider.ts:18
(anonymous) @ MsalAuthProvider.ts:18
MsalAuthProvider @ MsalAuthProvider.ts:60
./src/authProvider.ts @ authProvider.ts:17
__webpack_require__ @ bootstrap:784
fn @ bootstrap:150
./src/App.tsx @ App.css?4433:45
__webpack_require__ @ bootstrap:784
fn @ bootstrap:150
./src/index.tsx @ index.css?f3f6:45
__webpack_require__ @ bootstrap:784
fn @ bootstrap:150
1 @ serviceWorker.ts:142
__webpack_require__ @ bootstrap:784
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
Show 39 more frames
authProvider.ts:6 [MSAL] Thu, 22 Oct 2020 00:30:18 GMT:1.4.0-Verbose AuthResponseHandler has been called
authProvider.ts:6 [MSAL] Thu, 22 Oct 2020 00:30:18 GMT:1.4.0-Verbose Interaction type is redirect
authProvider.ts:6 [MSAL] Thu, 22 Oct 2020 00:30:18 GMT:1.4.0-Verbose One callback was provided to handleRedirectCallback, calling authResponseCallback with response
authProvider.ts:6 [MSAL] Thu, 22 Oct 2020 00:30:18 GMT:1.4.0-Verbose AuthResponseHandler has been called
authProvider.ts:6 [MSAL] Thu, 22 Oct 2020 00:30:18 GMT:1.4.0-Verbose Interaction type is redirect
authProvider.ts:6 [MSAL] Thu, 22 Oct 2020 00:30:18 GMT:1.4.0-Verbose One callback was provided to handleRedirectCallback, calling authResponseCallback with response
index.js:1 [ERROR] ClientAuthError: Error opening popup window. This can happen if you are using IE or if popups are blocked in the browser.
console.<computed> @ index.js:1
ERROR @ Logger.ts:19
_callee6$ @ MsalAuthProvider.ts:339
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ runtime.js:118
asyncGeneratorStep @ MsalAuthProvider.ts:18
_throw @ MsalAuthProvider.ts:18
Promise.then (async)
asyncGeneratorStep @ MsalAuthProvider.ts:18
_next @ MsalAuthProvider.ts:18
(anonymous) @ MsalAuthProvider.ts:18
(anonymous) @ MsalAuthProvider.ts:18
_callee5$ @ MsalAuthProvider.ts:317
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ runtime.js:118
asyncGeneratorStep @ MsalAuthProvider.ts:18
_next @ MsalAuthProvider.ts:18
(anonymous) @ MsalAuthProvider.ts:18
(anonymous) @ MsalAuthProvider.ts:18
MsalAuthProvider @ MsalAuthProvider.ts:60
./src/authProvider.ts @ authProvider.ts:17
__webpack_require__ @ bootstrap:784
fn @ bootstrap:150
./src/App.tsx @ App.css?4433:45
__webpack_require__ @ bootstrap:784
fn @ bootstrap:150
./src/index.tsx @ index.css?f3f6:45
__webpack_require__ @ bootstrap:784
fn @ bootstrap:150
1 @ serviceWorker.ts:142
__webpack_require__ @ bootstrap:784
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
authProvider.ts:6 [MSAL] Thu, 22 Oct 2020 00:30:18 GMT:1.4.0-Verbose AuthResponseHandler has been called
authProvider.ts:6 [MSAL] Thu, 22 Oct 2020 00:30:18 GMT:1.4.0-Verbose Interaction type is redirect
authProvider.ts:6 [MSAL] Thu, 22 Oct 2020 00:30:18 GMT:1.4.0-Verbose One callback was provided to handleRedirectCallback, calling authResponseCallback with response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions