Refactor and enforce Content-Security-Policy

app.php

@@ -71,7 +71,7 @@ if (!is_empty($_GET['page'])) {
                                 }
                                 ?>
                                 <a class="navbar-brand" href="app.php">
-                                    <img style="height: 35px; padding-bottom: 12px; padding-left: 5px;" src="<?php echo $src; ?>" />
+                                    <img src="<?php echo $src; ?>" />
                                 </a>
                                 <?php
                             }
@@ -121,7 +121,7 @@ if (!is_empty($_GET['page'])) {
             <?php
             if (MENU_BAR_STYLE == "fixed") {
                 ?>
-                <div style="height: 75px;"></div>
+                <div class="pad-75px"></div>
                 <?php
             }
             ?>

lib/getshifttable.php

@@ -137,7 +137,7 @@ for ($i = 0; $i < count($shifts); $i++) {
                 break;
         }
     }
-    $shifts[$i][5] = "<span style=\"word-wrap: break-word;\">" . implode(", ", $days) . "</span>";
+    $shifts[$i][5] = "<span class=\"wrap-break-word\">" . implode(", ", $days) . "</span>";
 }
 
 $out['status'] = "OK";

mobile/index.php

@@ -90,6 +90,7 @@ switch ($VARS['action']) {
                 if (authenticate_user($VARS['username'], $VARS['password'], $autherror)) {
                     if (account_has_permission($VARS['username'], "QWIKCLOCK")) {
                         doLoginUser($VARS['username'], $VARS['password']);
+                        $_SESSION['mobile'] = true;
                         exit(json_encode(["status" => "OK"]));
                     } else {
                         exit(json_encode(["status" => "ERROR", "msg" => lang("no permission", false)]));

pages/assignshift.php

@@ -65,7 +65,7 @@ if ($VARS['shift'] && $database->has('shifts', ['shiftid' => $VARS['shift']])) {
                             foreach ($assigned as $user) {
                                 ?>
                                 <div class="list-group-item" data-user="<?php echo $user; ?>">
-                                    <?php echo $user; ?> <div onclick="removePerson('<?php echo $user; ?>')" class="btn btn-danger btn-sm pull-right"><i class="fa fa-trash-o"></i></div><input type="hidden" name="users[]" value="<?php echo $user; ?>" />
+                                    <?php echo $user; ?> <div class="btn btn-danger btn-sm pull-right rmperson"><i class="fa fa-trash-o"></i></div><input type="hidden" name="users[]" value="<?php echo $user; ?>" />
                                 </div>
                                 <?php
                             }

pages/editshift.php

@@ -61,9 +61,9 @@ if (isset($VARS['id']) && $database->has('shifts', ['shiftid' => $VARS['id']]))
                 <div class="col-xs-12 col-md-6">
                     <div class="form-group">
                         <label for="days"><i class="fa fa-calendar"></i> <?php lang("days"); ?></label>
-                        <div style="padding-top: 8px;">
+                        <div id="days-list-container">
-                            <div style="display: flex; flex-wrap: wrap; justify-content: space-between;">
+                            <div id="days-list">
-                                <div class="checkbox" style="margin-top: -6px;">
+                                <div class="checkbox">
                                     <label>
                                         <input type="checkbox" name="days[]" value="Su" <?php if (strpos($data['days'], "Su") !== FALSE) echo "checked"; ?>> <?php lang('sunday'); ?>
                                     </label>

pages/home.php

@@ -7,12 +7,17 @@ redirectifnotloggedin();
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-md-offset-2">
         <div class="panel panel-default">
-            <div class="panel-body" style="text-align: center;">
+            <div class="panel-body text-center">
                 <h2 id="server_time"><?php echo date(TIME_FORMAT); ?></h2>
                 <h4 id="server_date"><?php echo date(LONG_DATE_FORMAT); ?></h4>
             </div>
-            <div id="seconds_bar" style="width: 100%; height: 5px; padding-bottom: 5px;">
+            <div id="seconds_bar">
-                <div style="background-color: #ffc107; height: 5px; width: <?php echo round(date('s') * 1 / 60 * 100, 4); ?>%;"></div>
+                <style nonce="<?php echo $SECURE_NONCE; ?>">
+                    #seconds_bar_line {
+                        width: <?php echo round(date('s') * 1 / 60 * 100, 4); ?>%;
+                    }
+                </style>
+                <div id="seconds_bar_line"></div>
             </div>
         </div>
     </div>
@@ -34,9 +39,22 @@ redirectifnotloggedin();
                 <?php
                 $in = $database->has('punches', ['AND' => ['uid' => $_SESSION['uid'], 'out' => null]]) === TRUE;
                 ?>
-                <i class="fa fa-info-circle"></i> <span id="inmsg"<?php echo ($in ? '' : ' style="display: none;"') ?>><?php lang("you are punched in"); ?></span><span id="outmsg"<?php echo ($in ? ' style="display: none;"' : '') ?>><?php lang("you are not punched in"); ?></span>
+                <i class="fa fa-info-circle"></i> 
+                <span id="inmsg"><?php lang("you are punched in"); ?></span>
+                <span id="outmsg"><?php lang("you are not punched in"); ?></span>
+                <style nonce="<?php echo $SECURE_NONCE; ?>">
+                    <?php if ($in) { ?>
+                    #outmsg {
+                        display: none;
+                    }
+                    <?php } else { ?>
+                    #inmsg {
+                        display: none;
+                    }
+                    <?php } ?>
+                </style>
                 <br />
-                <a href="app.php?page=punches#punches" style="color: #01579b;"><i class="fa fa-arrow-right"></i> <?php lang("view punch card"); ?></a>
+                <a class="dark-text" href="app.php?page=punches#punches" ><i class="fa fa-arrow-right"></i> <?php lang("view punch card"); ?></a>
             </div>
         </div>
     </div>

pages/punches.php

@@ -42,7 +42,7 @@ $totalpunches = count($punches);
     </div>
 </div>
 
-<a id="punches" style="height: 0px; width: 0px;">&nbsp;</a>
+<a id="punches">&nbsp;</a>
 
 <p class="page-header h5"><i class="fa fa-clock-o fa-fw"></i> <?php lang("punch card") ?></p>
 <table id="punchtable" class="table table-bordered table-striped">
@@ -68,7 +68,7 @@ $totalpunches = count($punches);
     </tfoot>
 </table>
 
-<script>
+<script nonce="<?php echo $SECURE_NONCE; ?>">
     /* Give JavaScript access to the lang string
      * it needs to inject the show deleted checkbox
      */

pages/shifts.php

@@ -19,7 +19,7 @@ $totalpunches = count($punches);
 <?php
 if (account_has_permission($_SESSION['username'], "QWIKCLOCK_MANAGE")) {
     ?>
-    <div class="btn-group" style="margin-bottom: 10px;">
+    <div class="btn-group mgn-btm-10px">
         <a href="app.php?page=editshift" class="btn btn-success"><i class="fa fa-calendar-plus-o"></i> <?php lang("new shift"); ?></a>
         <a href="app.php?page=assignshift" class="btn btn-info"><i class="fa fa-calendar-check-o"></i> <?php lang("assign shift"); ?></a>
     </div>
@@ -51,7 +51,7 @@ if (account_has_permission($_SESSION['username'], "QWIKCLOCK_MANAGE")) {
     </tfoot>
 </table>
 
-<script>
+<script nonce="<?php echo $SECURE_NONCE; ?>">
     /* Give JavaScript access to the lang string
      * it needs to inject the filter checkbox
      */

required.php

@@ -10,12 +10,42 @@ header('Content-Type: text/html; charset=utf-8');
 // l33t $ecurity h4x
 header('X-Content-Type-Options: nosniff');
 header('X-XSS-Protection: 1; mode=block');
+header('X-Powered-By: PHP'); // no versions makes it harder to find vulns
+header('X-Frame-Options: "DENY"');
+header('Referrer-Policy: "no-referrer, strict-origin-when-cross-origin"');
+$SECURE_NONCE = base64_encode(random_bytes(8));
+
 $session_length = 60 * 60; // 1 hour
 session_set_cookie_params($session_length, "/", null, false, false);
 
 session_start(); // stick some cookies in it
 // renew session cookie
 setcookie(session_name(), session_id(), time() + $session_length);
+
+if ($_SESSION['mobile'] === TRUE) {
+    header("Content-Security-Policy: "
+            . "default-src 'self';"
+            . "object-src 'none'; "
+            . "img-src * data:; "
+            . "media-src 'self'; "
+            . "frame-src 'none'; "
+            . "font-src 'self'; "
+            . "connect-src *; "
+            . "style-src 'self' 'unsafe-inline'; "
+            . "script-src 'self' 'unsafe-inline'");
+} else {
+    header("Content-Security-Policy: "
+            . "default-src 'self';"
+            . "object-src 'none'; "
+            . "img-src * data:; "
+            . "media-src 'self'; "
+            . "frame-src 'none'; "
+            . "font-src 'self'; "
+            . "connect-src *; "
+            . "style-src 'self' 'nonce-$SECURE_NONCE'; "
+            . "script-src 'self' 'nonce-$SECURE_NONCE'");
+}
+
 //
 // Composer
 require __DIR__ . '/vendor/autoload.php';
@@ -32,7 +62,21 @@ require __DIR__ . '/lang/' . LANGUAGE . ".php";
  * @param string $error error message
  */
 function sendError($error) {
-    die("<!DOCTYPE html><html><head><title>Error</title></head><body><h1 style='color: red; font-family: sans-serif; font-size:100%;'>" . htmlspecialchars($error) . "</h1></body></html>");
+    global $SECURE_NONCE;
+    die("<!DOCTYPE html>"
+            . "<meta charset=\"UTF-8\">"
+            . "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"
+            . "<title>Error</title>"
+            . "<style nonce=\"" . $SECURE_NONCE . "\">"
+            . "h1 {color: red; font-family: sans-serif; font-size: 20px; margin-bottom: 0px;} "
+            . "h2 {font-family: sans-serif; font-size: 16px;} "
+            . "p {font-family: monospace; font-size: 14px; width: 100%; wrap-style: break-word;} "
+            . "i {font-size: 12px;}"
+            . "</style>"
+            . "<h1>A fatal application error has occurred.</h1>"
+            . "<i>(This isn't your fault.)</i>"
+            . "<h2>Details:</h2>"
+            . "<p>". htmlspecialchars($error) . "</p>");
 }
 
 date_default_timezone_set(TIMEZONE);

static/css/app.css

@@ -9,6 +9,65 @@
     font-size: 110%;
 }
 
+.navbar-brand img {
+    height: 35px;
+    padding-bottom: 12px;
+    padding-left: 5px;
+}
+
+.pad-75px {
+    height: 75px;
+}
+
+.mgn-btm-10px {
+    margin-bottom: 10px;
+}
+
+.mgn-top-8px {
+    margin-top: 8px;
+}
+
+.black-text {
+    color: black;
+}
+
+#seconds_bar {
+    width: 100%;
+    height: 5px;
+    padding-bottom: 5px;
+}
+
+#seconds_bar_line {
+    background-color: #ffc107;
+    height: 5px;
+}
+
+#days-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+#days-list .checkbox:first-child {
+    margin-top: -6px;
+}
+
+#days-list-container {
+    padding-top: 8px;
+}
+
+.inblock {
+    display: inline-block;
+}
+
+.wrap-break-word {
+    word-wrap: break-word;
+}
+
+.dark-text {
+    color: #01579b;
+}
+
 .footer {
     margin-top: 10em;
     text-align: center;

static/js/assignshift.js

@@ -63,7 +63,7 @@ function addPerson(p) {
         });
         return false;
     }
