Apply csp to inline css style (#807)

## Blocked by
- https://github.com/Icinga/ipl-web/pull/167
- https://github.com/Icinga/icingaweb2/pull/5059

application/controllers/CommandTransportController.php

@@ -102,7 +102,6 @@ class CommandTransportController extends ConfigController
         $transportName = $this->params->getRequired('name');
 
         $form = new ConfirmRemovalForm();
-        $form->setAttrib('style', 'text-align:center;');
         $form->setOnSuccess(function () use ($transportName) {
             (new CommandTransportConfig())->delete(
                 'transport',

library/Icingadb/Widget/Detail/CheckStatistics.php

@@ -15,7 +15,7 @@ use ipl\Html\HtmlString;
 use ipl\Html\Text;
 use ipl\Web\Common\Card;
 use ipl\Web\Widget\EmptyState;
-use ipl\Web\Widget\StateBall;
+use ipl\Web\Compat\StyleWithNonce;
 use ipl\Web\Widget\TimeAgo;
 use ipl\Web\Widget\TimeSince;
 use ipl\Web\Widget\TimeUntil;
@@ -39,7 +39,6 @@ SVG;
 </svg>
 SVG;
 
-
     protected $object;
 
     protected $tag = 'div';
@@ -53,6 +52,9 @@ SVG;
 
     protected function assembleBody(BaseHtmlElement $body)
     {
+        $styleElement = (new StyleWithNonce())
+            ->setModule('icingadb');
+
         $hPadding = 10;
         $durationScale = 80;
         $checkInterval = $this->getCheckInterval();
@@ -129,7 +131,7 @@ SVG;
             }
         }
 
-        $progressBar->getAttributes()->add('style', sprintf('width: %s%%', $leftNow));
+        $styleElement->addFor($progressBar, ['width' => sprintf('%F%%', $leftNow)]);
 
         $leftExecutionEnd = $nextCheckTime !== null ? $durationScale * (
             1 - ($nextCheckTime - $executionEndTime) / ($nextCheckTime - $lastUpdateTime)
@@ -143,10 +145,10 @@ SVG;
             'class' => ['highlighted', 'marker', 'right'],
             'title' => $nextCheckTime !== null ? DateFormatter::formatDateTime($nextCheckTime) : null
         ]));
-        $markerExecutionEnd = new HtmlElement('div', Attributes::create([
-            'class' => ['highlighted', 'marker'],
-            'style' => sprintf('left: %F%%', $hPadding + $leftExecutionEnd),
-        ]));
+        $markerExecutionEnd = new HtmlElement('div', Attributes::create(['class' => ['highlighted', 'marker']]));
+        $styleElement->addFor($markerExecutionEnd, [
+            'left' => sprintf('%F%%', $hPadding + $leftExecutionEnd)
+        ]);
 
         $progress = new HtmlElement('div', Attributes::create([
             'class' => ['progress', time() < $executionEndTime ? 'running' : null]
@@ -183,10 +185,7 @@ SVG;
         );
         $executionEnd = new HtmlElement(
             'li',
-            Attributes::create([
-                'class' => 'positioned',
-                'style' => sprintf('left: %F%%', $hPadding + $leftExecutionEnd)
-            ]),
+            Attributes::create(['class' => 'positioned']),
             new HtmlElement(
                 'div',
                 Attributes::create(['class' => ['bubble', 'upwards', 'top-left-aligned']]),
@@ -202,16 +201,11 @@ SVG;
             )
         );
 
+        $styleElement->addFor($executionEnd, ['left' => sprintf('%F%%', $hPadding + $leftExecutionEnd)]);
+
         $intervalLine = new HtmlElement(
             'li',
-            Attributes::create([
-                'class' => 'interval-line',
-                'style' => sprintf(
-                    'left: %F%%; width: %F%%;',
-                    $hPadding + $leftExecutionEnd,
-                    $durationScale - $leftExecutionEnd
-                )
-            ]),
+            Attributes::create(['class' => 'interval-line']),
             new VerticalKeyValue(
                 t('Interval'),
                 $checkInterval
@@ -219,12 +213,15 @@ SVG;
                     : (new EmptyState(t('n. a.')))->setTag('span')
             )
         );
+
+        $styleElement->addFor($intervalLine, [
+            'left'  => sprintf('%F%%', $hPadding + $leftExecutionEnd),
+            'width' => sprintf('%F%%', $durationScale - $leftExecutionEnd)
+        ]);
+
         $executionLine = new HtmlElement(
             'li',
-            Attributes::create([
-                'class' => ['interval-line', 'execution-line'],
-                'style' => sprintf('left: %F%%; width: %F%%;', $hPadding, $leftExecutionEnd)
-            ]),
+            Attributes::create(['class' => ['interval-line', 'execution-line']]),
             new VerticalKeyValue(
                 sprintf('%s / %s', t('Execution Time'), t('Latency')),
                 FormattedString::create(
@@ -238,6 +235,12 @@ SVG;
                 )
             )
         );
+
+        $styleElement->addFor($executionLine, [
+            'left'  => sprintf('%F%%', $hPadding),
+            'width' => sprintf('%F%%', $leftExecutionEnd)
+        ]);
+
         if ($executionEndTime !== null) {
             $executionLine->addHtml(new HtmlElement('div', Attributes::create(['class' => 'start'])));
             $executionLine->addHtml(new HtmlElement('div', Attributes::create(['class' => 'end'])));
@@ -282,7 +285,7 @@ SVG;
             $nextCheck
         );
 
-        $body->addHtml($above, $timeline, $below);
+        $body->addHtml($above, $timeline, $below, $styleElement);
     }
 
     /**

library/Icingadb/Widget/Detail/DowntimeCard.php

@@ -7,6 +7,7 @@ namespace Icinga\Module\Icingadb\Widget\Detail;
 use Icinga\Module\Icingadb\Model\Downtime;
 use ipl\Html\Attributes;
 use ipl\Html\HtmlElement;
+use ipl\Web\Compat\StyleWithNonce;
 use ipl\Web\Widget\TimeAgo;
 use ipl\Web\Widget\TimeUntil;
 use ipl\Web\Widget\VerticalKeyValue;
@@ -43,6 +44,9 @@ class DowntimeCard extends BaseHtmlElement
 
     protected function assemble()
     {
+        $styleElement = (new StyleWithNonce())
+            ->setModule('icingadb');
+
         $timeline = Html::tag('div', ['class' => 'downtime-timeline timeline']);
         $hPadding = 10;
 
@@ -87,18 +91,12 @@ class DowntimeCard extends BaseHtmlElement
                 $evade = true;
             }
 
-            $markerFlexStart = new HtmlElement('div', Attributes::create([
-                'class' => ['highlighted', 'marker'],
-                'style' => sprintf('left: %F%%', $flexStartLeft)
-            ]));
+            $markerFlexStart = new HtmlElement('div', Attributes::create(['class' => ['highlighted', 'marker']]));
+            $markerFlexEnd = new HtmlElement('div', Attributes::create(['class' => ['highlighted', 'marker']]));
 
-            $markerFlexEnd = new HtmlElement('div', Attributes::create([
-                'class' => ['highlighted', 'marker'],
-                'style' => sprintf('left: %F%%', $flexEndLeft)
-            ]));
-
-            $markerStart->getAttributes()->remove('class', 'highlighted');
-            $markerEnd->getAttributes()->remove('class', 'highlighted');
+            $styleElement
+                ->addFor($markerFlexStart, ['left' => sprintf('%F%%', $flexStartLeft)])
+                ->addFor($markerFlexEnd, ['left' => sprintf('%F%%', $flexEndLeft)]);
 
             $scheduledEndBubble = new HtmlElement(
                 'li',
@@ -114,19 +112,26 @@ class DowntimeCard extends BaseHtmlElement
                 'class' => ['progress', 'downtime-elapsed'],
                 'data-animate-progress' => true,
                 'data-start-time' => ((float) $this->downtime->start_time->format('U.u')),
-                'data-end-time' => ((float) $this->downtime->end_time->format('U.u')),
-                'style' => sprintf('left: %F%%; width: %F%%;', $flexStartLeft, $flexEndLeft - $flexStartLeft)
+                'data-end-time' => ((float) $this->downtime->end_time->format('U.u'))
             ]), new HtmlElement(
                 'div',
                 Attributes::create(['class' => 'bar']),
                 new HtmlElement('div', Attributes::create(['class' => 'now']))
             ));
 
+            $styleElement->addFor($timelineProgress, [
+                'left'  => sprintf('%F%%', $flexStartLeft),
+                'width' => sprintf('%F%%', $flexEndLeft - $flexStartLeft)
+            ]);
+
             if (time() > $this->end) {
-                $markerEnd->getAttributes()
-                    ->set('style', sprintf('left: %F%%', $hPadding + $this->calcRelativeLeft($this->end)));
-                $scheduledEndBubble->getAttributes()
-                    ->set('style', sprintf('left: %F%%', $hPadding + $this->calcRelativeLeft($this->end)));
+                $styleElement
+                    ->addFor($markerEnd, [
+                        'left' => sprintf('%F%%', $hPadding + $this->calcRelativeLeft($this->end))
+                    ])
+                    ->addFor($scheduledEndBubble, [
+                        'left' => sprintf('%F%%', $hPadding + $this->calcRelativeLeft($this->end))
+                    ]);
             } else {
                 $scheduledEndBubble->getAttributes()
                     ->add('class', 'right');
@@ -145,32 +150,23 @@ class DowntimeCard extends BaseHtmlElement
                 $scheduledEndBubble
             ]);
 
-            $above->add([
-                Html::tag(
-                    'li',
-                    [
-                        'class' => 'positioned',
-                        'style' => sprintf('left: %F%%', $flexStartLeft)
-                    ],
-                    Html::tag(
-                        'div',
-                        ['class' => ['bubble', ($evade ? 'left-aligned' : null)]],
-                        new VerticalKeyValue(t('Start'), new TimeAgo($this->downtime->start_time->getTimestamp()))
-                    )
-                ),
-                Html::tag(
-                    'li',
-                    [
-                        'class' => 'positioned',
-                        'style' => sprintf('left: %F%%', $flexEndLeft)
-                    ],
-                    Html::tag(
-                        'div',
-                        ['class' => ['bubble', ($evade ? 'right-aligned' : null)]],
-                        new VerticalKeyValue(t('End'), new TimeUntil($this->downtime->end_time->getTimestamp()))
-                    )
-                )
-            ]);
+            $aboveStart = Html::tag('li', ['class' => 'positioned'], Html::tag(
+                'div',
+                ['class' => ['bubble', ($evade ? 'left-aligned' : null)]],
+                new VerticalKeyValue(t('Start'), new TimeAgo($this->downtime->start_time->getTimestamp()))
+            ));
+
+            $aboveEnd = Html::tag('li', ['class' => 'positioned'], Html::tag(
+                'div',
+                ['class' => ['bubble', ($evade ? 'right-aligned' : null)]],
+                new VerticalKeyValue(t('End'), new TimeUntil($this->downtime->end_time->getTimestamp()))
+            ));
+
+            $styleElement
+                ->addFor($aboveStart, ['left' => sprintf('%F%%', $flexStartLeft)])
+                ->addFor($aboveEnd, ['left' => sprintf('%F%%', $flexEndLeft)]);
+
+            $above->add([$aboveStart, $aboveEnd, $styleElement]);
         } elseif ($this->downtime->is_flexible) {
             $this->addAttributes(['class' => 'flexible']);
 

public/css/common.less

@@ -403,3 +403,7 @@ div.show-more {
     }
   }
 }
+
+form[name="form_confirm_removal"] {
+  text-align: center;
+}