How to configure IIS URL Rewrite module to work with "HTML 5 pushState" style and hash fragments on url?

Question

Angular 2 has a PathLocationStragy to work with html5 routes and a HashLocationStrategy to work with hash fragments '#' on routes.

The issue here is when we use OIDC (OpenID Connect) for user authentication and PathLocationStragy (or html5mode for routes on AngularJS) because OpenID on some flows returns data after a '#' fragment after redirect back to the site after user logging with a url as follow: http://mysite/callback#code=7b60c0570d7c4da0fc60678c0e46deadd5eeab0a659203fd44efb7cd51b2cdab&id_token=eyJhb ...

For html5 routes is very common the settings bellow on IIS Url Rewrite:

... <system.webServer> <rewrite> <rules> <remove name="AngularJS Routes" /> <rule name="AngularJS Routes" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> <add input="{REQUEST_URI}" pattern="/(api)/" negate="true" /> </conditions> <action type="Rewrite" url="/" /> </rule> </rules> </rewrite> </system.webServer> ...

But when the web sever receives the url with http://mysite/callback#code=7b60c0570d7c4d from Authorization Server after user logging the response for this request is: 403 - Forbidden: Access is denied.

I think that the problem is with the Url rewrite settings, not with AngularJS or Angular 2 app´s... How to solve that? How to use AngularJS/Angular 2 with html5 route style and OpenID Connect?

Answer 1

Fragment values are not sent to the server, they are only handled client-side by the browser. The browser is only sending http://mysite/callback