diff --git a/docs/guides/web-security.md b/docs/guides/web-security.md
index abfb37cc..3ea6d656 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/examples/web_component/BUILD b/mesop/examples/web_component/BUILD
index e019d752..5ae3fa6a 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 00000000..e69de29b
diff --git a/mesop/server/static_file_serving.py b/mesop/server/static_file_serving.py
index 32433277..1e6d24f7 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 00000000..dddfa733
--- /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);
+});