From f08afc19d0bf435f46d886e3507b2a25d84bb368 Mon Sep 17 00:00:00 2001 From: Will Chen Date: Wed, 11 Sep 2024 13:33:57 -0700 Subject: [PATCH 1/2] Fix web component static file serving --- docs/guides/web-security.md | 8 ++++++-- 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 +++++++++++++++++++ 5 files changed, 42 insertions(+), 4 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/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); +}); From 120f41ccc78412ccc9b62afe05cee8d32bc04db7 Mon Sep 17 00:00:00 2001 From: Will Chen Date: Wed, 11 Sep 2024 14:02:30 -0700 Subject: [PATCH 2/2] skip flaky test --- mesop/components/input/e2e/input_test.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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');