Skip to content

Commit da553d2

Browse files
AbhishekHerbertSamuelanother-rex
AbhishekHerbertSamuel
and
another-rex
authored
docs: add example and HTML output screenshot for container scanning (#3716)
This PR adds a container scanning example using OSV-Scanner for the Alpine 3.12 image, and includes a screenshot of the HTML output. Closes #3355 --------- Co-authored-by: Rex P <[email protected]> Co-authored-by: Rex P <[email protected]>
1 parent ab0fd2b commit da553d2

File tree

3 files changed

+104
-38
lines changed

3 files changed

+104
-38
lines changed

‎gcp/website/frontend3/img/container-scan-html.png‎

189 KB
Loading

‎gcp/website/frontend3/src/templates/home.html‎

Lines changed: 103 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<link rel="preload" fetchpriority="high" as="image" href="/static/img/external-link.svg" type="image/webp">
88
<!-- Defer offscreen images on mobile screens -->
99
<link rel="preload" fetchpriority="high" as="image" href="/static/img/footer-decoration.webp" type="image/webp"
10-
media="(min-width: 768px)" onload="this.media='all'">
10+
media="(min-width: 768px)" onload="this.media='all'">
1111
<noscript>
1212
<link rel="stylesheet" href="/static/img/footer-decoration.webp" type="image/webp">
1313
</noscript>
@@ -19,8 +19,10 @@
1919
<div class="mdc-layout-grid__cell--span-12 hero">
2020
<h1 class="title">A distributed vulnerability database for Open Source</h1>
2121
<div class="explainer">
22-
<p>An open, precise, and distributed approach to producing and consuming vulnerability information for open
22+
<p>An open, precise, and distributed approach to producing and consuming vulnerability information for
23+
open
2324
source.
25+
</p>
2426
</div>
2527
<div class="cta">
2628
<a class="cta-primary link-button" href="{{ url_for('frontend_handlers.list_vulnerabilities') }}">
@@ -128,7 +130,8 @@ <h2 class="heading">OSV schema</h2>
128130
<div class="cta">
129131
<a class="cta-primary link-button" href="https://ossf.github.io/osv-schema/">OSV Schema</a>
130132
<a class="cta-primary link-button"
131-
href="https://security.googleblog.com/2021/06/announcing-unified-vulnerability-schema.html">Blog post</a>
133+
href="https://security.googleblog.com/2021/06/announcing-unified-vulnerability-schema.html">Blog
134+
post</a>
132135
</div>
133136
</div>
134137
<div class="mdc-layout-grid__cell--span-12 text-info data-sources">
@@ -144,7 +147,7 @@ <h2 class="heading">Data sources</h2>
144147
</p>
145148
<div class="cta">
146149
<a class="cta-primary link-button" href="https://google.github.io/osv.dev/data/#current-data-sources"
147-
aria-label="Learn more about our data sources">Learn more</a>
150+
aria-label="Learn more about our data sources">Learn more</a>
148151
</div>
149152
</div>
150153
<div id="use-the-api" class="mdc-layout-grid__cell--span-12 usage-examples">
@@ -160,7 +163,9 @@ <h3 class="code-card-title">Query by commit hash</h3>
160163
'{"commit": "6879efc2c1596d11a6a6ad296f80063b558d5e0f"}' \
161164
"https://api.osv.dev/v1/query"</pre>
162165
<clipboard-copy class="code-card-copy" for="example-commit-hash">
163-
<md-icon-button class="icon"><md-icon>content_copy</md-icon></md-icon-button>
166+
<md-icon-button class="icon">
167+
<md-icon>content_copy</md-icon>
168+
</md-icon-button>
164169
</clipboard-copy>
165170
</div>
166171
<div class="code-card mdc-layout-grid__cell--span-6 mdc-layout-grid__cell--span-12-tablet">
@@ -170,13 +175,16 @@ <h3 class="code-card-title">Query by version number</h3>
170175
"package": {"name": "jinja2", "ecosystem": "PyPI"}}' \
171176
"https://api.osv.dev/v1/query"</pre>
172177
<clipboard-copy class="code-card-copy" for="example-version-number">
173-
<md-icon-button class="icon"><md-icon>content_copy</md-icon></md-icon-button>
178+
<md-icon-button class="icon">
179+
<md-icon>content_copy</md-icon>
180+
</md-icon-button>
174181
</clipboard-copy>
175182
</div>
176183
</div>
177184
<div class="mdc-layout-grid__cell--span-12">
178185
<div class="cta">
179-
<a class="cta-primary link-button" href="https://google.github.io/osv.dev/api/">API Documentation</a>
186+
<a class="cta-primary link-button" href="https://google.github.io/osv.dev/api/">API
187+
Documentation</a>
180188
</div>
181189
</div>
182190
</div>
@@ -191,7 +199,9 @@ <h3 class="code-card-title">Install OSV&#8209;Scanner</h3>
191199
go install github.com/google/osv-scanner/v2/cmd/osv-scanner@v2
192200
</pre>
193201
<clipboard-copy class="code-card-copy" for="example-scanner-install">
194-
<md-icon-button class="icon"><md-icon>content_copy</md-icon></md-icon-button>
202+
<md-icon-button class="icon">
203+
<md-icon>content_copy</md-icon>
204+
</md-icon-button>
195205
</clipboard-copy>
196206
</div>
197207
<div class="mobile-spacer mdc-layout-grid__cell--span-3"></div>
@@ -202,7 +212,9 @@ <h3 class="code-card-title">Scan SBOM or Lockfiles</h3>
202212
osv-scanner --lockfile=package-lock.json
203213
</pre>
204214
<clipboard-copy class="code-card-copy" for="example-sbom-scan">
205-
<md-icon-button class="icon"><md-icon>content_copy</md-icon></md-icon-button>
215+
<md-icon-button class="icon">
216+
<md-icon>content_copy</md-icon>
217+
</md-icon-button>
206218
</clipboard-copy>
207219
</div>
208220
<div class="code-card mdc-layout-grid__cell--span-6 mdc-layout-grid__cell--span-12-tablet">
@@ -211,7 +223,9 @@ <h3 class="code-card-title">Scan directory recursively</h3>
211223
osv-scanner -r path/to/your/project
212224
</pre>
213225
<clipboard-copy class="code-card-copy" for="example-dir-scan">
214-
<md-icon-button class="icon"><md-icon>content_copy</md-icon></md-icon-button>
226+
<md-icon-button class="icon">
227+
<md-icon>content_copy</md-icon>
228+
</md-icon-button>
215229
</clipboard-copy>
216230
</div>
217231
</div>
@@ -232,7 +246,9 @@ <h3 class="code-card-title">Guided Remediation (basic)</h3>
232246
osv-scanner fix --non-interactive --strategy=relock -M path/to/package.json -L path/to/package-lock.json
233247
</pre>
234248
<clipboard-copy class="code-card-copy" for="example-guided-remediation-basic">
235-
<md-icon-button class="icon"><md-icon>content_copy</md-icon></md-icon-button>
249+
<md-icon-button class="icon">
250+
<md-icon>content_copy</md-icon>
251+
</md-icon-button>
236252
</clipboard-copy>
237253
</div>
238254
<div class="code-card mdc-layout-grid__cell--span-6 mdc-layout-grid__cell--span-12-tablet">
@@ -241,43 +257,93 @@ <h3 class="code-card-title">Guided Remediation (interactive)</h3>
241257
osv-scanner fix -M path/to/package.json -L path/to/package-lock.json
242258
</pre>
243259
<clipboard-copy class="code-card-copy" for="example-guided-remediation-advanced">
244-
<md-icon-button class="icon"><md-icon>content_copy</md-icon></md-icon-button>
260+
<md-icon-button class="icon">
261+
<md-icon>content_copy</md-icon>
262+
</md-icon-button>
245263
</clipboard-copy>
246264
</div>
265+
266+
247267
</div>
248268
<div class="mdc-layout-grid__cell--span-12">
249269
<div class="cta">
250-
<a class="cta-primary link-button" href="https://google.github.io/osv-scanner/experimental/guided-remediation/">More details</a>
270+
<a class="cta-primary link-button"
271+
href="https://google.github.io/osv-scanner/experimental/guided-remediation/">More details</a>
251272
</div>
252273
</div>
253274
</div>
254-
<div id="use-the-github-workflows" class="mdc-layout-grid__cell--span-12 github-action">
255-
<h2 class="heading">GitHub Workflows</h2>
275+
<div id="use-container-scanning" class="mdc-layout-grid__cell--span-12 usage-examples">
276+
<h2 class="heading">Container Image Scanning</h2>
256277
<p class="description">
257-
OSV-Scanner also provides reusable GitHub workflows that can be easily integrated into CI/CD pipelines to provide
258-
continuous vulnerability scanning coverage. This can scan newly added dependencies in pull requests for introduced
259-
vulnerabilities, as well as perform regular vulnerability scans for the entire project.</p>
260-
<div class="image-container">
261-
<img src="/static/img/github-action-scan-output.webp" alt="Screenshot of OSV-Scanner GitHub Action" loading="lazy">
278+
You can use
279+
<a href="https://github.com/google/osv-scanner" target="_blank" rel="noopener">OSV-Scanner</a>
280+
to scan your container images for known vulnerabilities.
281+
</p>
282+
283+
<!-- Command box (same look as 'Use the API' cards, centered) -->
284+
<div class="code-card-container mdc-layout-grid__inner">
285+
<div class="mobile-spacer mdc-layout-grid__cell--span-3"></div>
286+
<div class="code-card mdc-layout-grid__cell--span-6 mdc-layout-grid__cell--span-12-tablet">
287+
<h3 class="code-card-title">Scan container image</h3>
288+
<pre class="code-card-content" id="example-container-scan-serve">
289+
osv-scanner scan image --serve alpine:3.12
290+
</pre>
291+
<clipboard-copy class="code-card-copy" for="example-container-scan-serve">
292+
<md-icon-button class="icon">
293+
<md-icon>content_copy</md-icon>
294+
</md-icon-button>
295+
</clipboard-copy>
296+
</div>
297+
<div class="mobile-spacer mdc-layout-grid__cell--span-3"></div>
262298
</div>
263-
<div class="cta">
264-
<a class="cta-primary link-button" href="https://google.github.io/osv-scanner/github-action/"
265-
aria-label="Learn more about osv scanner github action">Learn more</a>
299+
300+
<!-- Big screenshot (same size/markup as GitHub Workflows) -->
301+
<div class="image-container" style="margin-top: 16px;">
302+
<img
303+
src="/static/img/container-scan-html.png"
304+
alt="Screenshot of container scan HTML output"
305+
loading="lazy"
306+
style="
307+
max-width: 1000px;
308+
width: 100%;
309+
height: auto;
310+
display: block;
311+
margin: 0 auto;
312+
border: none;
313+
/* crop 2px from the TOP only */
314+
clip-path: inset(2px 0 0 0);
315+
"
316+
>
266317
</div>
267-
</div>
268-
<div class="mdc-layout-grid__cell--span-12 open-source-banner">
269-
<h2 class="heading">Open source</h2>
270-
<p class="description">
271-
This project is <a href="https://github.com/google/osv">open source</a>. If you have any ideas or questions,
272-
please feel free to
273-
reach out by <a href="https://github.com/google/osv/issues/new/choose">creating an issue</a>!
274-
</p>
275-
<div class="cta">
276-
<a class="cta-primary link-button" href="https://google.github.io/osv.dev/faq/"
277-
aria-label="Learn more on our FAQ">Learn more</a>
318+
319+
320+
<div id="use-the-github-workflows"
321+
class="mdc-layout-grid__cell--span-12 github-action">
322+
<h2 class="heading">GitHub Workflows</h2>
323+
<p class="description"> OSV-Scanner also provides reusable GitHub workflows that can be easily
324+
integrated into CI/CD pipelines to provide continuous vulnerability scanning coverage. This can scan
325+
newly added dependencies in pull requests for introduced vulnerabilities, as well as perform regular
326+
vulnerability scans for the entire project.</p>
327+
<div class="image-container"><img src="/static/img/github-action-scan-output.webp"
328+
alt="Screenshot of OSV-Scanner GitHub Action" loading="lazy"></div>
329+
<div class="cta"><a class="cta-primary link-button"
330+
href="https://google.github.io/osv-scanner/github-action/"
331+
aria-label="Learn more about osv scanner github action">Learn more</a></div>
332+
</div>
333+
334+
<div class="mdc-layout-grid__cell--span-12 open-source-banner">
335+
<h2 class="heading">Open source</h2>
336+
<p class="description"> This project is <a href="https://github.com/google/osv">open source</a>. If you
337+
have any ideas or questions, please feel free to reach out by <a
338+
href="https://github.com/google/osv/issues/new/choose">creating an issue</a>! </p>
339+
340+
<div class="cta">
341+
<a class="cta-primary link-button" href="https://google.github.io/osv.dev/faq/"
342+
aria-label="Learn more on our FAQ">Learn more</a>
343+
</div>
278344
</div>
279345
</div>
280346
</div>
281-
<footer></footer>
282-
</div>
283-
{% endblock %}
347+
<footer>
348+
</footer>
349+
</div> {% endblock %}

‎gcp/website/frontend3/webpack.dev.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ module.exports = {
3535
plugins: [
3636
new CopyPlugin({
3737
patterns: [
38-
{ from: './src/templates/*.html', to: '[name].html' },
38+
{ from: './src/templates', to: '.', globOptions: { ignore: ['**/base.html'] } },
3939
{ from: './img/*', to: 'static/img/[name][ext]' },
4040
],
4141
}),

0 commit comments

Comments
 (0)