Skip to content

Tiptap Media Picker: ImageSharp HMAC support #19333

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
May 16, 2025

Conversation

leekelleher
Copy link
Member

@leekelleher leekelleher commented May 15, 2025

Description

Fixes #18020.

Modifies the Tiptap Media Picker code to make use of the imaging repository, to get the resized URLs from the server.
This adds support for ImageSharp's HMAC security parameter.

Related PR: #19331.

See also the documentation on HMAC: https://docs.umbraco.com/umbraco-cms/reference/configuration/imagingsettings#hmac-secret-key

Limitations

Specifically for rich text editors, the HMAC is generated once, so if you modify any parameter that could affect the HMAC hash, the image will stop working. This is a limitation that has existed ever since HMAC was first implemented back in V12. Parameters that could affect this include, but are not limited to, the height, width, mode, and the path itself. This means if you change the image file (on the media item), the image will also stop working.
To get around this, you need to modify the media object to get a new HMAC if any of them change. You can, for instance, reselect the image, and a new HMAC will be generated.
If the HMAC salt is changed in appsettings, all images in rich text editors will also stop working.

The limitation does not apply to selected media items, for example, in the mediapicker and image cropper.

to get the resized URLs from the server.
This adds support for ImageSharp's HMAC security.
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR adds support for ImageSharp’s HMAC security parameter by updating the Tiptap Media Picker code to use the imaging repository for fetching resized image URLs.

  • Removed the legacy getProcessedImageUrl import and its usage.
  • Introduced a new imaging repository instance and corresponding request for resized items.

Copy link
Contributor

@iOvergaard iOvergaard left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I found I had to duplicate the logic into the drag'n'drop function for images as well, because it initially tries to simulate the server with the blob-url. This required me to add support for maxHeight as well to the function, and thanks to Copilot Chat, I was able to do that and create mocked tests for it as well. It should now mimick the ImageSharp.MAX mode.

@iOvergaard iOvergaard enabled auto-merge (squash) May 16, 2025 09:47
@iOvergaard iOvergaard merged commit 28fc817 into release/16.0 May 16, 2025
22 of 23 checks passed
@iOvergaard iOvergaard deleted the v16/bugfix/tiptap-media-picker-resized-urls branch May 16, 2025 10:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants