1696128 - The Authorization header is cropped in NetworkMonitor for long JWT tokens.

Status: NEW

(DevTools :: Netmonitor, defect, P3)

Description

[Andrei Petcu]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:87.0) Gecko/20100101 Firefox/87.0

Steps to reproduce:

I signed up to https://alpha.uipath.com/ (it can be any web site that uses a long enough JWT token). Here is the header of my token.

I opened devtools > network > click on a XHR request > I copied the Authorization header.

Go to https://jwt.io/ and paste the token

Actual results:

The token is invalid. It says that the signature is broken.
This happens because the body contains …

Expected results:

I should have seen the token as valid with no cropping and no "…".
If I go to raw data region, I can copy it but it's harder to do also because of the other bug where focus is lost due to this bug https://bugzilla.mozilla.org/show_bug.cgi?id=1632030

Comment 1

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Thank you for the report!

Could you please attach a screenshot, thank you.

Honza

Comment 2

[Andrei Petcu]

Can I just pick this up? It's simpler to try to fix on my machine than to help you reproduce. I'm a n00b at devtools :)

Comment 3

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Yes, please, thank you!

You might want to read our docs
https://firefox-source-docs.mozilla.org/devtools/
https://firefox-source-docs.mozilla.org/setup/index.html

Honza

Comment 4

[Andrei Petcu]

Still exploring the source of the issue but here is what I found:
cropLimit: 1024, is the source of the issue. If I change it to cropLimit: 2048, it works for this specific token I have.
https://searchfox.org/mozilla-central/source/devtools/client/netmonitor/src/components/request-details/PropertiesView.js#76

const shouldCrop = !isOpen && cropLimit && text.length > cropLimit;
https://searchfox.org/mozilla-central/source/devtools/client/shared/components/reps/reps/string.js#85

maybeCropString -> rawCropString

And then it crops the middle of my string with alternativeText.

if (text.length > limit) {
      return (
        text.substr(0, Math.ceil(halfLimit)) +
        alternativeText +
        text.substr(text.length - Math.floor(halfLimit))
      );
    }

https://searchfox.org/mozilla-central/source/devtools/client/shared/components/reps/reps/rep-utils.js#221

This seems to be by design, it's not a bug. What should I do? My original problem is that it was hard for me to copy a JWT token. Should we just increase this number or should we find alternative UX for it?

Comment 5

[Andrei Petcu]

Or maybe I should just fix https://bugzilla.mozilla.org/show_bug.cgi?id=1632030 and use the raw version of the headers.

Comment 6

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: Disable crop limit for HTTP header values

We could disable the `cropLimit` for HTTP header values:

@Bomsy, what do you think?

Honza

Comment 7

[Hubert Boma Manilla (:bomsy)]

Yes. Honza, i agree lets just disable it for the HeadersPanel.

Hi Andrei,
Lets go with Honza's suggestion above in comment 6
Thanks

Comment 8

[Clinton]

Is this bug still open to being worked on? I would like to tackle it.

Comment 9

[Hubert Boma Manilla (:bomsy)]

Go ahead assigned to you.

Thanks

Comment 10

[Clinton]

Attachment: [devtools] Bug 1696128 - Authorization header is cropped in NetworkMonitor for long JWT tokens. r=honza,bomsy

Comment 11

[Clinton]

I've made the necessary code changes and would be waiting on your review, secondly, I was wondering is this covered by tests, if yes, how am I to go about testing this?

Comment 13

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Thank you for the patch!

Two thing we should do here:

• We have the same problem in the Cookies panel, so we could disable the cropping there too
  https://searchfox.org/mozilla-central/source/devtools/client/netmonitor/src/components/request-details/CookiesPanel.js

• Yes, we should write a test for both panels
  You might want to read
  https://firefox-source-docs.mozilla.org/devtools/tests/mochitest-devtools.html

This test feels similar, so you can get some inspiration
https://searchfox.org/mozilla-central/source/devtools/client/netmonitor/test/browser_net_headers_filter.js

Please add all additional changes into the one existing patch
(use hg commit amend)

Honza

Comment 14

[Clinton]

Attachment: browser_net_headers_trim.js

I'm having some issues setting up the test, I think I've spent around 3 days trying to figure out what each function is for, so any pointers would be highly appreciated, So far here's what I've done:
```js

```

Comment 15

[BugBot [:suhaib / :marco/ :calixte]]

The bug assignee is inactive on Bugzilla, so the assignee is being reset.