From 3152e8c288d735cfe1045779d754d574a73fe6bc Mon Sep 17 00:00:00 2001
From: Lukasz Tulikowski <lukasz@softcloud.dev>
Date: Tue, 8 Jul 2025 20:26:05 +0200
Subject: [PATCH 1/3] fix(color): add validation for CSS color formats in
 getColorOpt function

---
 app/img/devices/compute.php | 140 ++++++++++++++++++------------------
 includes/functions.php      |  10 +++
 2 files changed, 80 insertions(+), 70 deletions(-)

diff --git a/app/img/devices/compute.php b/app/img/devices/compute.php
index bf744a3a..63ddeb44 100644
--- a/app/img/devices/compute.php
+++ b/app/img/devices/compute.php
@@ -8,78 +8,78 @@ $color = getColorOpt();
 	 viewBox="0 0 291.5 203.2" style="enable-background:new 0 0 291.5 203.2;" xml:space="preserve">
 <style type="text/css">
 	.st0{clip-path:url(#SVGID_2_);}
-	.st1{clip-path:url(#SVGID_4_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st2{clip-path:url(#SVGID_6_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st3{clip-path:url(#SVGID_8_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st4{clip-path:url(#SVGID_10_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st5{clip-path:url(#SVGID_12_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st6{clip-path:url(#SVGID_14_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st7{clip-path:url(#SVGID_16_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st8{clip-path:url(#SVGID_18_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st9{clip-path:url(#SVGID_20_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st10{clip-path:url(#SVGID_22_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st11{clip-path:url(#SVGID_24_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st12{clip-path:url(#SVGID_26_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st13{clip-path:url(#SVGID_28_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st14{clip-path:url(#SVGID_30_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st15{clip-path:url(#SVGID_32_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st16{clip-path:url(#SVGID_34_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st17{clip-path:url(#SVGID_36_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st1{clip-path:url(#SVGID_4_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st2{clip-path:url(#SVGID_6_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st3{clip-path:url(#SVGID_8_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st4{clip-path:url(#SVGID_10_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st5{clip-path:url(#SVGID_12_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st6{clip-path:url(#SVGID_14_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st7{clip-path:url(#SVGID_16_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st8{clip-path:url(#SVGID_18_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st9{clip-path:url(#SVGID_20_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st10{clip-path:url(#SVGID_22_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st11{clip-path:url(#SVGID_24_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st12{clip-path:url(#SVGID_26_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st13{clip-path:url(#SVGID_28_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st14{clip-path:url(#SVGID_30_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st15{clip-path:url(#SVGID_32_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st16{clip-path:url(#SVGID_34_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st17{clip-path:url(#SVGID_36_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
 	.st18{clip-path:url(#SVGID_38_);}
-	.st19{clip-path:url(#SVGID_40_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st20{clip-path:url(#SVGID_42_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st21{clip-path:url(#SVGID_44_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st22{clip-path:url(#SVGID_46_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st23{clip-path:url(#SVGID_48_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st24{clip-path:url(#SVGID_50_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st25{clip-path:url(#SVGID_52_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st26{clip-path:url(#SVGID_54_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st27{clip-path:url(#SVGID_56_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st28{clip-path:url(#SVGID_58_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st29{clip-path:url(#SVGID_60_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st30{clip-path:url(#SVGID_62_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st31{clip-path:url(#SVGID_64_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st32{clip-path:url(#SVGID_66_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st33{clip-path:url(#SVGID_68_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st34{clip-path:url(#SVGID_70_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st35{clip-path:url(#SVGID_72_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st36{clip-path:url(#SVGID_74_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st19{clip-path:url(#SVGID_40_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st20{clip-path:url(#SVGID_42_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st21{clip-path:url(#SVGID_44_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st22{clip-path:url(#SVGID_46_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st23{clip-path:url(#SVGID_48_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st24{clip-path:url(#SVGID_50_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st25{clip-path:url(#SVGID_52_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st26{clip-path:url(#SVGID_54_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st27{clip-path:url(#SVGID_56_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st28{clip-path:url(#SVGID_58_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st29{clip-path:url(#SVGID_60_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st30{clip-path:url(#SVGID_62_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st31{clip-path:url(#SVGID_64_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st32{clip-path:url(#SVGID_66_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st33{clip-path:url(#SVGID_68_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st34{clip-path:url(#SVGID_70_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st35{clip-path:url(#SVGID_72_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st36{clip-path:url(#SVGID_74_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
 	.st37{clip-path:url(#SVGID_76_);}
-	.st38{clip-path:url(#SVGID_78_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st39{clip-path:url(#SVGID_80_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st40{clip-path:url(#SVGID_82_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st41{clip-path:url(#SVGID_84_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st42{clip-path:url(#SVGID_86_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st43{clip-path:url(#SVGID_88_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st44{clip-path:url(#SVGID_90_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st45{clip-path:url(#SVGID_92_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st46{clip-path:url(#SVGID_94_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st47{clip-path:url(#SVGID_96_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st48{clip-path:url(#SVGID_98_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st49{clip-path:url(#SVGID_100_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st50{clip-path:url(#SVGID_102_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st51{clip-path:url(#SVGID_104_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st52{clip-path:url(#SVGID_106_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st53{clip-path:url(#SVGID_108_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st54{clip-path:url(#SVGID_110_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st55{clip-path:url(#SVGID_112_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st56{clip-path:url(#SVGID_114_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st57{clip-path:url(#SVGID_116_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st58{clip-path:url(#SVGID_118_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st59{clip-path:url(#SVGID_120_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st60{clip-path:url(#SVGID_122_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st61{clip-path:url(#SVGID_124_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st62{clip-path:url(#SVGID_126_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st63{clip-path:url(#SVGID_128_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st64{clip-path:url(#SVGID_130_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st65{clip-path:url(#SVGID_132_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st66{clip-path:url(#SVGID_134_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st67{clip-path:url(#SVGID_136_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st68{clip-path:url(#SVGID_138_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st69{clip-path:url(#SVGID_140_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st70{clip-path:url(#SVGID_142_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st71{clip-path:url(#SVGID_144_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
-	.st72{clip-path:url(#SVGID_146_);fill:none;stroke:<?php echo $color; ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st38{clip-path:url(#SVGID_78_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st39{clip-path:url(#SVGID_80_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st40{clip-path:url(#SVGID_82_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st41{clip-path:url(#SVGID_84_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st42{clip-path:url(#SVGID_86_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st43{clip-path:url(#SVGID_88_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st44{clip-path:url(#SVGID_90_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st45{clip-path:url(#SVGID_92_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st46{clip-path:url(#SVGID_94_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st47{clip-path:url(#SVGID_96_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st48{clip-path:url(#SVGID_98_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st49{clip-path:url(#SVGID_100_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st50{clip-path:url(#SVGID_102_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st51{clip-path:url(#SVGID_104_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st52{clip-path:url(#SVGID_106_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st53{clip-path:url(#SVGID_108_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st54{clip-path:url(#SVGID_110_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st55{clip-path:url(#SVGID_112_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st56{clip-path:url(#SVGID_114_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st57{clip-path:url(#SVGID_116_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st58{clip-path:url(#SVGID_118_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st59{clip-path:url(#SVGID_120_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st60{clip-path:url(#SVGID_122_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st61{clip-path:url(#SVGID_124_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st62{clip-path:url(#SVGID_126_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st63{clip-path:url(#SVGID_128_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st64{clip-path:url(#SVGID_130_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st65{clip-path:url(#SVGID_132_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st66{clip-path:url(#SVGID_134_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st67{clip-path:url(#SVGID_136_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st68{clip-path:url(#SVGID_138_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st69{clip-path:url(#SVGID_140_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st70{clip-path:url(#SVGID_142_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st71{clip-path:url(#SVGID_144_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
+	.st72{clip-path:url(#SVGID_146_);fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.75;stroke-miterlimit:10;}
 </style>
 <g>
 	<g>
diff --git a/includes/functions.php b/includes/functions.php
index f1b90b9e..a3e53ef6 100755
--- a/includes/functions.php
+++ b/includes/functions.php
@@ -664,6 +664,16 @@ function getColorOpt()
     } else {
         $color = $_COOKIE['color'];
     }
+
+    // Define the regex pattern for valid CSS color formats
+    $colorPattern = "/^(#([a-fA-F0-9]{3}|[a-fA-F0-9]{6})|rgb\((\s*\d+\s*,){2}\s*\d+\s*\)|rgba\((\s*\d+\s*,){3}\s*(0|0\.\d+|1)\)|[a-zA-Z]+)$/i";
+
+    // Validate the color
+    if (!preg_match($colorPattern, $color)) {
+        // Return a default color if validation fails
+        $color = "#2b8080";
+    }
+
     return $color;
 }
 

From 478ba9973f88f391bba2fb5154c50261ecc66311 Mon Sep 17 00:00:00 2001
From: Lukasz Tulikowski <lukasz@softcloud.dev>
Date: Wed, 16 Jul 2025 10:01:13 +0200
Subject: [PATCH 2/3] fix(color): enhance regex pattern for CSS color
 validation in getColorOpt function

---
 includes/functions.php | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/includes/functions.php b/includes/functions.php
index a3e53ef6..9541e307 100755
--- a/includes/functions.php
+++ b/includes/functions.php
@@ -666,7 +666,12 @@ function getColorOpt()
     }
 
     // Define the regex pattern for valid CSS color formats
-    $colorPattern = "/^(#([a-fA-F0-9]{3}|[a-fA-F0-9]{6})|rgb\((\s*\d+\s*,){2}\s*\d+\s*\)|rgba\((\s*\d+\s*,){3}\s*(0|0\.\d+|1)\)|[a-zA-Z]+)$/i";
+    $colorPattern = "/^(" .
+        "#([a-fA-F0-9]{3}|[a-fA-F0-9]{6})" . "|" .           // Hex colors (#RGB or #RRGGBB)
+        "rgb\(\s*(?:\d{1,3}\s*,\s*){2}\d{1,3}\s*\)" . "|" .     // RGB format
+        "rgba\(\s*(?:\d{1,3}\s*,\s*){3}\s*(0|0\.\d+|1)\s*\)" . "|" . // RGBA format
+        "[a-zA-Z]+" .                                         // Named colors
+    ")$/i";
 
     // Validate the color
     if (!preg_match($colorPattern, $color)) {
@@ -1020,4 +1025,3 @@ function callbackTimeout(callable $callback, int $interval)
 
     return $result;
 }
-

From bad782deda45e985b837adc4e5b608be7154ea2b Mon Sep 17 00:00:00 2001
From: Lukasz Tulikowski <lukasz@softcloud.dev>
Date: Wed, 16 Jul 2025 10:04:32 +0200
Subject: [PATCH 3/3] fix(color): sanitize color output in SVG and CSS files to
 prevent XSS vulnerabilities

---
 app/css/custom.php          |  6 +++---
 app/img/devices/default.php |  4 ++--
 app/img/devices/zero.php    |  2 +-
 app/img/raspAP-logo.php     |  8 ++++----
 app/img/solid.php           | 12 ++++++------
 5 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/app/css/custom.php b/app/css/custom.php
index 6f4db818..9113ef39 100644
--- a/app/css/custom.php
+++ b/app/css/custom.php
@@ -14,9 +14,9 @@ License: GNU General Public License v3.0
 @import url('all.css');
 
 :root {
-  --raspap-theme-color: <?php echo $color; ?>;
-  --raspap-theme-lighter: <?php echo lightenColor($color, 20); ?>;
-  --raspap-theme-darker: <?php echo darkenColor($color, 20); ?>;
+  --raspap-theme-color: <?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;
+  --raspap-theme-lighter: <?php echo htmlspecialchars(lightenColor($color, 20), ENT_QUOTES, 'UTF-8'); ?>;
+  --raspap-theme-darker: <?php echo htmlspecialchars(darkenColor($color, 20), ENT_QUOTES, 'UTF-8'); ?>;
 }
 
 body {
diff --git a/app/img/devices/default.php b/app/img/devices/default.php
index 9311b504..71ea0703 100644
--- a/app/img/devices/default.php
+++ b/app/img/devices/default.php
@@ -7,9 +7,9 @@ $color = getColorOpt();
 	 viewBox="0 0 431 321" style="enable-background:new 0 0 431 321;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:none;enable-background:new;}
-	.st1{fill:none;stroke:<?php echo $color; ?>;stroke-width:0.9453;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:13.3333;}
+	.st1{fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.9453;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:13.3333;}
 	
-		.st2{fill:none;stroke:<?php echo $color; ?>;stroke-width:0.9453;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:13.3333;enable-background:new    ;}
+		.st2{fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.9453;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:13.3333;enable-background:new    ;}
 </style>
 <path class="st0" d="M0,0"/>
 <g id="g20028">
diff --git a/app/img/devices/zero.php b/app/img/devices/zero.php
index 68c17007..4e688ad7 100644
--- a/app/img/devices/zero.php
+++ b/app/img/devices/zero.php
@@ -7,7 +7,7 @@ $color = getColorOpt();
 <svg version="1.1" id="Zero_BLANK" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 218.03 144.11" style="enable-background:new 0 0 218.03 144.11;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:none;stroke:<?php echo $color; ?>;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st0{fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
 </style>
 <g id="LINE_1238_">
 	<line class="st0" x1="96.57" y1="105.12" x2="97.06" y2="105.29"/>
diff --git a/app/img/raspAP-logo.php b/app/img/raspAP-logo.php
index c23399ab..c8115634 100755
--- a/app/img/raspAP-logo.php
+++ b/app/img/raspAP-logo.php
@@ -32,20 +32,20 @@ $color = getColorOpt();
            transform="translate(192.6768,123.4365)"
            id="g20"><path
              id="path22"
-             style="fill:<?php echo $color; ?>;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             style="fill:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;fill-opacity:1;fill-rule:nonzero;stroke:none"
              d="m 0,0 c 0,-37.169 -30.128,-67.3 -67.296,-67.3 -37.167,0 -67.294,30.131 -67.294,67.3 0,37.165 30.127,67.296 67.294,67.296 C -30.128,67.296 0,37.165 0,0" /></g><g
            transform="translate(125.3823,219.0791)"
            id="g24"><path
              id="path26"
-             style="fill:<?php echo $color; ?>;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             style="fill:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;fill-opacity:1;fill-rule:nonzero;stroke:none"
              d="m 0,0 c -52.737,0 -95.641,-42.905 -95.641,-95.643 0,-52.74 42.904,-95.647 95.641,-95.647 52.737,0 95.642,42.907 95.642,95.647 C 95.642,-42.905 52.737,0 0,0 m 0,-217.29 c -67.073,0 -121.641,54.571 -121.641,121.647 C -121.641,-28.569 -67.073,26 0,26 67.074,26 121.642,-28.569 121.642,-95.643 121.642,-162.719 67.074,-217.29 0,-217.29" /></g><g
            transform="translate(144.4277,271.9385)"
            id="g28"><path
              id="path30"
-             style="fill:<?php echo $color; ?>;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             style="fill:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;fill-opacity:1;fill-rule:nonzero;stroke:none"
              d="m 0,0 c 66.188,0 121.118,-49.055 130.392,-112.714 l 28.259,-1.874 C 150.044,-34.655 82.181,27.791 0,27.791 c -3.892,0 -7.75,-0.147 -11.571,-0.423 L -9.73,-0.397 C -6.513,-0.161 -3.275,0 0,0" /></g><g
            transform="translate(144.4883,334.7588)"
            id="g32"><path
              id="path34"
-             style="fill:<?php echo $color; ?>;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             style="fill:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;fill-opacity:1;fill-rule:nonzero;stroke:none"
              d="m 0,0 c 101.94,0 185.667,-79.438 192.56,-179.664 l 27.962,-1.857 C 214.513,-65.087 117.899,27.791 0,27.791 c -5.31,0 -10.576,-0.2 -15.792,-0.571 l 1.84,-27.728 C -9.343,-0.177 -4.691,0 0,0" /></g></g></g></g></svg>
diff --git a/app/img/solid.php b/app/img/solid.php
index 9952e7fa..23bd418a 100644
--- a/app/img/solid.php
+++ b/app/img/solid.php
@@ -42,24 +42,24 @@ if ($showJoint) {
     for ($i = 1; $i < count($activeYs); $i++) {
         $y1 = $activeYs[$i-1];
         $y2 = $activeYs[$i];
-        echo "<line x1='112.75' y1='$y1' x2='112.75' y2='$y2' stroke='$color' stroke-width='4'/>";
+        echo "<line x1='112.75' y1='$y1' x2='112.75' y2='$y2' stroke='" . htmlspecialchars($color, ENT_QUOTES, 'UTF-8') . "' stroke-width='4'/>";
     }
 }
 ?>
 
 <?php if ($showDevice1): ?>
-<line x1="113.231" y1="0.75" x2="7.69496e-06" y2="0.75001" stroke="<?php echo $color; ?>" stroke-width="6" id="device-1"/>
+<line x1="113.231" y1="0.75" x2="7.69496e-06" y2="0.75001" stroke="<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>" stroke-width="6" id="device-1"/>
 <?php endif; ?>
 <?php if ($showOut): ?>
-<line x1="226.231" y1="297.75" x2="113" y2="297.75" stroke="<?php echo $color; ?>" stroke-width="4" id="out"/>
+<line x1="226.231" y1="297.75" x2="113" y2="297.75" stroke="<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>" stroke-width="4" id="out"/>
 <?php endif; ?>
 <?php if ($showDevice2): ?>
-<line x1="113.231" y1="198.75" x2="7.69496e-06" y2="198.75" stroke="<?php echo $color; ?>" stroke-width="4" id="device-2"/>
+<line x1="113.231" y1="198.75" x2="7.69496e-06" y2="198.75" stroke="<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>" stroke-width="4" id="device-2"/>
 <?php endif; ?>
 <?php if ($showDevice3): ?>
-<line x1="113.231" y1="397.058" x2="7.69496e-06" y2="397.058" stroke="<?php echo $color; ?>" stroke-width="4" id="device-3"/>
+<line x1="113.231" y1="397.058" x2="7.69496e-06" y2="397.058" stroke="<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>" stroke-width="4" id="device-3"/>
 <?php endif; ?>
 <?php if ($showDevice4): ?>
-<line x1="113.231" y1="595.211" x2="7.69496e-06" y2="595.211" stroke="<?php echo $color; ?>" stroke-width="4" id="device-4"/>
+<line x1="113.231" y1="595.211" x2="7.69496e-06" y2="595.211" stroke="<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>" stroke-width="4" id="device-4"/>
 <?php endif; ?>
 </svg>