From 10ebf5fe0d4cea9c9ebbdf9a9b7908057f9cd58d Mon Sep 17 00:00:00 2001 From: Oliver Chang Date: Mon, 4 Apr 2022 17:57:34 +1000 Subject: [PATCH 1/2] Home page improvements. - Implement ecosystems sizes. Use log scale for the circle sizes. - Center text. --- gcp/appengine/frontend3/src/styles.scss | 63 ++++++++++++++++--- .../frontend3/src/templates/home.html | 39 +++++++----- gcp/appengine/frontend_handlers.py | 6 ++ 3 files changed, 85 insertions(+), 23 deletions(-) diff --git a/gcp/appengine/frontend3/src/styles.scss b/gcp/appengine/frontend3/src/styles.scss index 39c0c86dd72..e461543da82 100644 --- a/gcp/appengine/frontend3/src/styles.scss +++ b/gcp/appengine/frontend3/src/styles.scss @@ -453,19 +453,29 @@ dl.vulnerability-details, /** Home page */ .home-page { + .hero { + width: 1000px; + margin: 0 auto; + + .cta { + text-align: center; + } + } + .title { font-size: 60px; line-height: 70px; + margin-bottom: 12px; } .explainer { font-size: 20px; - } + text-align: center; - .google-backed::after { - display: inline; - content: 'google'; - font-family: 'Google Material Icons'; + p { + margin-bottom: 8px; + } + margin-bottom: 32px; } .ecosystem-counts { @@ -478,6 +488,8 @@ dl.vulnerability-details, dt { position: relative; top: 210px; + text-align: center; + font-family: $osv-heading-font-family; } dd { position: relative; @@ -488,17 +500,52 @@ dl.vulnerability-details, padding-top: 100%; } .ecosystem-count { - position: relative; + font-family: $osv-heading-font-family; + position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; - background: #ddd; + background: #c4c4c4; color: #000; - border-radius: 999px; + border-radius: 50%; text-align: center; + z-index: 1; } } + + .ecosystems-line { + width: 100%; + border-top: 1px dashed #a0a0a0; + position: relative; + z-index: 1; + } + + .ecosystems-line-mid { + @extend .ecosystems-line; + top: 105px; + border-top: 1px solid #a0a0a0; + } + + .ecosystems-line-0 { + @extend .ecosystems-line; + top: 1px; + } + + .ecosystems-line-1 { + @extend .ecosystems-line; + top: 52px; + } + + .ecosystems-line-2 { + @extend .ecosystems-line; + top: 157px; + } + + .ecosystems-line-3 { + @extend .ecosystems-line; + top: 210px; + } } .usage-examples { diff --git a/gcp/appengine/frontend3/src/templates/home.html b/gcp/appengine/frontend3/src/templates/home.html index 53f96436593..afa234df7aa 100644 --- a/gcp/appengine/frontend3/src/templates/home.html +++ b/gcp/appengine/frontend3/src/templates/home.html @@ -4,36 +4,45 @@ {% block content %}
-
-

A complete picture of vulnerabilities in your open source dependencies.

+
+

A distributed vulnerability database for Open Source

-

- An ongoing project backed by Google. +

+ This infrastructure serves as an aggregator of vulnerability databases + that have adopted the OpenSSF OSV format.

- OSV captures precise data about a vulnerability's impact, and - automates the process of vulnerability triage and database - maintenance across major open source ecosystems. + All advisories can be easily mapped to package versions used in package + manager ecosystems.

Search Vulnerability Database + Use the API Learn more
-

Our current vulnerability coverage

+

Current vulnerability coverage

+
+
+
+
+
{% if ecosystem_counts %} {% set total = ecosystem_counts.values() | sum %} {% for ecosystem in ecosystem_counts %} -
{{ ecosystem }}
-
- - {{ ecosystem_counts[ecosystem] }} - -
+ {% if ecosystem_counts[ecosystem] > 30 %} +
{{ ecosystem }}
+
+ {% set radius = [(ecosystem_counts[ecosystem] | log) / (total | log) * 100, 30] | max %} + + {{ ecosystem_counts[ecosystem] }} + +
+ {% endif %} {% endfor %} {% endif %}
diff --git a/gcp/appengine/frontend_handlers.py b/gcp/appengine/frontend_handlers.py index f566ccc834f..ebfb3821801 100644 --- a/gcp/appengine/frontend_handlers.py +++ b/gcp/appengine/frontend_handlers.py @@ -14,6 +14,7 @@ """Handlers for the OSV web frontend.""" import os +import math from flask import abort from flask import Blueprint @@ -288,3 +289,8 @@ def vulnerability_handler(): """Handle a vulnerability request.""" vuln_id = request.args.get('id') return jsonify(osv_get_by_id(vuln_id)) + + +@blueprint.app_template_filter('log') +def logarithm(n): + return math.log(n) From ffcf21f54d8b285eb6aeda1824f3ce90d85fbb3b Mon Sep 17 00:00:00 2001 From: Oliver Chang Date: Mon, 4 Apr 2022 18:37:46 +1000 Subject: [PATCH 2/2] more changes --- gcp/appengine/frontend3/src/styles.scss | 40 ++++++++- .../frontend3/src/templates/home.html | 89 +++++++++++++++---- gcp/appengine/main.py | 1 + 3 files changed, 110 insertions(+), 20 deletions(-) diff --git a/gcp/appengine/frontend3/src/styles.scss b/gcp/appengine/frontend3/src/styles.scss index e461543da82..c277e06eeb5 100644 --- a/gcp/appengine/frontend3/src/styles.scss +++ b/gcp/appengine/frontend3/src/styles.scss @@ -470,7 +470,6 @@ dl.vulnerability-details, .explainer { font-size: 20px; - text-align: center; p { margin-bottom: 8px; @@ -549,13 +548,48 @@ dl.vulnerability-details, } .usage-examples { - margin-top: 130px; + margin-top: 100px; margin-bottom: 120px; .heading { font-size: 60px; text-align: center; margin-bottom: 32px; } + .description { + font-size: 20px; + line-height: 24px; + margin-bottom: 10px; + text-align: center; + } + } + + .schema-info { + width: 800px; + margin: 0 auto; + margin-top: 100px; + + .heading { + font-size: 60px; + text-align: center; + margin-bottom: 32px; + } + .description { + font-size: 20px; + line-height: 24px; + margin-bottom: 10px; + } + + .code { + background: #333; + padding: 32px; + font-size: 12px; + border-radius: 10px; + } + + .cta { + margin: 32px 0; + text-align: center; + } } .code-card { @@ -582,7 +616,7 @@ dl.vulnerability-details, } } - .api-banner { + .open-source-banner { width: 640px; margin: 0 auto; diff --git a/gcp/appengine/frontend3/src/templates/home.html b/gcp/appengine/frontend3/src/templates/home.html index afa234df7aa..4140185cad6 100644 --- a/gcp/appengine/frontend3/src/templates/home.html +++ b/gcp/appengine/frontend3/src/templates/home.html @@ -7,14 +7,7 @@

A distributed vulnerability database for Open Source

-

- This infrastructure serves as an aggregator of vulnerability databases - that have adopted the OpenSSF OSV format. -

-

- All advisories can be easily mapped to package versions used in package - manager ecosystems. -

+

An open, distributed way of managing vulnerabilities for open source.

Search Vulnerability Database @@ -23,7 +16,7 @@

A distributed vulnerability database for Open Source

-

Current vulnerability coverage

+

Ecosystems

@@ -47,9 +40,75 @@

Current vulnerability coverage

{% endif %}
+ +
+

OSV schema

+

+ All advisories in this database use the + OpenSSF OSV format, which + was developed in collaboration with many open source communities. This + infrastructure serves as an aggregator of + vulnerability databases + that have adopted this schema. +

+

+ The OSV schema provides a human and machine readable data format to + describe vulnerabilities in a way that precisely map to open source + package versions. +

+ 
+{
+  "schema_version": "1.3.0",
+  "id": "GHSA-c3g4-w6cv-6v7h",
+  "modified": "2022-04-01T13:56:42Z",
+  "published": "2022-04-01T13:56:42Z",
+  "aliases": [ "CVE-2022-27651" ],
+  "summary": "Non-empty default inheritable capabilities for linux container in Buildah",
+  "details": "A bug was found in Buildah where containers were created ...",
+  "affected": [
+    {
+      "package": {
+        "ecosystem": "Go",
+        "name": "github.com/containers/buildah"
+      },
+      "ranges": [
+        {
+          "type": "ECOSYSTEM",
+          "events": [
+            {
+              "introduced": "0"
+            },
+            {
+              "fixed": "1.25.0"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "references": [
+    {
+      "type": "WEB",
+      "url": "https://github.com/containers/buildah/commit/..."
+    },
+    {
+      "type": "PACKAGE",
+      "url": "https://github.com/containers/buildah"
+    }
+  ],
+}
+
+
+ Learn more +
+

+

Use the API

- +

+ An easy-to-use API is available to query for all known vulnerabilities + by either a commit hash, or a package version. +

Query by commit hash

@@ -72,15 +131,11 @@

Query by version number

-
-

Understand your open source exposure.

+
+

Open source

- Enter a git commit hash or version number and the API - returns a list of vulnerabilities affecting that version. + This project is open source. Contributions are welcome!

-
- To the API -
diff --git a/gcp/appengine/main.py b/gcp/appengine/main.py index cd1304a8ff5..072fd8411a9 100644 --- a/gcp/appengine/main.py +++ b/gcp/appengine/main.py @@ -49,6 +49,7 @@ def create_app(): __name__, template_folder='dist', static_folder='dist/static') flask_app.register_blueprint(handlers.blueprint) flask_app.register_blueprint(frontend_handlers.blueprint) + flask_app.config["TEMPLATES_AUTO_RELOAD"] = True return flask_app