wysiwyg alignment changes access_token

[lambdajack]

Preflight Checklist

• I have completed all Troubleshooting Steps.
• I'm on the latest version of Directus.
• There's no other issue that already describes my problem.

Describe the Bug

When using the 'align left' 'align right' 'align center' 'align justify' formatting options on an image inside a wysiwyg field - setting anything other than what it was originally imported into the field as causes the default access_token (which has been set in the interface) to become an automatically generated token.

1. Importing an image / publishing etc:

2. Leaving the import alone - notice the access_token is what I've set it to be in the interface "web-app-public-token":

3. Centering the image and then publishing etc:

4. Notice how the centered image uses a completely random token.

5. If you move the image back to the alignment option it had when it was first imported, it starts using the token set in the interface again.

To Reproduce

1. Create a brand new database and directus instance.
2. Create a collection with a wysiwyg field.
3. Take steps listed above - set the innerHtml somewhere in a client or use postman etc to see it.

Errors Shown

After some time (15 mins?) 'unauthorised' when trying to render the wysiwyg content if it does not have the access_token set to what has been set in the interface.

What version of Directus are you using?

Latest / 9.1.2 / Docker (9.0.1?)

What version of Node.js are you using?

LTS & latest

What database are you using?

Postgres & MySQL

What browser are you using?

Chrome, Firefox, Brave (completely stock - incognito - no extensions etc)

What operating system are you using?

Ubuntu

How are you deploying Directus?

Locally & Docker (not at the same time)

[lambdajack]

Any help on this guys is much appreciated - a client requires the ability to format their images left / right / center etc in various places. Directus is great and have had good feedback from the client.

Let me know if there's anything else I can help with.

I think this is related to #9831

[rijkvanzanten]

@jacksbrand Is that access token saved to the database? It's correct behavior that the preview within the app uses the temporary token

[lambdajack]

@rijkvanzanten - thanks for getting back to me on this - yeah the database has saved the img element with the access token set to the temp string.

[lambdajack]

@rijkvanzanten - just confirmed - when I import the image it saves with the token I've set in the interface:

But when I center it:

Strangely enough - when I set it back to where it was originally (justify it seems in this case) the original and correct token is written back to the db:

[rijkvanzanten]

The regex used to replace the temporary token fails on img tags that have an inline style attribute, which is the case when using alignment in tinymce:

directus/app/src/interfaces/input-rich-text-html/input-rich-text-html.vue

Lines 273 to 278 in 74db449

	const regex = new RegExp(
	`(<[^=]+=")(${escapeRegExp(
	url
	)}assets/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}(?:\\?[^#"]*)?(?:#[^"]*)?)("[^>]*>)`,
	'gi'
	);

With style attribute:

Without style attribute:

Most definitely within the first capture group here: (<[^=]+="). Time to brush up on my RegEx syntax ᕕ( ᐛ )ᕗ

[lambdajack]

@rijkvanzanten - legend nice spot - thank you. #RegexIsFun