Images broken since upgrade from 16 to 17

Questions
1

Yesterday I upgraded a site from v16 to v17. Today I’ve discovered that all content pages which contain an image (from Azure blob storage) in a tiptap property are now showing as broken links. If I select the image in tiptap then click the image icon to bring up the image selector (I don’t have to actually re-select anything, just opening the selector is sufficient), the image is then retrieved as expected. I do however then have to re-publish the page in order to fix the image display. If I just cancel the selector it doesn’t fix the broken link in the content even though the selector displayed the image.

Looking at the markup in the editor, it doesn’t look any different between broken and fixed e.g.

Broken markup looks like this:

<img data-udi="umb://media/282bcadc9ec74e4392784a1e38e548b1" src="/media/1lfcwkgh/poultry.jpg?width=584&amp;height=306&amp;mode=max" alt="" width="584" height="306">

Open the image selector, confirm the image displayed, closed the selector. Republish the page, markup looks like this:

<img data-udi="umb://media/282bcadc9ec74e4392784a1e38e548b1" src="/media/1lfcwkgh/poultry.jpg?rmode=max&amp;width=584&amp;height=306&amp;hmac=015f1db446f1a1742a198681b0800727fa970e866dd250edae3f1cf7328cf005" alt="" width="584" height="306">

So is tiptap doing something different under the bonnet between v16 and 17? Don’t really want to have to do this across the entire site of content. Anyone had this issue and know any fix?

2

Hi!

Looks like it could be caused by the ImageSharp HMAC setting.

HMAC for image requests is a relatively new feature in Umbraco 17, and from 17.3 Umbraco started generating an HMAC secret automatically to make image processing more secure by default.

Could you check whether you have an HMACSecretKey configured in appsettings.json?

If you do, try leaving it empty:

"Umbraco": {
  "CMS": {
    "Imaging": {
      "HMACSecretKey": ""
    }
  }
}

Then restart the site.

With an HMAC key configured, ImageSharp expects transformed image URLs to contain a valid hmac parameter. Your existing Tiptap content from v16 contains resize parameters such as width, height and mode, but no HMAC signature, so those requests are rejected.

Opening the image picker in v17 causes Tiptap to regenerate the URL with the required hmac, which is why republishing fixes it.

Leaving the HMAC secret empty should allow the existing v16 image URLs to continue working without having to republish all the content.

3

Agreed, this is the most likely. However, I have not seen an issue between v16 and v17 myself. So Inwonder where it went wrong.

4

Awesome thank you, exactly that. I’d added a hmac secret key on the recommendation from the health check. Removed it, bumped and all working again.

5

Woohoo! Great! :tada:

I don’t know which Umbraco 17 version you were on, but if I’m not mistaken, it looks like this was fixed in Umbraco 17.6.0, which was released on August 6, if you still want to use the HMAC feature.

github.com/umbraco/Umbraco-CMS