From 17fb769d6a91f0a8cbccfab18f64977b158a6a31 Mon Sep 17 00:00:00 2001
From: Will Chen <willchen90@gmail.com>
Date: Wed, 11 Sep 2024 14:25:41 -0700
Subject: [PATCH] Fix web component static file serving (#942)

---
 docs/guides/web-security.md                   |  8 ++++++--
 mesop/components/input/e2e/input_test.ts      |  6 ++++--
 mesop/examples/web_component/BUILD            |  5 ++++-
 mesop/examples/web_component/testing.css      |  0
 mesop/server/static_file_serving.py           | 13 +++++++++++-
 .../web_component_serving_test.ts             | 20 +++++++++++++++++++
 6 files changed, 46 insertions(+), 6 deletions(-)
 create mode 100644 mesop/examples/web_component/testing.css
 create mode 100644 mesop/tests/e2e/web_components/web_component_serving_test.ts

diff --git a/docs/guides/web-security.md b/docs/guides/web-security.md
index abfb37ccc..3ea6d656e 100644
--- a/docs/guides/web-security.md
+++ b/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).
 
diff --git a/mesop/components/input/e2e/input_test.ts b/mesop/components/input/e2e/input_test.ts
index f675f79a3..3e01e4d11 100644
--- a/mesop/components/input/e2e/input_test.ts
+++ b/mesop/components/input/e2e/input_test.ts
@@ -44,7 +44,8 @@ test('test input on_blur works', async ({page}) => {
   ).toBeVisible();
 });
 
-test('test textarea shortcuts', async ({page}) => {
+// TODO: unskip this test once the flakiness is fixed
+test.skip('test textarea shortcuts', async ({page}) => {
   await page.goto('/components/input/e2e/textarea_shortcut_app');
   const textbox = page.getByLabel('Textarea');
   await textbox.fill('hi');
@@ -89,7 +90,8 @@ test('test textarea shortcuts', async ({page}) => {
   ).toBeVisible();
 });
 
-test('test native textarea shortcuts', async ({page}) => {
+// TODO: unskip this test once the flakiness is fixed
+test.skip('test native textarea shortcuts', async ({page}) => {
   await page.goto('/components/input/e2e/textarea_shortcut_app');
   const textbox = page.getByPlaceholder('Native textarea');
 
diff --git a/mesop/examples/web_component/BUILD b/mesop/examples/web_component/BUILD
index e019d752d..5ae3fa6a3 100644
--- a/mesop/examples/web_component/BUILD
+++ b/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",
diff --git a/mesop/examples/web_component/testing.css b/mesop/examples/web_component/testing.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/mesop/server/static_file_serving.py b/mesop/server/static_file_serving.py
index 324332772..1e6d24f77 100644
--- a/mesop/server/static_file_serving.py
+++ b/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,
diff --git a/mesop/tests/e2e/web_components/web_component_serving_test.ts b/mesop/tests/e2e/web_components/web_component_serving_test.ts
new file mode 100644
index 000000000..dddfa733a
--- /dev/null
+++ b/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);
+});