-
Notifications
You must be signed in to change notification settings - Fork 2.8k
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
Tiptap Media Picker: ImageSharp HMAC support #19333
Conversation
to get the resized URLs from the server. This adds support for ImageSharp's HMAC security.
There was a problem hiding this 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.
...raco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/media-picker.tiptap-toolbar-api.ts
Show resolved
Hide resolved
...raco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/media-picker.tiptap-toolbar-api.ts
Outdated
Show resolved
Hide resolved
…ar/media-picker.tiptap-toolbar-api.ts
… as documented this also deprecates the public maxWidth property
… and ensures that imageSize() accounts for maxHeight as well
There was a problem hiding this 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.
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.