Fix web component static file serving (#942)

Author: wwwillchen

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/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');
 

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/examples/web_component/testing.css

@@ -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/server/static_file_serving.py

@@ -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);
+});