search

cloud-annotations / docusaurus-openapi

🦕 OpenAPI plugin for generating API reference docs in Docusaurus v2.
https://docusaurus-openapi.netlify.app
MIT License
498 stars 82 forks source link

This page crashed - URI malformed - When inserting win10 keyboard emoji on api field #260

Closed jNullj closed 11 months ago

jNullj commented 1 year ago

This was first detected in badges/shields#9519, Read more there I can reproduce this on docusaurus-openapi.netlify.app

  1. Go to https://docusaurus-openapi.netlify.app/petstore/get-user-by-user-name/
  2. Select the username text input field
  3. Open win10 on screen keyboard (the one that pop-ups from bellow, not the old win7 version)
  4. Select an emoji
  5. Get page crash with URI malformed
jNullj commented 1 year ago

More findings: I see a diff with events data when using windows on-screen keyboard and emoji shortcut (winkey+.) With on-screen keyboard when the issue appears: image With the emoji picker (win+.) when there is no issue: image

jNullj commented 1 year ago

Found the bug! image We are using encodeURIComponent to convert to a URI in the api call, but encodeURIComponent does not work with the unicode format '\uD83C' that the keyboard outputs insted of the emoji itself.

This can be found in https://github.com/cloud-annotations/docusaurus-openapi/blob/main/packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/buildPostmanRequest.ts

I can make a pull request fixing this

jNullj commented 1 year ago

Was too quick, this is not a valid unicode, i need to keep debugging

jNullj commented 1 year ago

Ok new insight, this is probebly related to onInput event. It appears that when i type using onInput the emoji start as non-exitsting unicode like \uD83C then the input continues and completes it into the pizza emoji. But our code tries to use encodeURIComponent in this middle state where only partial emoji was registered by onInput

jNullj commented 1 year ago

Confirmed using this textbox on github. I asked it to print to console the onInput event and from 1 emoji input using the keyboard i get 2 onInput events image

Ok you learn something new everyday, those are UTF-16 Encoding for emoji

So i get that the onInput meets half an emoji from the UTF-16 emoji and sends it to encodeURIComponent which fails

Will PR today or tomorrow with a solution

bourdakos1 commented 1 year ago

Good find! Thanks for looking into this :)