Add custom html code to head #3693

mueller-ma · 2023-09-05T06:36:46Z

⚠️⚠️⚠️ 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

With this PR a new text field will be added that allows setting custom html code to the <head> of a status page.
The implementation will be similar to
https://github.com/louislam/uptime-kuma/pull/2567/files, but with a multi-line text field and without escaping any special chars.

This will allow tracking with most analytic platforms and has been requested several times.
Closes #2818

Type of change

Please delete any options that are not relevant.

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 generate no new warnings
My code needed automated testing. I have added them (this is optional task)

Screenshots (if any)

Please do not use any external image service. Instead, just paste in or drag and drop the image here, and it will be uploaded automatically.

louislam · 2023-10-11T12:49:42Z

I personally ok with this, but:

As @chakflying said (Add support for custom html script embedding #3115 (comment)), some network security engineers may classify this as an XSS attack. Have to confirm with someone first, since I am not working on the security field.
Handling special cases like invalid tags, syntax error javascript etc. Make sure it will not break the whole page by typo.

mueller-ma · 2023-10-13T08:24:10Z

For the XSS attack: In many cases the person with login to the status page might also edit the html files on the server itself. For the other cases a env variable could be added that disables the new setting, so the server admin can restrict the kuma admin.

mueller-ma · 2023-10-18T07:55:50Z

Using npm run dev the new setting and the migration are working! I tried to break the page with invalid code, but the browsers (latest Chrome and Firefox) do their best to fix it:

<p>Hi</p><foo: Browsers don't add the tag <foo, because it's invalid.
<p>Hi</p><script>: Browsers add the closing tag for script: <p>Hi</p><script></script>

From my side this is ready to merge.

mueller-ma · 2024-02-13T10:00:49Z

Can I do something to get this merged?

db/knex_migrations/2023-10-13-1200-add-custom-html.js

server/model/status_page.js

mueller-ma · 2024-03-11T10:07:03Z

I've addressed the security concerns mentioned in the previous review. Could you please take another look at the PR? Thanks!

CommanderStorm

Currently, setting it to false or 0 would activate this feature.
=> lets not check the environment variable this way ^^

I have also left some remarks about how we communicate this feature.
I think the communication of this is not quite where it needs to be mergable.

src/lang/en.json

server/model/status_page.js

CommanderStorm · 2024-03-11T17:01:40Z

src/pages/StatusPage.vue

+                <!-- Custom HTML -->
+                <div class="my-3">
+                    <div class="mb-1">{{ $t("Custom HTML") }}</div>
+                    <prism-editor v-model="config.customHtml" class="css-editor" :highlight="highlighter" line-numbers></prism-editor>


I think the frontend should be disabled if said environment variable is not present and enabled when it is.

This would also enable baving a better helptext, communicating that adding stuff here is inherently kind of dangerous as said code is not vetted by security reviews.

To do this would most likely involve creating a setting on server, then the status page edit page would have to fetch that setting and enable/disable accordingly. A bit complicated IMO.

Maybe having a remark in the description is good enough?

Since vite also supports environment variables, I am not convinced that would be necessary.
Needs figuring out if this linked correctly though.

Haven't tested this but I think these only work at build time.

Also have not tested, but arent we using SSR for this feature?
=> the environment variables should be covered...

With this PR a new text field will be added that allows setting custom html code to the `<head>` of a status page. The implementation will be similar to https://github.com/louislam/uptime-kuma/pull/2567/files, but with a multi-line text field and without escaping any special chars. For security reasons the env var `UPTIME_KUMA_ALLOW_CUSTOM_HTML` must be set to `1` to enable this feature. This will allow tracking with most analytic platforms and has been requested several times. Closes #2818

CommanderStorm · 2024-06-03T23:18:39Z

Reworked the PR to adress my concerns: #4817

CommanderStorm · 2024-06-03T23:21:07Z

Thanks a lot for the contribution.
Next step is a review of #4817 and if found good, this is merged in to the next release (dependent on reviewer availability) ^^

This comment was marked as resolved.

Sign in to view

mueller-ma changed the title ~~[empty commit] Add custom html code to head~~ Add custom html code to head Oct 13, 2023

This comment was marked as resolved.

Sign in to view

mueller-ma marked this pull request as ready for review October 23, 2023 07:41

This comment was marked as resolved.

Sign in to view

CommanderStorm mentioned this pull request Nov 10, 2023

Mastodon link verification #3207

Closed

1 task

This comment was marked as resolved.

Sign in to view

chakflying added help wanted May need your help to test or answer area:status-page Everything related to the status page labels Dec 2, 2023

CommanderStorm reviewed Feb 13, 2024

View reviewed changes

db/knex_migrations/2023-10-13-1200-add-custom-html.js Outdated Show resolved Hide resolved

server/model/status_page.js Outdated Show resolved Hide resolved

CommanderStorm requested changes Mar 11, 2024

View reviewed changes

CommanderStorm added the pr:please address review comments this PR needs a bit more work to be mergable label May 19, 2024

CommanderStorm mentioned this pull request Jun 3, 2024

Allow adding custom html code to head #4817

Open

6 tasks

CommanderStorm closed this Jun 3, 2024

chakflying removed the help wanted May need your help to test or answer label Jun 4, 2024

mueller-ma deleted the custom-head branch June 4, 2024 06:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add custom html code to head #3693

Add custom html code to head #3693

mueller-ma commented Sep 5, 2023 •

edited by CommanderStorm

Loading

This comment was marked as resolved.

louislam commented Oct 11, 2023

mueller-ma commented Oct 13, 2023

This comment was marked as resolved.

This comment was marked as resolved.

mueller-ma commented Oct 18, 2023 •

edited

Loading

This comment was marked as resolved.

This comment was marked as resolved.

mueller-ma commented Feb 13, 2024

mueller-ma commented Mar 11, 2024

CommanderStorm left a comment

CommanderStorm Mar 11, 2024

chakflying Mar 12, 2024

CommanderStorm Mar 12, 2024

chakflying Mar 12, 2024

CommanderStorm Mar 12, 2024

CommanderStorm commented Jun 3, 2024

CommanderStorm commented Jun 3, 2024

Add custom html code to head #3693

Add custom html code to head #3693

Conversation

mueller-ma commented Sep 5, 2023 • edited by CommanderStorm Loading

Description

Type of change

Checklist

Screenshots (if any)

This comment was marked as resolved.

louislam commented Oct 11, 2023

mueller-ma commented Oct 13, 2023

This comment was marked as resolved.

This comment was marked as resolved.

mueller-ma commented Oct 18, 2023 • edited Loading

This comment was marked as resolved.

This comment was marked as resolved.

mueller-ma commented Feb 13, 2024

mueller-ma commented Mar 11, 2024

CommanderStorm left a comment

Choose a reason for hiding this comment

CommanderStorm Mar 11, 2024

Choose a reason for hiding this comment

chakflying Mar 12, 2024

Choose a reason for hiding this comment

CommanderStorm Mar 12, 2024

Choose a reason for hiding this comment

chakflying Mar 12, 2024

Choose a reason for hiding this comment

CommanderStorm Mar 12, 2024

Choose a reason for hiding this comment

CommanderStorm commented Jun 3, 2024

CommanderStorm commented Jun 3, 2024

mueller-ma commented Sep 5, 2023 •

edited by CommanderStorm

Loading

mueller-ma commented Oct 18, 2023 •

edited

Loading