Fix debugbar loading while csp is enabled

application/Filters/DebugToolbar.php

@@ -71,9 +71,11 @@ public function after(RequestInterface $request, ResponseInterface $response)
 			}
 
 			$script = PHP_EOL
-				. '<script type="text/javascript" id="debugbar_loader" '
+				. '<script type="text/javascript" {csp-script-nonce} id="debugbar_loader" '
 				. 'data-time="' . $time . '" '
 				. 'src="' . rtrim(site_url(), '/') . '?debugbar"></script>'
+				. '<script type="text/javascript" {csp-script-nonce} id="debugbar_dynamic_script"></script>'
+				. '<style type="text/css" {csp-style-nonce} id="debugbar_dynamic_style"></style>'
 				. PHP_EOL;
 
 			if (strpos($response->getBody(), '</body>') !== false)

system/Debug/Toolbar.php

@@ -196,6 +196,11 @@ public function run($startTime, $totalTime, $request, $response): string
 
 		$data['config'] = \CodeIgniter\Debug\Toolbar\Collectors\Config::display();
 
+		if( $response->CSP !== null )
+		{
+			$response->CSP->addImageSrc( 'data:' );
+		}
+
 		return json_encode($data);
 	}
 
@@ -273,6 +278,7 @@ protected static function format(string $data, string $format = 'html')
 		switch ($format)
 		{
 			case 'html':
+				$data['styles'] = [];
 				extract($data);
 				$parser = Services::parser(BASEPATH . 'Debug/Toolbar/Views/', null,false);
 				ob_start();
@@ -283,8 +289,6 @@ protected static function format(string $data, string $format = 'html')
 			case 'json':
 				$output = json_encode($data);
 				break;
-			case 'json':
-				$output = json_encode($data);
 			case 'xml':
 				$formatter = new XMLFormatter;
 				$output    = $formatter->format($data);
@@ -306,27 +310,31 @@ protected static function format(string $data, string $format = 'html')
 	 *
 	 * @return string
 	 */
-	protected static function renderTimeline(array $collectors, $startTime, int $segmentCount, int $segmentDuration): string
+	protected static function renderTimeline(array $collectors, $startTime, int $segmentCount, int $segmentDuration, array& $styles ): string
 	{
 		$displayTime = $segmentCount*$segmentDuration;
 		$rows        = self::collectTimelineData($collectors);
 		$output      = '';
+		$styleCount	 = 0;
 
 		foreach ($rows as $row)
 		{
 			$output .= "<tr>";
 			$output .= "<td>{$row['name']}</td>";
 			$output .= "<td>{$row['component']}</td>";
-			$output .= "<td style='text-align: right'>".number_format($row['duration']*1000, 2)." ms</td>";
-			$output .= "<td colspan='{$segmentCount}' style='overflow: hidden'>";
+			$output .= "<td class='debug-bar-alignRight'>".number_format($row['duration']*1000, 2)." ms</td>";
+			$output .= "<td class='debug-bar-noverflow' colspan='{$segmentCount}'>";
 
 			$offset = ((($row['start']-$startTime)*1000)/$displayTime)*100;
 			$length = (($row['duration']*1000)/$displayTime)*100;
 
-			$output .= "<span class='timer' style='left: {$offset}%; width: {$length}%;' title='".number_format($length,
+			$styles['debug-bar-timeline-'.$styleCount] = "left: {$offset}%; width: {$length}%;";
+			$output .= "<span class='timer debug-bar-timeline-{$styleCount}' title='".number_format($length,
 					2)."%'></span>";
 			$output .= "</td>";
 			$output .= "</tr>";
+
+			$styleCount++;
 		}
 
 		return $output;

system/Debug/Toolbar/Views/_config.tpl.php

@@ -1,4 +1,4 @@
-<p style="text-align: right">
+<p class="debug-bar-alignRight">
 	<a href="https://bcit-ci.github.io/CodeIgniter4/index.html" target="_blank" >Read the CodeIgniter docs...</a>
 </p>
 

system/Debug/Toolbar/Views/_database.tpl.php

@@ -1,7 +1,7 @@
 <table>
     <thead>
         <tr>
-            <th style="width: 6rem;">Time</th>
+            <th class="debug-bar-width6r">Time</th>
             <th>Query String</th>
         </tr>
     </thead>

system/Debug/Toolbar/Views/_events.tpl.php

@@ -1,7 +1,7 @@
 <table>
     <thead>
         <tr>
-            <th style="width: 6rem;">Time</th>
+            <th class="debug-bar-width6r">Time</th>
             <th>Event Name</th>
             <th>Times Called</th>
         </tr>

system/Debug/Toolbar/Views/_files.tpl.php

@@ -8,7 +8,7 @@
     {/userFiles}
     {coreFiles}
         <tr class="muted">
-            <td style="width: 20em;">{name}</td>
+            <td class="debug-bar-width20e">{name}</td>
             <td>{path}</td>
         </tr>
     {/coreFiles}

system/Debug/Toolbar/Views/_history.tpl.php

@@ -13,10 +13,10 @@
     <tbody>
     {files}
         <tr data-active="{active}">
-        	<td style="width: 70px">
+        	<td class="debug-bar-width70p">
             	<button class="ci-history-load" data-time="{time}">Load</button>
             </td>
-            <td style="width: 140px">{datetime}</td>
+            <td class="debug-bar-width140p">{datetime}</td>
             <td>{status}</td>
             <td>{method}</td>
             <td>{url}</td>

system/Debug/Toolbar/Views/toolbar.css

@@ -356,3 +356,46 @@
 		display: none !important;
 	}
 }
+
+/**
+simple styles to replace inline styles
+ */
+.debug-bar-width30 {
+	width: 30%;
+}
+
+.debug-bar-width10 {
+	width: 10%;
+}
+
+.debug-bar-width70p {
+	width: 70px;
+}
+
+.debug-bar-width140p {
+	width: 140px;
+}
+
+.debug-bar-width20e {
+	width: 20em;
+}
+
+.debug-bar-width6r {
+	width: 6rem;
+}
+
+.debug-bar-ndisplay {
+	display: none;
+}
+
+.debug-bar-alignRight {
+	text-align: right;
+}
+
+.debug-bar-alignLeft {
+	text-align: left;
+}
+
+.debug-bar-noverflow {
+	overflow: hidden;
+}

system/Debug/Toolbar/Views/toolbar.tpl.php

@@ -5,7 +5,7 @@
 <script id="toolbar_js" type="text/javascript">
 	<?= file_get_contents(__DIR__.'/toolbar.js') ?>
 </script>
-<div id="debug-icon" style="display:none">
+<div id="debug-icon" class="debug-bar-ndisplay">
 	<a id="debug-icon-link" href="javascript:void(0)">
 		<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 			width="155.000000px" height="200.000000px" viewBox="0 0 155.000000 200.000000"
@@ -93,16 +93,16 @@
 		<table class="timeline">
 			<thead>
 				<tr>
-					<th style="width: 30%">NAME</th>
-					<th style="width: 10%">COMPONENT</th>
-					<th style="width: 10%;">DURATION</th>
+					<th class="debug-bar-width30">NAME</th>
+					<th class="debug-bar-width10">COMPONENT</th>
+					<th class="debug-bar-width10">DURATION</th>
 					<?php for ($i = 0; $i < $segmentCount; $i++) : ?>
 						<th><?= $i * $segmentDuration ?> ms</th>
 					<?php endfor ?>
 				</tr>
 			</thead>
 			<tbody>
-				<?= self::renderTimeline($collectors, $startTime, $segmentCount, $segmentDuration) ?>
+				<?= self::renderTimeline($collectors, $startTime, $segmentCount, $segmentDuration, $styles) ?>
 			</tbody>
 		</table>
 	</div>
@@ -270,5 +270,11 @@
 
 		<?= $parser->setData($config)->render('_config.tpl') ?>
 	</div>
-
 </div>
+<style type="text/css">
+	<?php foreach( $styles as $name => $style ) : ?>
+	.<?= $name ?> {
+	<?= $style ?>
+	}
+	<?php endforeach ?>
+</style>

system/Debug/Toolbar/toolbarloader.js.php

@@ -18,12 +18,36 @@ function loadDoc(time) {
 			if (!toolbar) {
 				toolbar = document.createElement('div');
 				toolbar.setAttribute('id', 'toolbarContainer');
-				toolbar.innerHTML = this.responseText;
 				document.body.appendChild(toolbar);
-			} else {
-				toolbar.innerHTML = this.responseText;
 			}
-			eval(document.getElementById("toolbar_js").innerHTML);
+
+			// copy for easier manipulation
+			let responseText = this.responseText;
+
+			// get csp blocked parts
+			// the style block is the first and starts at 0
+			{
+				let PosBeg = responseText.indexOf( '>', responseText.indexOf( '<style' ) ) + 1;
+				let PosEnd = responseText.indexOf( '</style>', PosBeg );
+				document.getElementById( 'debugbar_dynamic_style' ).innerHTML = responseText.substr( PosBeg, PosEnd )
+				responseText = responseText.substr( PosEnd + 8 );
+			}
+			// the script block starts right after style blocks ended
+			{
+				let PosBeg = responseText.indexOf( '>', responseText.indexOf( '<script' ) ) + 1;
+				let PosEnd = responseText.indexOf( '</script>' );
+				document.getElementById( 'debugbar_dynamic_script' ).innerHTML = responseText.substr( PosBeg, PosEnd - PosBeg );
+				responseText = responseText.substr( PosEnd + 9 );
+			}
+			// check for last style block
+			{
+				let PosBeg = responseText.indexOf( '>', responseText.lastIndexOf( '<style' ) ) + 1;
+				let PosEnd = responseText.indexOf( '</style>', PosBeg );
+				document.getElementById( 'debugbar_dynamic_style' ).innerHTML += responseText.substr( PosBeg, PosEnd - PosBeg );
+				responseText = responseText.substr( 0, PosBeg );
+			}
+
+			toolbar.innerHTML = responseText;
 			if (typeof ciDebugBar === 'object') {
 				ciDebugBar.init();
 			}