Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: DebugBar block by CSP #8411

Merged
merged 6 commits into from
Feb 12, 2024
Merged

fix: DebugBar block by CSP #8411

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
51baeff
update css for show tab debugbar
YapsBridging Jan 12, 2024
e48a4f3
remove inline style debugbar,welcome_message for CSP
YapsBridging Jan 12, 2024
1a53368
fix changes SCSS files did not match the expected CSS output
YapsBridging Jan 12, 2024
1f02846
update style & js
YapsBridging Jan 20, 2024
0732719
update style & js
YapsBridging Jan 21, 2024
c563325
update css toolbar,welcome_message
YapsBridging Feb 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 49 additions & 1 deletion admin/css/debug-toolbar/toolbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -398,6 +398,11 @@
text-align: right;
}
}

// show tab
&>.debug-bar-dblock {
display: block;
}
}


Expand Down Expand Up @@ -467,7 +472,6 @@
@import '_theme-light';
}


// LAYOUT HELPERS
// ========================================================================== */

Expand Down Expand Up @@ -510,3 +514,47 @@
.debug-bar-noverflow {
overflow: hidden;
}

.debug-bar-dtableRow {
display: table-row;
}

.debug-bar-dinlineBlock {
display: inline-block;
}

.debug-bar-pointer {
cursor: pointer;
}

.debug-bar-mleft4 {
margin-left: 4px;
}

.debug-bar-level-0 {
--level: 0;
}

.debug-bar-level-1 {
--level: 1;
}

.debug-bar-level-2 {
--level: 2;
}

.debug-bar-level-3 {
--level: 3;
}

.debug-bar-level-4 {
--level: 4;
}

.debug-bar-level-5 {
--level: 5;
}

