2034306 - Show FormData payload with wrong encoding in devtools network panel

Status: UNCONFIRMED

(DevTools :: Netmonitor, defect, P3)

Description

[zunsthy+ff]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:150.0) Gecko/20100101 Firefox/150.0

Steps to reproduce:

Use this html code. Fill form and click submit button. Submit data can be viewed in devtools' network panel. Check the "Request" data panel.

<form
  action=""
  method="POST"
  enctype="multipart/form-data"
  accept-charset="UTF-8"
>
  <input name="文件" type="file">
  <input name="文字" type="text">
  <button type=submit>submit</button>
</form>

Actual results:

Devtools decode all FormData multipart encoding data with ASCII.
If CJK content in type="text" input or CJK content in filename, the value field or content-disposition field will be wrong.

Expected results:

correct decode fields except file data.

Comment 1

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

The Bugbug bot thinks this bug should belong to the 'DevTools::Netmonitor' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Julian Descottes [:jdescottes]]

Thanks for filing.

Values are always displayed correctly in my case (I used "文字" as text content), can you share a screenshot where the panel displays them incorrectly? Or is the issue only with the Content-Disposition section?

For the rest of the issue, in this case the multipart form data uses multiple encoding. While the data is sent as raw UTF8 bytes we still try to decode it to make it more user friendly. I think the only thing we could do is to attempt to detect UTF8 sequences that require a different encoding, but that sounds error prone.

FWIW, other devtools (chrome, safari) show the exact same behavior.

Comment 3

[zunsthy+ff]

(In reply to Julian Descottes [:jdescottes] from comment #2)

Values are always displayed correctly in my case (I used "文字" as text content), can you share a screenshot where the panel displays them incorrectly? Or is the issue only with the Content-Disposition section?

I create the page for this issue https://zunsthy.github.io/problem-collection/devtools-network-panel-decode-incorrect-for-formdata/

The screenshot when submit data with file:

https://github.com/zunsthy/problem-collection/raw/main/devtools-network-panel-decode-incorrect-for-formdata/pics/d-file-name.jpg

https://github.com/zunsthy/problem-collection/raw/main/devtools-network-panel-decode-incorrect-for-formdata/pics/d-input-name-value.jpg

If no file in data, decoding is correct:

https://github.com/zunsthy/problem-collection/raw/main/devtools-network-panel-decode-incorrect-for-formdata/pics/no-file.jpg