x/pkgsite: add Affected Symbols section to vulnerability pages

[julieqiu]

For example, https://pkg.go.dev/vuln/GO-2021-0113 should have an "Affected Symbols" section explicitly listing these symbols from the ecosystem_specific.imports.symbols section:

"MatchStrings",
"MustParse",
"Parse",
"ParseAcceptLanguage"

[neild]

See golang/vulndb#967 and https://pkg.go.dev/vuln/GO-2022-0646.

[hyangah]

Blocked by #54992

[hyangah]

I am afraid the table view can be a bit too crowed depending on the number of symbols.
Suggestions are welcome.

cc @golang/vulndb

[gopherbot]

Change https://go.dev/cl/429678 mentions this issue: internal/vulns: add affected symbols

[julieqiu]

It might make sense to list the information vertically, as opposed to in a table. It is also likely that in many reports, all exported symbols will be affected.

/cc @jinhongy @fflewddur for UX input

We should also only list exported symbols on this page, and maybe link to the corresponding pkg.go.dev/# page (This is #52660). We compute derived symbols when creating the reports, for this use case on pkgsite.

[hyangah]

@julieqiu Where is the derived symbols field? I don't see derived symbols in the example data nor the osv package types (https://pkg.go.dev/golang.org/x/vuln/osv#EcosystemSpecificImport).

EDIT: from code I guess the Symbols field contain both derived and originally-reported symbols. But if we exclude all unexported symbols, there will be no exported symbol for net/http for vulnerability GO-2022-0236. Does this case (i.e. symbols is not empty, but there is no exported symbols) mean the entire net/http is vulnerable, or does it mean there is no way to get affected by net/http? Or, is it just a bug in vulndb?

[hyangah]

This is cl/429678 patchset 3

List affected symbols (exported only) in the next <tr>.

When multiple packages are affected:

When there are more than N (e.g. 5) symbols for a package, use <details> or javascript to show more.

[jinhongy]

I would recommend to use the table considered the case that we might have multiple packages with multiple affected symbols. We can make it clear even with huge amount of affected symbols with following adjustment:

• One symbol for each line
• Only show max symbols by default, it there are more, add a " # more" link behind
• Expand the rest of all affected symbols in the table if developers click on the more link

[julieqiu]

Thanks @jinhongy! Would you mind sharing what the mobile design would look like? Here's the current mobile view:

[jinhongy]

Here is my recommendation for responsive table in mobile view

[hyangah]

Thanks @jinhongy

In the cl/429678 patchset 4, I made it to the three-column (Package, Versions, Symbols) table for wide screens, and made it similar to @jinhongy's mock for narrower screens.
I hope use of grid gives us more flexibility.

To make it look more polished, I need help from @jamalc or @jinhongy who are more capable of js/css.

Wide screen

• Differences from @jinhongy 's suggestion
  • three columns instead of 4 columns: because there can be multiple version ranges.
  • versions before symbols: because IMO version range info is more important than individual symbol list.
  • use <details> instead of the delicate expansion feature: I hope someone more capable of CSS & JS handle the issue if we decide to show the first N.
  • print full package path only instead of the package name: Need investigation
  • didn't linkify symbols - that is x/pkgsite: link symbols on pkg.go.dev/vuln pages to the corresponding pkg.go.dev/<path>#<symbol> #52660

Mobile view

• Collapsed
  

• Expanded