-    $('#peoplelist').append("<div class=\"list-group-item\" data-user=\"" + p + "\">" + p + "<div onclick=\"removePerson('" + p + "')\" class=\"btn btn-danger btn-sm pull-right\"><i class=\"fa fa-trash-o\"></i></div><input type=\"hidden\" name=\"users[]\" value=\"" + p + "\" /></div>");
+    $('#peoplelist').append("<div class=\"list-group-item\" data-user=\"" + p + "\">" + p + "<div class=\"btn btn-danger btn-sm pull-right rmperson\"><i class=\"fa fa-trash-o\"></i></div><input type=\"hidden\" name=\"users[]\" value=\"" + p + "\" /></div>");
     $("#people-box").val("");
 }
 
@@ -74,3 +74,7 @@ function removePerson(p) {
 $('#shift-select').on('change', function () {
     document.location.href = "app.php?page=assignshift&shift=" + $(this).val();
 });
+
+$('#peoplelist').on("click", ".rmperson", function () {
+    removePerson($(this).parent().data("user"));
+});

static/js/punches.js

@@ -38,4 +38,8 @@ var punchtable = $('#punchtable').DataTable({
     }
 });
 
-$('#punchtable_filter').append("<div class=\"checkbox\" style=\"display: inline-block\"><label><input type=\"checkbox\" id=\"show_all_checkbox\" onclick=\"punchtable.ajax.reload()\"> " + lang_show_all_punches + "</label></div>");
+$('#punchtable_filter').append("<div class=\"checkbox inblock\"><label><input type=\"checkbox\" id=\"show_all_checkbox\"> " + lang_show_all_punches + "</label></div>");
+
+$('#show_all_checkbox').click(function () {
+    punchtable.ajax.reload();
+});

static/js/shifts.js

@@ -42,4 +42,8 @@ var shifttable = $('#shifttable').DataTable({
     }
 });
 
-$('#shifttable_filter').append("<div class=\"checkbox\" style=\"display: inline-block\"><label><input type=\"checkbox\" id=\"show_all_checkbox\" onclick=\"shifttable.ajax.reload()\"> " + lang_show_all_shifts + "</label></div>");
+$('#shifttable_filter').append("<div class=\"checkbox inblock\"><label><input type=\"checkbox\" id=\"show_all_checkbox\"> " + lang_show_all_shifts + "</label></div>");
+
+$('#show_all_checkbox').click(function () {
+    shifttable.ajax.reload();
+});