New registration API for web extensions

[mperham]

In order to lock down JS and CSS for better security, we need to provide a first-class API for web extensions so they can opt into better asset security while maintaining compatibility with existing versions.

Please see the content under examples/webui-ext and specifically the new register API:

# DEPRECATED --- Old way to register
# Sidekiq::Web.register(SidekiqExt::RedisInfo::Web)
# Sidekiq::Web.tabs["Redis"] = "redis_info"

# NEW API IN 7.3.0
# This new way allows you to serve your own static assets
# and provide localizations for any strings in your extension.

Sidekiq::Web.register(SidekiqExt::RedisInfo::Web,
  name: "redis_info",
  tab: ["Redis"],              # The name on your Tab(s)
  index: ["redis_info"],       # The path to the root page(s) of your extension within the Web UI, usually "/sidekiq/" + index
  root_dir: SidekiqExt::RedisInfo::Web::ROOT, # root directory for all web ui content
  asset_paths: ["css", "js"],  # Paths within {root}/assets/{name} to serve static assets
  cache_for: 86400            # Enable http caching for one day of static assets
) do |sidekiq_web|
  # you can add your own middleware or additional settings here
end

The old way still works but will be removed in 8.0. Note also the new tag helpers script_tag and style_tag which handle the "nonce-sense" (ha ha) for you.

[markets]

Like the new API @mperham 👍

Just a small suggestion. The middlewares object seems very flexible, but a bit complex maybe 🤔? What about some more high level flag to easily configure the assets paths, something like:

Sidekiq::Web.register(SidekiqExt::RedisInfo::Web,
  tab: "Redis",
  index: "redis_info",
  asset_paths: ["/redis_info/css", "/redis_info/js"]

And rely on some sensible defaults for the rest.

[Earlopain]

Inline styling got reverted and inline scripts are already disallowed (#6074). This will be more accurate:

Adjust CSP to disallow remote scripts within the Web UI.
... 3rd party extensions that load scripts from something like a CDN will need to adjust their web assets accordingly. Inline and external styles will be disallowed in sidekiq 8.0.

Also, perhaps something like:

# Before
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
# After
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js" <%= defined?(csp_nonce) ? "nonce=\"#{csp_nonce}\"" : "" %>></script>

This will work in both 7.2 and 7.3 so extensions wouldn't have to worry about that.

Mention that the same will be necessary for css for 8.0 so that people already prepare.

[mperham]

Just a small suggestion. The middlewares object seems very flexible, but a bit complex maybe 🤔? What about some more high level flag to easily configure the assets paths, something like:

Sidekiq::Web.register(SidekiqExt::RedisInfo::Web,
  tab: "Redis",
  index: "redis_info",
  asset_paths: ["/redis_info/css", "/redis_info/js"]

The issue is that I have to make a lot of assumptions to remove most of that boilerplate code. I want to include some caching of assets but can I assume that? Is a one day expiry ok? How do I know where the assets are located on disk (the root parameter)? I think I can do something like this:

Sidekiq::Web.register(SidekiqExt::RedisInfo::Web,
  tab: "Redis",
  index: "redis_info",
  asset_urls: ["/redis_info/css", "/redis_info/js"],
  root: SidekiqExt::RedisInfo::Web::ROOT,
  cache_for: 86400)

If we assume that ROOT/assets, ROOT/locales, ROOT/views is a directory convention we can rely on.

[markets]

Much simpler in my opinion 👌

In general I feel that: Conventions > Configuration.

I understand your concerns about some defaults, like caching, but since this panel is not critical or public facing, probably any sensible default is fine (and anyway, we can keep the flags so anyone is able to override them if needed).

[mperham]

Here's the latest API from the (great!) feedback so far:

Sidekiq::Web.register(SidekiqExt::RedisInfo::Web,
  name: "redis_info",
  tab: ["Redis"],              # The name on your Tab(s)
  index: ["redis_info"],       # The path to the root page(s) of your extension within the Web UI, usually "/sidekiq/" + index
  root_dir: SidekiqExt::RedisInfo::Web::ROOT, # root directory for all web ui content
  asset_paths: ["css", "js"],  # Paths within {root}/assets/{name} to serve static assets
  cache_for: 86400            # Enable http caching for one day of static assets
) do |sidekiq_web|
  # you can add your own middleware or additional settings here
end

Ideally extensions have a directory layout like so:

web/ <-- root
  locales/
  views/
  assets/
    {name}/
      js/
      css/
      fonts/
      img/

Assets must have {name} in the path in order to prevent asset collisions between different extensions. An example URL for an asset: http://localhost:3000/sidekiq/redis_info/js/script.js Without redis_info, that js/script.js could belong to any extension.

Tabs/Index can now be Arrays because I noticed sidekiq-unique-jobs adds multiple Tabs. Locales are automatically added if Sidekiq sees a {root}/locales directory.

[markets]

Nice job @mperham 👍 Really like this version!

[mperham]

Ok, I'm happy with this PR as is. Any further feedback? cc @mhenrixon

[mhenrixon]

This looks great to me! Solves more than a few of the issues I've had reported 👍