Add static webpack etag support

Webpack (which is what vue uses to compress its HTML) is capable of
generating hashes of files when it produces the dist files[1].

This gets generated in the form of
<filename>.<hash>.<extension>

This commit attempts to detect these patterns, and enable etag caching
to speed up webui load times.  It detects these patterns, grabs the hash
for the file, and returns it in the Etag header[2].

The behavior is implemented such that:
If the file has an etag, the etag header is returned.
If the request has an If-None-Match header, and that header matches,
only 304 is returned.

Tested:
Tests were run on qemu S7106 bmcweb with default error logging level,
and HTTP/2 enabled, along with svg optimization patches.

Run scripts/generate_auth_certificate.py to set up TLS certificates.
(valid TLS certs are required for HTTP caching to work properly in some
browsers).
Load the webui.  Note that DOM load takes 1.10 seconds, Load takes 1.10
seconds, and all requests return 200 OK.
Refresh the GUI.
Note that most resources now return 304, and DOM time is reduced to
279 milliseconds and load is reduced to 280 milliseconds.  DOM load
(which is what the BMC has control over) is decreased by a factor of
3-4X.
Setting chrome to "Fast 5g" throttling in the network tab shows a more
pronounced difference, 1.28S load time vs 3.96S.

BMC also shows 477KB transferred on the wire, versus 2.3KB
transferred on the wire.  This has the potential to significantly
reduce the load on the BMC when the webui refreshes.

[1] https://webpack.js.org/guides/caching/
[2] https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag

Change-Id: I68aa7ef75533506d98e8fce10bb04a494dc49669
Signed-off-by: Ed Tanous <ed@tanous.net>

2 files changed, 67 insertions, 4 deletions

diff --git a/include/security_headers.hpp b/include/security_headers.hpp
index c0855f439d..2a2eb40d7d 100644
--- a/include/security_headers.hpp
+++ b/include/security_headers.hpp
@@ -16,8 +16,11 @@ inline void addSecurityHeaders(const crow::Request& req [[maybe_unused]],
                                                  "includeSubdomains");
 
     res.addHeader(bf::pragma, "no-cache");
-    res.addHeader(bf::cache_control, "no-store, max-age=0");
 
+    if (res.getHeaderValue(bf::cache_control).empty())
+    {
+        res.addHeader(bf::cache_control, "no-store, max-age=0");
+    }
     res.addHeader("X-Content-Type-Options", "nosniff");
 
     std::string_view contentType = res.getHeaderValue("Content-Type");
diff --git a/include/webassets.hpp b/include/webassets.hpp
index c5c7228ede..4bcc8cb69b 100644
--- a/include/webassets.hpp
+++ b/include/webassets.hpp
@@ -25,6 +25,37 @@ struct CmpStr
     }
 };
 
+inline std::string getStaticEtag(const std::filesystem::path& webpath)
+{
+    // webpack outputs production chunks in the form:
+    // <filename>.<hash>.<extension>
+    // For example app.63e2c453.css
+    // Try to detect this, so we can use the hash as the ETAG
+    std::vector<std::string> split;
+    bmcweb::split(split, webpath.filename().string(), '.');
+    BMCWEB_LOG_DEBUG("Checking {} split.size() {}", webpath.filename().string(),
+                     split.size());
+    if (split.size() < 3)
+    {
+        return "";
+    }
+
+    // get the second to last element
+    std::string hash = split.rbegin()[1];
+
+    // Webpack hashes are 8 characters long
+    if (hash.size() != 8)
+    {
+        return "";
+    }
+    // Webpack hashes only include hex printable characters
+    if (hash.find_first_not_of("0123456789abcdefABCDEF") != std::string::npos)
+    {
+        return "";
+    }
+    return std::format("\"{}\"", hash);
+}
+
 inline void requestRoutes(App& app)
 {
     constexpr static std::array<std::pair<const char*, const char*>, 17>
@@ -99,6 +130,9 @@ inline void requestRoutes(App& app)
                 contentEncoding = "gzip";
             }
 
+            std::string etag = getStaticEtag(webpath);
+
+            bool renamed = false;
             if (webpath.filename().string().starts_with("index."))
             {
                 webpath = webpath.parent_path();
@@ -107,6 +141,7 @@ inline void requestRoutes(App& app)
                     // insert the non-directory version of this path
                     webroutes::routes.insert(webpath);
                     webpath += "/";
+                    renamed = true;
                 }
             }
 
@@ -147,9 +182,9 @@ inline void requestRoutes(App& app)
             }
 
             app.routeDynamic(webpath)(
-                [absolutePath, contentType, contentEncoding](
-                    const crow::Request&,
-                    const std::shared_ptr<bmcweb::AsyncResp>& asyncResp) {
+                [absolutePath, contentType, contentEncoding, etag,
+                 renamed](const crow::Request& req,
+                          const std::shared_ptr<bmcweb::AsyncResp>& asyncResp) {
                 if (contentType != nullptr)
                 {
                     asyncResp->res.addHeader(
@@ -163,6 +198,31 @@ inline void requestRoutes(App& app)
                         contentEncoding);
                 }
 
+                if (!etag.empty())
+                {
+                    asyncResp->res.addHeader(boost::beast::http::field::etag,
+                                             etag);
+                    // Don't cache paths that don't have the etag in them, like
+                    // index, which gets transformed to /
+                    if (!renamed)
+                    {
+                        // Anything with a hash can be cached forever and is
+                        // immutable
+                        asyncResp->res.addHeader(
+                            boost::beast::http::field::cache_control,
+                            "max-age=31556926, immutable");
+                    }
+
+                    std::string_view cachedEtag = req.getHeaderValue(
+                        boost::beast::http::field::if_none_match);
+                    if (cachedEtag == etag)
+                    {
+                        asyncResp->res.result(
+                            boost::beast::http::status::not_modified);
+                        return;
+                    }
+                }
+
                 // res.set_header("Cache-Control", "public, max-age=86400");
                 if (!asyncResp->res.openFile(absolutePath))
                 {