This commit is contained in:
parent
8b3da979f6
commit
257df86f04
5 changed files with 884 additions and 117 deletions
|
|
@ -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> same‑origin 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: it’s 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 you’ll 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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue