[BUG] Pasting HTML content containing img tag with query param src is not submittable

Hi :wave:

My team, some of our users and I noticed something fairly strange yesterday.
We have a feature that allows users to quickly copy as HTML the content of a page (including images) and paste them anywhere. Since moving our images to Imgix however, we noticed that pasting that same HTML code in the body of a JIRA ticket (which used to work) makes it so it’s impossible to submit the issue. I get a 400 for the /rest/internal/3/issue/TICKET-XX/description endpoint with the following response:

{"errorMessages":["ATTACHMENT_VALIDATION_ERROR"],"errors":{}}

After a bit of debugging we found out that it’s mainly due to the presence of query parameters in the URL of the images present in the HTML that’s preventing us from submitting successfully. Removing the query parameters just works, but its not ideal. (those query params contain image transformation information like focal point, zoom, etc making it better to view the end image for the reader)

Here’s an example of the kind of image tag we usually have in our generated HTML output that we attempt to paste in JIRA:

<img src="https://images.tango.us/public/screenshot_12cfd689-30b7-435d-91aa-2518de7cc65b?crop=focalpoint&fit=crop&fm=png&fp-x=0.3888342351205116&fp-y=0.29858657243816256&fp-z=1.958762886597938&w=1200&ar=4066%3A2264" width="600" alt="Type test" />

We’re wondering if you have any hint on why this would happen / why would the presence of query param block the submission and how we could work around this.

Thanks in advance

Maxime

After some investigations we found the underlying issue. It looks like the function that parses of the image name on JIRA does not generate the value of the “name” property of the image properly when query params are added to the original image, thus making the markup not valid for submission

With query params in the URL of the src tag:

<img src="https://int-images.tango.us/public/screenshot_0294b3c3-55d1-40af-a672-41b6150a47d9?crop=focalpoint&fit=crop&fm=png&fp-x=0.5714&fp-y=0.3138&fp-z=2.275971451229183&w=1200&ar=3444%3A2196" width="600" alt="Type "abcdefg"" />

Jira generates this HTML output:

    <img
      class="sc-qlkyrg-0 fWxHpt"
      data-testid="media-image"
      draggable="false"
      alt="Type "
      src="blob:https://tango-technology.atlassian.net/2c7f7b24-29ec-4d6a-8574-ac2d7b3c5dcc#media-blob-url=true&amp;id=42da305a-295b-4302-8032-3eb6c5391f31&amp;collection=&amp;contextId=10022&amp;mimeType=image%2Fpng&amp;name=screenshot_0294b3c3-55d1-40af-a672-41b6150a47d9%3Fcrop%3Dfocalpoint%26fit%3Dcrop%26fm%3Dpng%26fp-x%3D0.5714285714285714%26fp-y%3D0.31420765027322406%26fp-z%3D2.275971451229183%26w%3D1200%26ar%3D3444%253A2196&amp;size=633453&amp;width=1200&amp;height=765"
      style="transform: translate(-50%, -50%); height: 100%;"
    />

Without query params in the src tag:

<img src="https://int-images.tango.us/public/screenshot_0294b3c3-55d1-40af-a672-41b6150a47d9" width="600" alt="Type "abcdefg"" />

JIRA generates the following HTML

    <img
      class="sc-qlkyrg-0 fWxHpt"
      data-testid="media-image"
      draggable="false"
      alt="Type "
      src="blob:https://tango-technology.atlassian.net/127b5176-6edc-4e2b-815a-a05ae2198c9c#media-blob-url=true&amp;id=4cde740a-5ee3-4afb-9af4-392bf5e077c4&amp;collection=upload-user-collection-1385809115&amp;contextId=10022&amp;mimeType=image%2Fpng&amp;name=screenshot_0294b3c3-55d1-40af-a672-41b6150a47d9&amp;size=912469&amp;width=3444&amp;height=2196&amp;alt=Type%20"
      style="transform: translate(-50%, -50%); height: 100%;"
    />

We would love to help to fix this if it’s possible as pasting images like these in JIRA is a use case for some of our users.

Let us know if you need anything else!