Merge pull request #202 from Icinga/csp

Use `Style` element to create dynamic inline styles
Icinga · Sep 1, 2023 · 7cf61f5 · 7cf61f5
2 parents 804a6d8 + 894d288
commit 7cf61f5
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 17 deletions.
diff --git a/library/X509/ExpirationWidget.php b/library/X509/ExpirationWidget.php
@@ -5,14 +5,18 @@
 namespace Icinga\Module\X509;
 
 use Icinga\Date\DateFormatter;
+use Icinga\Util\Csp;
 use ipl\Html\BaseHtmlElement;
 use ipl\Html\Html;
 use ipl\Html\HtmlString;
+use ipl\Web\Style;
 
 class ExpirationWidget extends BaseHtmlElement
 {
     protected $tag = 'div';
 
+    protected $defaultAttributes = ['class' => 'expiration-widget'];
+
     protected $from;
 
     protected $to;
@@ -66,21 +70,13 @@ protected function assemble()
             $state = 'state-ok';
         }
 
-        $this->add([
-            Html::tag(
-                'span',
-                ['class' => '', 'style' => 'font-size: 0.9em;', 'title' => $dateTip],
-                $message
-            ),
-            Html::tag(
-                'div',
-                ['class' => 'progress-bar dont-print'],
-                Html::tag(
-                    'div',
-                    ['style' => sprintf('width: %.2F%%;', $ratio), 'class' => "bg-stateful {$state}"],
-                    new HtmlString('&nbsp;')
-                )
-            )
-        ]);
+        $progressBar = Html::tag('div', ['class' => "bg-stateful $state"], new HtmlString('&nbsp;'));
+        $progressBarStyle = (new Style())
+            ->setModule('x509')
+            ->setNonce(Csp::getStyleNonce())
+            ->addFor($progressBar, ['width' => $ratio]);
+
+        $this->addHtml(Html::tag('span', ['class' => 'progress-bar-label', 'title' => $dateTip], $message));
+        $this->addHtml($progressBarStyle, Html::tag('div', ['class' => 'progress-bar dont-print'], $progressBar));
     }
 }
diff --git a/public/css/module.less b/public/css/module.less
@@ -35,7 +35,7 @@
   }
 }
 
-.progress-bar {
+.expiration-col .progress-bar {
   background-color: @gray-lighter;
   border-radius: 2px;
   box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
@@ -54,6 +54,10 @@
 
 .expiration-col {
   width: 18em;
+
+  span.progress-bar-label {
+    font-size: 0.9em;
+  }
 }
 
 .icon-col > i {