[GH-ISSUE #877] Make Web interface content (JS, CSS) use relative paths #742

Closed
opened 2026-02-26 06:34:13 +03:00 by kerem · 5 comments
Owner

Originally created by @danielriddell21 on GitHub (Feb 8, 2021).
Original GitHub issue: https://github.com/NginxProxyManager/nginx-proxy-manager/issues/877

Hi, I am trying to hide the nginx proxy manager behind a sub directory. But sadly this is not possible due to the js and css being loaded in via absolute paths. Is there a way we can change this or a solution I can use to address this.

This is a duplicate of #631

On the other ticket I proved a somewhat fix using sub filters, sadly this did not resolve the full issue as although the redirects, css and javascript now load. The login doesn't work now.

Also, does my ticket relate at all to branch/static-content

Originally created by @danielriddell21 on GitHub (Feb 8, 2021). Original GitHub issue: https://github.com/NginxProxyManager/nginx-proxy-manager/issues/877 Hi, I am trying to hide the nginx proxy manager behind a sub directory. But sadly this is not possible due to the js and css being loaded in via absolute paths. Is there a way we can change this or a solution I can use to address this. This is a duplicate of #631 On the other ticket I proved a somewhat fix using sub filters, sadly this did not resolve the full issue as although the redirects, css and javascript now load. The login doesn't work now. Also, does my ticket relate at all to **`branch/static-content`**
kerem 2026-02-26 06:34:13 +03:00
Author
Owner

@danielriddell21 commented on GitHub (Feb 8, 2021):

Copying my comment from #631

proxy_set_header Accept-Encoding "";
sub_filter 'href="/' 'href="/app/nginx/';
sub_filter 'src="/' 'src="/app/nginx/';
sub_filter 'window.location="/' 'window.location="/app/nginx/';
sub_filter_once off;
sub_filter_types text/css text/javascript;

I used the above to try and get the css / js to load on the page. Seems though the easiest way around this is to change all the absolute paths to relative paths. So I can use

location /app/nginx/ {
    proxy_pass http://localhost:81/
}
<!-- gh-comment-id:775135011 --> @danielriddell21 commented on GitHub (Feb 8, 2021): Copying my comment from #631 > proxy_set_header Accept-Encoding ""; > sub_filter 'href="/' 'href="/app/nginx/'; > sub_filter 'src="/' 'src="/app/nginx/'; > sub_filter 'window.location="/' 'window.location="/app/nginx/'; > sub_filter_once off; > sub_filter_types text/css text/javascript; I used the above to try and get the css / js to load on the page. Seems though the easiest way around this is to change all the absolute paths to relative paths. So I can use ``` location /app/nginx/ { proxy_pass http://localhost:81/ } ```
Author
Owner

@xannor commented on GitHub (Feb 14, 2021):

Looking at the code, and researching nodejs express, this line, sets the "prefix" to / so all routing will force things back to /. I believe the app operates relative, but the service forces hard paths. The solution I see would be to have some way for the service to be configured with a hard prefix instead of just / or for it to have some way to pass a trusted header (i.e. a header it is told to trust via config, becasue you really cannot trust any of them.)
Edit:
It looks like the script bundler for the client side code does sometimes have hard references to / and /api/. This would also need to be corrected so the prefix is passed from the backend.

<!-- gh-comment-id:778800777 --> @xannor commented on GitHub (Feb 14, 2021): Looking at the code, and researching nodejs express, [this line](https://github.com/jc21/nginx-proxy-manager/blob/ea28da90b23d1896c3322d23897672fa2f20954a/backend/app.js#L55), sets the "prefix" to / so all routing will force things back to /. I believe the app operates relative, but the service forces hard paths. The solution I see would be to have some way for the service to be configured with a hard prefix instead of just / or for it to have some way to pass a trusted header (i.e. a header it is told to trust via config, becasue you really cannot trust any of them.) Edit: It looks like the script bundler for the client side code does sometimes have hard references to / and /api/. This would also need to be corrected so the prefix is passed from the backend.
Author
Owner

@danielriddell21 commented on GitHub (Feb 18, 2021):

@xannor Would this be a easy change I could do? Or would this be something which would require alot of work? If so I could bang in a PR with the change... unless you wanted to

<!-- gh-comment-id:781613599 --> @danielriddell21 commented on GitHub (Feb 18, 2021): @xannor Would this be a easy change I could do? Or would this be something which would require alot of work? If so I could bang in a PR with the change... unless you wanted to
Author
Owner

@xannor commented on GitHub (Feb 19, 2021):

Some parts may be easy, I'm not sure about the client side. For the server side all I believe is needed is a small change to the app.js file: app.use(require('config').prefix || '/', require('./routes/api/main'));

This would use a prefix property set in the config as the base prefix for the express engine, so all urls created would be relative to that point, and it should default to the original if not provided so it would not break any existing setups. This approach is not very robust so it would be easy for someone to break their setup by putting bad data in the config, but this would be a more "advanced" usage.

For the client side it may be more complicated. All the points where the routing is hard coded to '/' (such as /api/, /js/, and /images/) would need to be converted to either get a prefix or path from the app router or from the server. I am less familiar with the client side framework so I am not sure if there is an easy way for that. Also all the html templates would need to either use relative or some form of passed in prefix since they have a lot of hard coded references. This believe is where most of the work would be needed.

<!-- gh-comment-id:782063373 --> @xannor commented on GitHub (Feb 19, 2021): Some parts may be easy, I'm not sure about the client side. For the server side all I believe is needed is a small change to the app.js file: [app.use(require('config').prefix || '/', require('./routes/api/main'));](https://github.com/jc21/nginx-proxy-manager/blob/ea28da90b23d1896c3322d23897672fa2f20954a/backend/app.js#L55) This would use a prefix property set in the config as the base prefix for the express engine, so all urls created would be relative to that point, and it should default to the original if not provided so it would not break any existing setups. This approach is not very robust so it would be easy for someone to break their setup by putting bad data in the config, but this would be a more "advanced" usage. For the client side it may be more complicated. All the points where the routing is hard coded to '/' (such as /api/, /js/, and /images/) would need to be converted to either get a prefix or path from the app router or from the server. I am less familiar with the client side framework so I am not sure if there is an easy way for that. Also all the html templates would need to either use relative or some form of passed in prefix since they have a lot of hard coded references. This believe is where most of the work would be needed.
Author
Owner

@chaptergy commented on GitHub (May 12, 2021):

Duplicate of https://github.com/jc21/nginx-proxy-manager/issues/631

<!-- gh-comment-id:840018762 --> @chaptergy commented on GitHub (May 12, 2021): Duplicate of https://github.com/jc21/nginx-proxy-manager/issues/631
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/nginx-proxy-manager-NginxProxyManager#742
No description provided.