Fix web component static file serving

docs/guides/web-security.md

@@ -1,8 +1,12 @@
 # Web Security
 
-Mesop by default configures its apps to follow a set of web security best practices.
+## Static file serving
 
-## How
+Mesop allows serving JS and CSS files located within the Mesop app's file subtree to support [web components](../web-components/index.md).
+
+**Security Warning:** Do not place any sensitive or confidential JS and CSS files in your Mesop project directory. These files may be inadvertently exposed and served by the Mesop web server, potentially compromising your application's security.
+
+## JavaScript Security
 
 At a high-level, Mesop is built on top of Angular which provides [built-in security protections](https://angular.io/guide/security) and Mesop configures a strict [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
 

mesop/examples/web_component/BUILD

@@ -7,7 +7,10 @@ package(
 py_library(
     name = "web_component",
     srcs = glob(["*.py"]),
-    data = glob(["*.js"]),
+    data = glob([
+        "*.js",
+        "*.css",
+    ]),
     deps = [
         "//mesop",
         "//mesop/examples/web_component/async_action",

mesop/server/static_file_serving.py

@@ -96,8 +96,19 @@ def serve_web_components(path: str):
     serving_path = (
       get_runfile_location(path)
       if has_runfiles()
-      else os.path.join(os.getcwd(), path)
+      else safe_join(os.getcwd(), path)
     )
+
+    file_name = os.path.basename(path)
+    file_extension = os.path.splitext(file_name)[1].lower()
+    allowed_extensions = {".js", ".css"}
+    if file_extension not in allowed_extensions:
+      raise MesopException(
+        f"Unexpected file type: {file_extension}. Only {', '.join(allowed_extensions)} files are allowed."
+      )
+
+    if not serving_path:
+      raise MesopException("Unexpected request to " + path)
     return send_file_compressed(
       serving_path,
       disable_gzip_cache=disable_gzip_cache,

mesop/tests/e2e/web_components/web_component_serving_test.ts

@@ -0,0 +1,20 @@
+import {test, expect} from '@playwright/test';
+
+test('web components serving blocks non-js/css files', async ({page}) => {
+  const response = await page.goto(
+    '/__web-components-module__/mesop/mesop/examples/web_component/quickstart/counter_component.py',
+  );
+  expect(response!.status()).toBe(500);
+});
+
+test('web components serving allows js and css files', async ({page}) => {
+  const jsResponse = await page.goto(
+    '/__web-components-module__/mesop/mesop/examples/web_component/quickstart/counter_component.js',
+  );
+  expect(jsResponse!.status()).toBe(200);
+
+  const cssResponse = await page.goto(
+    '/__web-components-module__/mesop/mesop/examples/web_component/testing.css',
+  );
+  expect(cssResponse!.status()).toBe(200);
+});