Alerts - add CWE, WASC non-mobile (#2161)

Add CWE and WASC columns in the Alerts list, but only for wider screens. Is this something we might want to do on other pages too? Signed-off-by: Simon Bennetts <[email protected]>
zaproxy · Sep 29, 2023 · 90b73d3 · 90b73d3
1 parent a2d4c87
commit 90b73d3
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/site/content/docs/alerts/_index.md b/site/content/docs/alerts/_index.md
@@ -15,4 +15,6 @@ Many alerts support [tags](/alerttags/) which allow you to see which alerts are
 [OWASP Top Ten](https://owasp.org/Top10/) categories or [OWASP Web Service Testing Guide](https://owasp.org/www-project-web-security-testing-guide/) chapters.
 
 Some alerts are only relevant for specific [technologies](/techtags/) - if you know your target app does _not_ use some of these technologies then you can configure ZAP
-to skip those tests.
+to skip those tests.
+
+The CWE and WASC columns are only shown on wider screens - if you are using a mobile phone then try turning your screen sideways if you want to see them.
diff --git a/site/layouts/alert/list.html b/site/layouts/alert/list.html
@@ -16,6 +16,8 @@ <h1 class="text--white">{{ .Title }}</h1>
                <th data-suggest>Status</th>
                <th data-suggest>Risk</th>
                <th data-suggest>Type</th>
+               <th class='th-non-mobile'>CWE</th>
+               <th class='th-non-mobile'>WASC</th>
             </tr>
          </thead>
          <tbody>
@@ -26,6 +28,8 @@ <h1 class="text--white">{{ .Title }}</h1>
                   <td>{{ .Params.status }}</td>
                   <td>{{ .Params.risk }}</td>
                   <td>{{ .Params.alerttype }}</td>
+                  <td class='td-non-mobile'>{{ .Params.cwe }}</td>
+                  <td class='td-non-mobile'>{{ .Params.wasc }}</td>
                </tr>
             {{ end }}
          </tbody>

diff --git a/src/css/_layout.scss b/src/css/_layout.scss
@@ -150,3 +150,13 @@ $grid_widths: 2 3 4 5 6 8;
 .embed-youtube iframe, .embed-youtube object, .embed-youtube embed { 
 	position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
 }
+
+// Hide columns on smaller screens
+@media only screen and (max-width: 650px) {
+  td.td-non-mobile {
+    display:none;
+  }
+  th.th-non-mobile {
+    display:none;
+  }
+}