.debug-bar-level-6 {
--level: 6;
}
16 changes: 11 additions & 5 deletions app/Views/welcome_message.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,11 @@
.further h2:first-of-type {
padding-top: 0;
}
.svg-stroke {
fill: none;
stroke: #000;
stroke-width: 32px;
}
footer {
background-color: rgba(221, 72, 20, .8);
text-align: center;
Expand Down Expand Up @@ -206,7 +211,7 @@
</a>
</li>
<li class="menu-toggle">
<button onclick="toggleMenu();">&#9776;</button>
<button id="menuToggle">&#9776;</button>
</li>
<li class="menu-item hidden"><a href="#">Home</a></li>
<li class="menu-item hidden"><a href="https://codeigniter4.github.io/userguide/" target="_blank">Docs</a>
Expand Down Expand Up @@ -253,7 +258,7 @@
<h1>Go further</h1>

<h2>
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><rect x='32' y='96' width='64' height='368' rx='16' ry='16' style='fill:none;stroke:#000;stroke-linejoin:round;stroke-width:32px'/><line x1='112' y1='224' x2='240' y2='224' style='fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><line x1='112' y1='400' x2='240' y2='400' style='fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><rect x='112' y='160' width='128' height='304' rx='16' ry='16' style='fill:none;stroke:#000;stroke-linejoin:round;stroke-width:32px'/><rect x='256' y='48' width='96' height='416' rx='16' ry='16' style='fill:none;stroke:#000;stroke-linejoin:round;stroke-width:32px'/><path d='M422.46,96.11l-40.4,4.25c-11.12,1.17-19.18,11.57-17.93,23.1l34.92,321.59c1.26,11.53,11.37,20,22.49,18.84l40.4-4.25c11.12-1.17,19.18-11.57,17.93-23.1L445,115C443.69,103.42,433.58,94.94,422.46,96.11Z' style='fill:none;stroke:#000;stroke-linejoin:round;stroke-width:32px'/></svg>
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><rect x='32' y='96' width='64' height='368' rx='16' ry='16' class="svg-stroke" /><line x1='112' y1='224' x2='240' y2='224' class="svg-stroke" /><line x1='112' y1='400' x2='240' y2='400' class="svg-stroke" /><rect x='112' y='160' width='128' height='304' rx='16' ry='16' class="svg-stroke" /><rect x='256' y='48' width='96' height='416' rx='16' ry='16' class="svg-stroke" /><path d='M422.46,96.11l-40.4,4.25c-11.12,1.17-19.18,11.57-17.93,23.1l34.92,321.59c1.26,11.53,11.37,20,22.49,18.84l40.4-4.25c11.12-1.17,19.18-11.57,17.93-23.1L445,115C443.69,103.42,433.58,94.94,422.46,96.11Z' class="svg-stroke"/></svg>
Learn
</h2>

Expand All @@ -263,7 +268,7 @@
target="_blank">User Guide</a> !</p>

<h2>
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M431,320.6c-1-3.6,1.2-8.6,3.3-12.2a33.68,33.68,0,0,1,2.1-3.1A162,162,0,0,0,464,215c.3-92.2-77.5-167-173.7-167C206.4,48,136.4,105.1,120,180.9a160.7,160.7,0,0,0-3.7,34.2c0,92.3,74.8,169.1,171,169.1,15.3,0,35.9-4.6,47.2-7.7s22.5-7.2,25.4-8.3a26.44,26.44,0,0,1,9.3-1.7,26,26,0,0,1,10.1,2L436,388.6a13.52,13.52,0,0,0,3.9,1,8,8,0,0,0,8-8,12.85,12.85,0,0,0-.5-2.7Z' style='fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><path d='M66.46,232a146.23,146.23,0,0,0,6.39,152.67c2.31,3.49,3.61,6.19,3.21,8s-11.93,61.87-11.93,61.87a8,8,0,0,0,2.71,7.68A8.17,8.17,0,0,0,72,464a7.26,7.26,0,0,0,2.91-.6l56.21-22a15.7,15.7,0,0,1,12,.2c18.94,7.38,39.88,12,60.83,12A159.21,159.21,0,0,0,284,432.11' style='fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/></svg>
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M431,320.6c-1-3.6,1.2-8.6,3.3-12.2a33.68,33.68,0,0,1,2.1-3.1A162,162,0,0,0,464,215c.3-92.2-77.5-167-173.7-167C206.4,48,136.4,105.1,120,180.9a160.7,160.7,0,0,0-3.7,34.2c0,92.3,74.8,169.1,171,169.1,15.3,0,35.9-4.6,47.2-7.7s22.5-7.2,25.4-8.3a26.44,26.44,0,0,1,9.3-1.7,26,26,0,0,1,10.1,2L436,388.6a13.52,13.52,0,0,0,3.9,1,8,8,0,0,0,8-8,12.85,12.85,0,0,0-.5-2.7Z' class="svg-stroke" /><path d='M66.46,232a146.23,146.23,0,0,0,6.39,152.67c2.31,3.49,3.61,6.19,3.21,8s-11.93,61.87-11.93,61.87a8,8,0,0,0,2.71,7.68A8.17,8.17,0,0,0,72,464a7.26,7.26,0,0,0,2.91-.6l56.21-22a15.7,15.7,0,0,1,12,.2c18.94,7.38,39.88,12,60.83,12A159.21,159.21,0,0,0,284,432.11' class="svg-stroke" /></svg>
Discuss
</h2>

Expand All @@ -274,7 +279,7 @@
target="_blank">chat on Slack</a> !</p>

<h2>
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><line x1='176' y1='48' x2='336' y2='48' style='fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='118' y1='304' x2='394' y2='304' style='fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><path d='M208,48v93.48a64.09,64.09,0,0,1-9.88,34.18L73.21,373.49C48.4,412.78,76.63,464,123.08,464H388.92c46.45,0,74.68-51.22,49.87-90.51L313.87,175.66A64.09,64.09,0,0,1,304,141.48V48' style='fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/></svg>
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><line x1='176' y1='48' x2='336' y2='48' class="svg-stroke" /><line x1='118' y1='304' x2='394' y2='304' class="svg-stroke" /><path d='M208,48v93.48a64.09,64.09,0,0,1-9.88,34.18L73.21,373.49C48.4,412.78,76.63,464,123.08,464H388.92c46.45,0,74.68-51.22,49.87-90.51L313.87,175.66A64.09,64.09,0,0,1,304,141.48V48' class="svg-stroke" /></svg>
Contribute
</h2>

Expand Down Expand Up @@ -309,7 +314,8 @@

<!-- SCRIPTS -->

<script>
<script {csp-script-nonce}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<script {csp-script-nonce}>
<script <?= csp_script_nonce() ?>>

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks @kenjis , but why dont use {csp-script-nonce} ?
like line 12 welcome_message.php, use {csp-style-nonce}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, you are correct. The line 12 uses <style {csp-style-nonce}>.
So using it here is okay.

I personally think we don't need to use {csp-style-nonce} if we can use the csp_script_nonce() function. It is a CI4 global function and we can always use it in PHP scripts.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think so too..
if csp is enable ,it must following change the placeholder tagNonce , cause If not change and if an attacker injects a string like <script {csp-script-nonce}> it might become the real nonce attribute with functionality.
https://www.codeigniter.com/user_guide/outgoing/csp.html

so the best we can use csp_script_nonce()

document.getElementById("menuToggle").addEventListener('click', toggleMenu);
function toggleMenu() {
var menuItems = document.getElementsByClassName('menu-item');
for (var i = 0; i < menuItems.length; i++) {
Expand Down
8 changes: 4 additions & 4 deletions system/Debug/Toolbar.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,12 +197,12 @@ protected function renderTimelineRecursive(array $rows, float $startTime, int $s
$open = $row['name'] === 'Controller';

if ($hasChildren || $isQuery) {
$output .= '<tr class="timeline-parent' . ($open ? ' timeline-parent-open' : '') . '" id="timeline-' . $styleCount . '_parent" onclick="ciDebugBar.toggleChildRows(\'timeline-' . $styleCount . '\');">';
$output .= '<tr class="timeline-parent' . ($open ? ' timeline-parent-open' : '') . '" id="timeline-' . $styleCount . '_parent" data-toggle="childrows" data-child="timeline-' . $styleCount . '">';
} else {
$output .= '<tr>';
}

$output .= '<td class="' . ($isChild ? 'debug-bar-width30' : '') . '" style="--level: ' . $level . ';">' . ($hasChildren || $isQuery ? '<nav></nav>' : '') . $row['name'] . '</td>';
$output .= '<td class="' . ($isChild ? 'debug-bar-width30' : '') . ' debug-bar-level-' . $level . '" >' . ($hasChildren || $isQuery ? '<nav></nav>' : '') . $row['name'] . '</td>';
$output .= '<td class="' . ($isChild ? 'debug-bar-width10' : '') . '">' . $row['component'] . '</td>';
$output .= '<td class="' . ($isChild ? 'debug-bar-width10 ' : '') . 'debug-bar-alignRight">' . number_format($row['duration'] * 1000, 2) . ' ms</td>';
$output .= "<td class='debug-bar-noverflow' colspan='{$segmentCount}'>";
Expand All @@ -220,15 +220,15 @@ protected function renderTimelineRecursive(array $rows, float $startTime, int $s

// Add children if any
if ($hasChildren || $isQuery) {
$output .= '<tr class="child-row" id="timeline-' . ($styleCount - 1) . '_children" style="' . ($open ? '' : 'display: none;') . '">';
$output .= '<tr class="child-row ' . ($open ? '' : ' debug-bar-ndisplay') . '" id="timeline-' . ($styleCount - 1) . '_children" >';
$output .= '<td colspan="' . ($segmentCount + 3) . '" class="child-container">';
$output .= '<table class="timeline">';
$output .= '<tbody>';

if ($isQuery) {
// Output query string if query
$output .= '<tr>';
$output .= '<td class="query-container" style="--level: ' . ($level + 1) . ';">' . $row['query'] . '</td>';
$output .= '<td class="query-container debug-bar-level-' . ($level + 1) . '" >' . $row['query'] . '</td>';
$output .= '</tr>';
} else {
// Recursively render children
Expand Down
4 changes: 2 additions & 2 deletions system/Debug/Toolbar/Views/_database.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@
<tr class="{class}" title="{hover}" data-toggle="{qid}-trace">
<td class="narrow">{duration}</td>
<td>{! sql !}</td>
<td style="text-align: right"><strong>{trace-file}</strong></td>
<td class="debug-bar-alignRight"><strong>{trace-file}</strong></td>
</tr>
<tr class="muted" id="{qid}-trace" style="display:none">
<tr class="muted debug-bar-ndisplay" id="{qid}-trace">
<td></td>
<td colspan="2">
{trace}
Expand Down
47 changes: 47 additions & 0 deletions system/Debug/Toolbar/Views/toolbar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -288,6 +288,9 @@
padding-left: 1em;
text-align: right;
}
#debug-bar > .debug-bar-dblock {
display: block;
}

.debug-view.show-view {
border: 1px solid;
Expand Down Expand Up @@ -804,3 +807,47 @@
.debug-bar-noverflow {
overflow: hidden;
}

.debug-bar-dtableRow {
display: table-row;
}

.debug-bar-dinlineBlock {
display: inline-block;
}

.debug-bar-pointer {
cursor: pointer;
}

.debug-bar-mleft4 {
margin-left: 4px;
}

.debug-bar-level-0 {
--level: 0;
}

.debug-bar-level-1 {
--level: 1;
}

.debug-bar-level-2 {
--level: 2;
}

.debug-bar-level-3 {
--level: 3;
}

.debug-bar-level-4 {
--level: 4;
}

.debug-bar-level-5 {
--level: 5;
}

.debug-bar-level-6 {
--level: 6;
}
Loading
Loading