feat: Detect URLs in monitor descriptions

[eden881]

⚠️⚠️⚠️ Since we do not accept all types of pull requests and do not want to waste your time. Please be sure that you have read pull request rules:
https://github.com/louislam/uptime-kuma/blob/master/CONTRIBUTING.md#can-i-create-a-pull-request-for-uptime-kuma

Tick the checkbox if you understand [x]:

• I have read and understand the pull request rules.

Description

Fixes #5575

Adds a minimal logic to the description field to detect URL schemes and make them clickable.
It also sanitizes the URL to prevent XSS attacks.

Type of change

• User interface (UI)
• New feature (non-breaking change which adds functionality)

Checklist

• My code follows the style guidelines of this project
• I ran ESLint and other linters for modified files
• I have performed a self-review of my own code and tested it
• I have commented my code, particularly in hard-to-understand areas (including JSDoc for methods)
• My changes generates no new warnings
• My code needed automated testing. I have added them (this is optional task)

Screenshots (if any)

[CommanderStorm]

This would open us to an XSS, as the content is just v-html'ed..

[eden881]

@CommanderStorm That's the reason I've sanitized the input from the description and not processed it blindly.
I can try and change it in a way that doesn't involve v-html - do you know a way to create links without <a> tags?

[CommanderStorm]

I think there might be a misunderstanding.

My concern isn’t about creating links but about the rest of the input. The current approach doesn’t sanitize the description to prevent an XSS.

For example, if a <script> tag is included, it would be rendered as regular HTML without proper sanitization.

[CommanderStorm]

Here is how we do this on the status page side.
I don't know if this renders links or if marked can be configured to do so.

uptime-kuma/src/pages/StatusPage.vue

Lines 589 to 595 in 20820f5

	descriptionHTML() {
	if (this.config.description != null) {
	return DOMPurify.sanitize(marked(this.config.description));
	} else {
	return "";
	}
	},

[eden881]

I managed to avoid v-html completely with a component :)

Not sure what failed the test though. It says Error: Connect Timeout Error.
Maybe something spontaneous, can you trigger a rerun?

Edit: I've synced my branch and it triggered a rerun ✅

[CommanderStorm]

Have you investigated if a similar solution as on the status page could work?
I think rendering markdown would be much simpler and better maintainable than splitting the codebase..

(What you came up with looks quite hacky..)

[eden881]

Sure, I'll give it a shot.

[eden881]

@CommanderStorm I've used the approach you suggested from StatusPage.vue.
It works, but:

• It still uses v-html (although this time it's passed through DOMPurify.sanitize())
• The <a> tag doesn't contain target="_blank" rel="noopener noreferrer" and so it opens in the current tab, replacing the status page, instead of creating a new tab

It's still better than nothing and I have no problem with this solution, but I do think the component approach is slightly better functionality-wise.

What do you think? If it looks good to you feel free to merge :)