Content/logo tweaks
All checks were successful
CI / test (push) Successful in 1m42s

This commit is contained in:
Miguel Jacq 2026-02-06 17:41:07 +11:00
parent 8b3da979f6
commit 257df86f04
Signed by: mig5
GPG key ID: 59B3F0C24135C6A9
5 changed files with 884 additions and 117 deletions

View file

@ -7,15 +7,13 @@ description: "cspresso crawls a site with headless Chromium (Playwright) and emi
<div class="container py-4">
<div class="row align-items-center g-4">
<div class="col-lg-6">
<div class="kicker mb-3"><i class="bi bi-cup-hot"></i> Brew a Content Security Policy</div>
<h1 class="display-5 fw-800 lh-1 mb-3" style="letter-spacing:-0.03em;">Turn real page loads into a CSP you can ship.</h1>
<h1 class="display-5 fw-800 lh-1 mb-3" style="letter-spacing:-0.03em;">Automatically generate a CSP for your site.</h1>
<p class="lead mb-4">
cspresso crawls up to <em>N</em> sameorigin pages with headless Chromium (Playwright), watches the assets that load,
and emits a <strong>draft</strong> <code>Content-Security-Policy</code> header.
</p>
<div class="d-flex flex-wrap gap-2 mb-4">
<a class="btn btn-dark btn-lg" href="#quickstart"><i class="bi bi-rocket-takeoff"></i> Quickstart</a>
<a class="btn btn-outline-dark btn-lg" href="docs.html"><i class="bi bi-journal-text"></i> Docs</a>
<a class="btn btn-dark btn-lg" href="docs.html"><i class="bi bi-journal-text"></i> Docs</a>
<a class="btn btn-outline-secondary btn-lg" href="evaluate.html"><i class="bi bi-shield-check"></i> Evaluate</a>
<a class="btn btn-outline-secondary btn-lg" href="https://pypi.org/project/cspresso/" target="_blank" rel="noreferrer"><i class="bi bi-box-seam"></i> PyPI</a>
</div>
@ -32,92 +30,16 @@ description: "cspresso crawls a site with headless Chromium (Playwright) and emi
<div class="codeblock">
<button class="btn btn-sm btn-outline-secondary copy-btn" data-copy-target="#heroCode"><i class="bi bi-clipboard"></i> Copy</button>
<pre class="terminal mb-0"><code id="heroCode">pipx install cspresso
cspresso https://example.com --max-pages 10
cspresso https://mig5.net --max-pages 10
# visited: https://example.com/
# visited: https://mig5.net/
Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.jsdelivr.net; ...;</code></pre>
</div>
<div class="mt-3 small text-secondary">
Remember: its only a starting point: crawls may not hit every flow, and inline hashing/nonces require care.
</div>
</div>
</div>
</div>
</header>
<section id="quickstart" class="py-5 border-top">
<div class="container">
<div class="row g-4 align-items-start">
<div class="col-lg-4">
<h2 class="section-title fw-bold mb-2">Quickstart</h2>
</div>
<div class="col-lg-12">
<div class="row g-3">
<div class="col-lg-6">
<div class="codeblock">
<button class="btn btn-sm btn-outline-secondary copy-btn" data-copy-target="#qs1"><i class="bi bi-clipboard"></i> Copy</button>
<pre class="terminal mb-0">
<code id="qs1">
cspresso https://mig5.net \
--ignore-non-html \
--max-pages 10
</code>
</pre>
</div>
</div>
<div class="col-lg-6">
<div class="callout p-4 h-100">
<div class="fw-semibold mb-2">What youll get</div>
<div class="text-muted">
A header line you can paste into your vhost, or parseable info with <code>--json</code>
</div>
<hr>
<div class="small text-secondary">
Tip: if an existing CSP might block loads during analysis, add <code>--bypass-csp</code>.
</div>
</div>
</div>
<div class="col-12">
<div class="codeblock">
<button class="btn btn-sm btn-outline-secondary copy-btn" data-copy-target="#qs2"><i class="bi bi-clipboard"></i> Copy</button>
<pre class="terminal mb-0"><code id="qs2"># Evaluate a candidate CSP (Report-Only) and fail CI on violations
cspresso https://mig5.net \
--bypass-csp \
--evaluate "default-src 'self'; img-src 'none';" \
--json
{
[...]
"violations": [
{
"console": true,
"disposition": "report",
"documentURI": "https://mig5.net/",
"text": "Loading the image 'https://mig5.net/logo.svg' violates the following Content Security Policy directive: \"img-src 'none'\". The policy is report-only, so the violation has been logged but no further action has been taken.",
"type": "info"
},
{
"console": true,
"disposition": "report",
"documentURI": "https://mig5.net/static/mig5.asc",
"text": "Applying inline style violates the following Content Security Policy directive 'default-src 'self''. Either the 'unsafe-inline' keyword, a hash ('sha256-4Su6mBWzEIFnH4pAGMOuaeBrstwJN4Z3pq/s1Kn4/KQ='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback. The policy is report-only, so the violation has been logged but no further action has been taken.",
"type": "info"
}
]
}
# exit code: 1 if violations detected</code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-5" id="how">
<div class="container">
<div class="row g-4 align-items-start">
@ -126,6 +48,14 @@ cspresso https://mig5.net \
<p class="text-muted mb-0">
cspresso lets the browser do the hard part: execute the page, watch what it loads, and distill origins into directives.
</p>
<br />
<p class="text-muted mb-0">
It uses Playwright (a tool designed to run a browser in 'headless' mode, originally to help automate performing frontend testing of websites) to visit the website in the background and learn what directives of a Content-Security Policy would be needed in order to set such a header and still have the website function properly.
</p>
<br />
<p class="text-muted mb-0">
It can also evaluate a provided CSP against a site and see if normal use of the site would trigger violations of the policy, before you ship it.
</p>
</div>
<div class="col-lg-7">
<div class="row g-3">