Menu
I'd like to add PWA functionality to my App Service. It's written in C# ASP.NET. However, Chrome is unable to access the manifest and Edge don't even get the favicon (which might be a separate issue). Other desktop browsers apparently don't have PWA functionality yet.
Chrome is the only browser that requests the manifest. Here's the error message in my console:
Failed to load https://login.windows.net/b79fd714-9c54-449d-b377-3b59deb2d3b6/oauth2/authorize?response_type=code+id_token&redirect_uri=https%3A%%{myappname}.azurewebsites.net%.auth%2Flogin%2Faad%2Fcallback&client_id=67bedd5c-5478-44ec-ba13-85061c71114b&scope=openid+profile+email&response_mode=form_post&nonce=df52b6dc64dd4c3393957675f365ae93_20180903064438&state=redir%3D%252Fwebmanifest.json: Redirect from 'https://login.windows.net/b79fd714-9c54-449d-b377-3b59deb2d3b6/oauth2/authorize?response_type=code+id_token&redirect_uri=https%3A%%{myappname}.azurewebsites.net%.auth%2Flogin%2Faad%2Fcallback&client_id=67bedd5c-5478-44ec-ba13-85061c71114b&scope=openid+profile+email&response_mode=form_post&nonce=df52b6dc64dd4c3393957675f365ae93_20180903064438&state=redir%3D%252Fwebmanifest.json' to 'https://login.microsoftonline.com/b79fd714-9c54-449d-b377-3b59deb2d3b6/oauth2/authorize?response_type=code+id_token&redirect_uri=https%3A%%{myappname}.azurewebsites.net%.auth%2Flogin%2Faad%2Fcallback&client_id=67bedd5c-5478-44ec-ba13-85061c71114b&scope=openid+profile+email&response_mode=form_post&nonce=df52b6dc64dd4c3393957675f365ae93_20180903064438&state=redir%3D%252Fwebmanifest.json' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://{myappname}.azurewebsites.net' is therefore not allowed access.
It would appear that my AAD authentication, which I enabled in the App Service, is interfering with my browser's manifest request.
I understand that to resolve this issue quickly, Microsoft would have to add this application to their CORS. This is certainly not something I would expect to happen. However, I need some alternative way to let the browser access the manifest.
I have added the necessary mimeMaps to my web.config.
<staticContent>
<remove fileExtension=".json" />
<mimeMap fileExtension=".json" mimeType="application/json" />
<remove fileExtension=".webmanifest" />
<mimeMap fileExtension=".webmanifest" mimeType="application/json" />
</staticContent>
Here's the top part of my Head:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf />
<meta name="viewport" content="width=device-width, initial-scale=>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/webmanifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="apple-mobile-web-app-title" content="{myappname}">
<meta name="application-name" content="{myappname}">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<title>@ViewBag.Title - {myappname}</title>
If I was using some kind of AJAX request, I'd follow one of the tutorials on the web. However, I have little to no control over the header, as far as I know.
Note: All occurrences of my app's name have been replaced with {myappname}. I really hope that those tokens are temporary...
In the tutorial link above, there's a relevant block of text that explains my issue better than my question itself:
In a typical scenario after a user authenticates to Azure AD to log into an application, Azure App Service sets a cookie called “AppServiceAuthSession” for that authenticated session with the client browser. The web application may use XMLHttpRequest / AJAX request for various functionality of the application and the request sent to Azure App Service would also contain the AppServiceAuthSession cookie. When this cookie is not present in the request, Azure App Service will redirect the request to Azure AD for login. This redirection causes the AJAX request to become a CORS request since the destination domain changes and Azure AD by default does not allow cross origin request.
In my case the browser is sending a request for the manifest that does not contain the necessary header.
481
I'm just winging it here, but you could try using the crossOrigin attribute on your manifest link like this:
<link rel="manifest" href="/webmanifest.json" crossOrigin="use-credentials">
Here are some related links that might be helpful. According to the first page, user credentials are not passed by default when requesting the manifest.json:
Please let me know if it helps out.
135
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
