Skip to content

Commit

Permalink
feat(observatory): cookies tab rework (#12203)
Browse files Browse the repository at this point in the history 
Co-authored-by: Florian Dieminger <[email protected]>
  • Loading branch information
@argl @fiji-flo
argl and fiji-flo authored Dec 6, 2024
1 parent b47a1a8 commit 6c3977c
Show file tree
Hide file tree
Showing 7 changed files with 287 additions and 180 deletions.
43 changes: 43 additions & 0 deletions client/src/observatory/results.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,35 @@
margin-top: 1rem;
}

.detail-header {
display: flex;
gap: 0.5rem;
padding: 0 1.5rem 0 0;

.arrow {
color: var(--observatory-color-secondary);
}

.detail-header-title {
font-weight: 600;
padding-right: 0.2rem;
}

p {
margin: 1rem 0;
}
}

.iso-date {
code {
font-weight: initial;
}
}

.humanized-duration {
font-size: var(--type-smaller-font-size);
}

table {
background: var(--observatory-table-bg);
border: none;
Expand Down Expand Up @@ -213,6 +242,16 @@
width: 1.3rem;
}

@media (max-width: #{$screen-sm - 0.02}) {
td {
.iso-date {
code {
font-size: x-small;
}
}
}
}

@media (max-width: #{$screen-lg - 0.02}) {
// responsive table
min-width: 0;
Expand Down Expand Up @@ -240,6 +279,10 @@
grid-auto-flow: column;
grid-column: span 2;
grid-template-columns: subgrid;

.humanized-duration {
display: none;
}
}

td:before {
Expand Down
10 changes: 5 additions & 5 deletions client/src/observatory/results.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,16 +132,16 @@ function ObservatoryScanResults({ result, host }) {
key: "csp",
element: <ObservatoryCSP result={result} />,
},
{
label: "Raw server headers",
key: "headers",
element: <ObservatoryHeaders result={result} />,
},
{
label: "Cookies",
key: "cookies",
element: <ObservatoryCookies result={result} />,
},
{
label: "Raw server headers",
key: "headers",
element: <ObservatoryHeaders result={result} />,
},
{
label: "Scan history",
key: "history",
Expand Down
190 changes: 106 additions & 84 deletions client/src/observatory/results/cookies.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,93 +1,115 @@
import { ObservatoryResult } from "../types";
import { formatDateTime, PassIcon } from "../utils";
import { PassIcon, Timestamp } from "../utils";

export function ObservatoryCookies({ result }: { result: ObservatoryResult }) {
const cookies = result.tests["cookies"]?.data;
const pass = result.tests["cookies"]?.pass;
return cookies && Object.keys(cookies).length !== 0 ? (
<table className="cookies">
<thead>
<tr>
<th>Name</th>
<th>
<a
target="_blank"
href="/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#expires"
>
Expires
</a>
</th>
<th>
<a
target="_blank"
href="/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#path"
>
Path
</a>
</th>
<th>
<a
target="_blank"
href="/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#secure"
>
Secure
</a>
</th>
<th>
<a
target="_blank"
href="/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#httponly"
>
HttpOnly
</a>
</th>
<th>
<a
target="_blank"
href="/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#samesite"
>
SameSite
</a>
</th>
<th>
<a
target="_blank"
href="/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#name"
>
Prefix
</a>
</th>
</tr>
</thead>
<tbody>
{Object.entries(cookies).map(([key, value]) => (
<tr key={key}>
<td data-header="Name" className="cookie-name">
{key}
</td>
<td data-header="Expires">
{value.expires
? formatDateTime(new Date(value.expires))
: "Session"}
</td>
<td data-header="Path">
<code>{value.path}</code>
</td>
<td data-header="Secure">
<PassIcon pass={value.secure} />
</td>
<td data-header="HttpOnly">
<PassIcon pass={value.httponly} />
</td>
<td data-header="SameSite">
{value.samesite ? <code>{capitalize(value.samesite)}</code> : "-"}
</td>
<td data-header="Prefixed">
<CookiePrefix name={key} />
</td>
<>
<div className="detail-header">
<p className="arrow">
<PassIcon pass={pass} />
</p>
<div
className="detail-header-content"
dangerouslySetInnerHTML={{
__html:
result.tests["cookies"]?.score_description ??
`<p class="obs-none">None</p>`,
}}
/>
</div>
<table className="cookies">
<thead>
<tr>
<th>Name</th>
<th>
<a
target="_blank"
href="/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#expires"
>
Expires
</a>
</th>
<th>
<a
target="_blank"
href="/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#path"
>
Path
</a>
</th>
<th>
<a
target="_blank"
href="/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#secure"
>
Secure
</a>
</th>
<th>
<a
target="_blank"
href="/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#httponly"
>
HttpOnly
</a>
</th>
<th>
<a
target="_blank"
href="/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#samesite"
>
SameSite
</a>
</th>
<th>
<a
target="_blank"
href="/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#name"
>
Prefix
</a>
</th>
</tr>
))}
</tbody>
</table>
</thead>
<tbody>
{Object.entries(cookies).map(([key, value]) => (
<tr key={key}>
<td data-header="Name" className="cookie-name">
{key}
</td>
<td data-header="Expires">
{value.expires ? (
<Timestamp expires={value.expires} />
) : (
"Session"
)}
</td>
<td data-header="Path">
<code>{value.path}</code>
</td>
<td data-header="Secure">
<PassIcon pass={value.secure} />
</td>
<td data-header="HttpOnly">
<PassIcon pass={value.httponly} />
</td>
<td data-header="SameSite">
{value.samesite ? (
<code>{capitalize(value.samesite)}</code>
) : (
"-"
)}
</td>
<td data-header="Prefixed">
<CookiePrefix name={key} />
</td>
</tr>
))}
</tbody>
</table>
</>
) : (
<table className="cookies">
<tbody>
Expand Down
Loading

0 comments on commit 6c3977c

Please sign in to comment.