Returning 401 or 403 to browser

Question

We are modifying code that displays in response to a Server sending either a 401 or a 403 error.

export const handleStatusCodeMessage = (errorStatusCode, verbiageConfig, errorStatusMessage) => {
    let {errorType, errorMessage} = '';
    switch (errorStatusCode) {
        case '401':
            if (isMember()) {
                errorType = GENERAL_ERROR.ERROR_TYPE;
                errorMessage = GENERAL_ERROR.ERROR_MESSAGE + getVerbiageTrailMessage(verbiageConfig);
            } else {
                errorType = UNAUTHORIZED.ERROR_TYPE;
                errorMessage = UNAUTHORIZED.ERROR_MESSAGE;
            }
            break;
        case '403':
            if (isMember()) {
                errorType = GENERAL_ERROR.ERROR_TYPE;
                errorMessage = GENERAL_ERROR.ERROR_MESSAGE + getVerbiageTrailMessage(verbiageConfig);
            } else {
                errorType = UNAUTHORIZED.ERROR_TYPE;
                errorMessage = UNAUTHORIZED.ERROR_MESSAGE;
            }
            break;
        case 'etc': // other cases
    }
    return {errorType, errorMessage};
};

These are different cases, and part of the acceptance criteria for our banking industry is that we show screenshots of the page in the browser before and after the code changes, so that management can easily tell what the impact was.

How do I catch the return stream in Chrome, modify the server response on my local machine, and return a 401 or a 403 to my browser so we can get screenshots of it in the browser?

We have to check both: 401 and 403.

The closest similar question I was able to find was here:

How to generate sample 401, 403 http responses?

But the answer there was just a link, and the link is no longer valid. :(

For the 401 can you not just visit a page you don't have access to? — msmoore, Sep 02 '22 at 14:56
Did the answer help you? Or did you solve your problem in another way? Could you update us? — msmoore, Sep 13 '22 at 07:36
@msmoore, I work in the banking industry. I presented your answer as a solution, but we have not been authorized to use the code yet. Banking has lots of regulatory oversight. They do not allow us to simply insert code and test it. It makes no sense. It's not like you can steal money from a development server!!! — , Sep 13 '22 at 14:49

msmoore · Accepted Answer · 2022-09-02T15:28:22.850

Not specific to Chrome but you could use a service worker to mock the response.

MSW registers a Service Worker that listens to all request via the fetch event, then re-directs them to the MSW library.

You can then send out your custom mocked responses to the Service Worker: e.g,. a 401 or 403 response (a basic example from the docs is shown below)

import { setupWorker, rest } from 'msw'

const worker = setupWorker(
  rest.get('https://example.com/test', (req, res, ctx) => {
    return res(
      ctx.status(401, 'Mocked status'),
      ctx.json({
        message: 'Mocked response JSON body',
      }),
    )
  }),
)

worker.start()

The library uses quite a nice declaritive API. Meaning it should be easy to build upon if your test cases expand in the future.

What's nice is that the above will also show in your Chrome dev tools and you don't have to mutate your axios or fetch requests within your app.

Returning 401 or 403 to browser

1 Answers1