Optimizely Forms uploaded attachments authentication issue with OpenID Connect

Customer is using Optimizely Forms to create various editor designed/configured forms to the website. In our case one had the option for the end-user to upload images using the form, and when the form was successfully submitted then an email was sent to editors containing also direct links to the uploaded images.

Initially no one complained anything about the functionality, until one day a bug ticket was raised "I get authentication error when I click the uploaded file link."

Navigating to the uploaded file link from email in an incognito browser indeed showed OpenID Connect authentication error and from logs we could see the full reason:

// Error message split on multiple lines for easier reading

Microsoft.IdentityModel.Protocols.OpenIdConnect.OpenIdConnectProtocolInvalidNonceException: IDX21323: RequireNonce is '[PII is hidden. For more details, see https://aka.ms/IdentityModel/PII.]'.
OpenIdConnectProtocolValidationContext.Nonce was null, OpenIdConnectProtocol.ValidatedIdToken.Payload.Nonce was not null.
The nonce cannot be validated. If you don't need to check the nonce, set OpenIdConnectProtocolValidator.RequireNonce to 'false'. Note if a 'nonce' is found it will be evaluated.

The second line says what happened, validation context nonce is null but payload nonce wasn't and therefore nonce cannot be validated.

Nonce is used to prevent replay attacks and is on by default in Microsoft implementation (see Optimizely documentation Integrate Azure AD using OpenID Connect for CMS 11 / .NET Framework 4.x), and by default you should not turn off this feature, it is on by default for a reason ;-) And as a side note, by default Optimizely Forms uploaded files are access restricted, otherwise someone from Internet could access any of the files if they could guess the urls.

Investigation, what goes wrong?

In development environment everything works as expected - even when user is not authenticated and navigates to the file url the authentication flow works correctly, editor is authenticated and then can access the uploaded files.

Back to the "Nonce", when a user is not logged in and the authentication flow is started the redirect to authentication sets a nonce cookie named "OpenIdConnect.nonce.[generated-characters-here]", and this nonce cookie is used by the validator when the user returns from the authentication. So we can confirm that this cookie is correctly set in development environment but when checking this in DXP there is no nonce cookie set by the response.

As we know that CloudFlare is used in front of the DXP services which basically is Azure App Service (with some goodies), could the issue then be in CloudFlare configuration, so that it doesn't pass the nonce cookie to client in this case?

We contacted the Optimizely Support and got the confirmation that the default CloudFlare cache rule cause this behavior.

Solution

Uploaded files are stored under the "File upload" Forms element, under folder "Uploaded Files". You can check the uploaded files by editing the Optimizely Forms form (Form container) => edit the "File upload" Forms element and then go to the "Media tab" and scroll to "For This Block" and expand the node and you can see the "Uploaded Files" folder.

As we know the files get the url from the structure, for example "my-demo.file.png" would get something like this as the url "/contentassets/ae5ba1d328f2532122679f73da8d1578/uploaded-files/my-demo-file_547166305085297447.png", so based on that we could have an ignore pattern like "/contentassets/*/uploaded-files/*", to not use caching and to allow the authentication flow to work correctly.

We contacted Optimizely support, and they added this new rule to CloudFlare for our customer, and now the authentication flow works correctly. Do note that you should only ask for this in the case you really need it, as this is not default configuration (at least not at the time when I wrote about this).