Remote Javascript (Angular CLI) Debug on Apache with LDAP Authentication

I had issues doing remote JavaScript debugging with the application, developed using Angular CLI (v7), running on an Apache2.4 server when the application required LDAP authentication.  If the LDAP was disabled, then all worked as expected. 

The key was found in the /var/log/apache2/access.log. 

When the debugger tried to load the map files, the following was shown:

"GET /DR-Reports/dist/DR-Reports/main.js.map HTTP/1.1" 401 764 "-" "PhpStorm/183.5153.36"

The 401 indicated an authentication failure and the string "PhpStorm/183.5153.36" is the HTTP_USER_AGENT that the debugging system was using to load the map files.   A packet trace of the HTML between my PC and the server showed the same information.

To resolve this issue, I modified the site configuration (/etc/apache2/conf-enabled/YourConfig.conf) to the following:

alias /YourWebDir <AbsolutePathToFilesOnServer>
<Directory "<AbsolutePathToFilesOnServer>">
options Indexes FollowSymLinks
Allow from all
# RegExp check for user agent PhpStorm......
<If "%{HTTP_USER_AGENT} =~ /PhpStorm*/">
Require all granted
Satisfy All
</If>
# Otherwise use LDAP to authenticate user
<Else>
Satisfy All
AuthType Basic
AuthName "Validate using your Global ID"
AuthBasicProvider ldap
AuthLDAPURL "ldap://YourLDAP.com:389/DC=global,DC=YourCO,DC=com?sAMAccountName,displayName,givenName,sn"
AuthLDAPBindDN "ServiceAccoutUser"
AuthLDAPBIndPassword "ServiceAccountPassword"
require valid-user
</Else>
AddDefaultCharset off
</Directory>

I am sure there are better ways to make this work and/or more compact ways, but this works for me.

For deployment you might want to remove the UserAgent section as a security measure.

Please sign in to leave a comment.