Tailored error message for custom host #32056
Open
+135
−3
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…pp by custom hostname Add custom middleware for to present an Angular-tailored message Fix angular#32028
alan-agius4
added
action: review
alan-agius4
requested changes
Dec 8, 2025
| @@ -0,0 +1,116 @@ | |||
| /** | |||
Collaborator
There was a problem hiding this comment.
This seems to change the behaviour for a number of valid cases.
Example:
http://foo.localhostwill now be marked as invalid- When adding allowed hosts, all sub-domains will also be marked as valid, but with this change they will be marked as invalid.
- Accessing the app with an external IP, will now be marked as invalid.
My suggestion would be that instead of recreating the middleware, just replace the response.
const middlewareStack = server.middlewares.stack;
const idx = middlewareStack.findIndex(({handle}) =>
handle.name.startsWith('hostValidationMiddleware'),
);
if (idx !== -1) {
const middleware = middlewareStack[idx];
const originalHandle = middleware.handle;
middleware.handle = function angularHostValidationMiddleware(req, res, next) {
originalHandle(
req,
{
writeHead: res.writeHead.bind(res),
end: () => res.end('Error message.'),
},
next,
);
};
}| <body> | ||
| <div class="box"> | ||
| <h1>Blocked request. This host ("${hostname}") is not allowed.</h1> | ||
| <p>The Angular development server only responds to local hosts by default.</p> |
Collaborator
There was a problem hiding this comment.
This is not actually fully true, as you can get a response via the external IP address.
Suggested change
| <p>The Angular development server only responds to local hosts by default.</p> |
| .box{max-width:760px;margin:0 auto} | ||
| h1{font-size:1.5rem;margin-bottom:.75rem} | ||
| p{margin:.5rem 0} | ||
| .muted{color:#6b7280} |
Collaborator
There was a problem hiding this comment.
Unused
Suggested change
| .muted{color:#6b7280} |
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="box"> |
Collaborator
There was a problem hiding this comment.
Optional NIT
Suggested change
| <div class="box"> | |
| <main> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Add custom middleware for to present an Angular-tailored message
Fix #32028
PR Checklist
Please check to confirm your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
The error message thrown when the Angular app is served via a custom hostname is incorrect/misleading
Issue Number: #32028
What is the new behavior?
Add custom middleware for to present an Angular-tailored message when angular served by ngrok
Does this PR introduce a breaking change?