tests: add additional tests for loading with sandbox + requiresubdoma…

…iniframe ensure 'requiresubdomainiframe' works, doesn't allow loading directly
webrecorder · Oct 7, 2023 · 220a840 · 220a840
1 parent 3f7b66d
commit 220a840
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -67,7 +67,8 @@
     "build-docs": "bundle install; bundle exec jekyll build",
     "start-dev": "webpack serve --mode development",
     "start-prod": "http-server -p 9990 --cors",
-    "start-test-embed": "cd tests/embed; http-server -p 8020",
+    "test-start-embed": "cd tests/embed; http-server -p 8020",
+    "test-start-sandbox": "cd tests/embed/sandbox; http-server -p 8030",
     "pack": "CSC_IDENTITY_AUTO_DISCOVERY=false electron-builder --publish never",
     "pack-signed": "electron-builder",
     "start-electron": "NODE_ENV=development electron ./dist/electron.js $1",

diff --git a/playwright.config.js b/playwright.config.js
@@ -9,10 +9,16 @@ export default defineConfig({
       reuseExistingServer: !process.env.CI,
     },
     {
-      command: 'yarn run start-test-embed',
+      command: 'yarn run test-start-embed',
       url: 'http://127.0.0.1:8020',
       timeout: 120 * 1000,
       reuseExistingServer: !process.env.CI,
     },
+    {
+      command: 'yarn run test-start-sandbox',
+      url: 'http://127.0.0.1:8030',
+      timeout: 120 * 1000,
+      reuseExistingServer: !process.env.CI,
+    }
   ]
 });
diff --git a/tests/embed/index-sandbox.html b/tests/embed/index-sandbox.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+<head>
+<script src="http://localhost:9990/ui.js"></script>
+<style>
+html, body {
+  background-color: lightgrey;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+</style>
+</head>
+<body>
+
+<replay-web-page embed="replay" src="http://localhost:9990/docs/assets/tweet-example.wacz" url="page:0" sandbox requiresubdomainiframe></replay-web-page>
+
+</body>
+</html>
diff --git a/tests/embed/index.html b/tests/embed/index.html
@@ -1,9 +1,11 @@
+<!doctype html>
 <html>
 <head>
 <script src="http://localhost:9990/ui.js"></script>
 <style>
 body {
   background-color: lightgrey;
+  height: 600px;
 }
 </style>
 </head>

diff --git a/tests/embed/sandbox/index.html b/tests/embed/sandbox/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+<head>
+<style>
+html, body {
+  width: 100%;
+  height: 100%;
+}
+iframe {
+  border: 1px black solid;
+  display: flex;
+  width: 90%;
+  height: 600px;
+}
+</style>
+</head>
+<body>
+
+<iframe src="http://localhost:8020/index-sandbox.html" sandbox="allow-scripts allow-modals allow-forms allow-same-origin allow-downloads"></iframe>
+
+</body>
+</html>
diff --git a/tests/embeds.spec.js b/tests/embeds.spec.js
@@ -18,3 +18,25 @@ test("cross-domain embed is loading", async ({ page }) => {
 
   await expect(res).toContainText("Want to help");
 });
+
+
+test("sandbox + cross-domain embed is loading", async ({ page }) => {
+  await page.goto("http://localhost:8030/");
+
+  const sandboxFrame = page.locator("iframe");
+  await expect(await sandboxFrame.getAttribute("src")).toBe("http://localhost:8020/index-sandbox.html");
+
+  const res = page.frameLocator("iframe").locator("replay-web-page").frameLocator("iframe").locator("replay-app-main wr-coll wr-coll-replay").frameLocator("iframe").frameLocator("iframe#twitter-widget-0").locator("body");
+
+  await expect(res).toContainText("Want to help");
+});
+
+
+test("require subdomain iframe", async ({ page }) => {
+  // load directly, should be blocked
+  await page.goto("http://localhost:8020/index-sandbox.html");
+
+  const res = page.locator("replay-web-page");
+
+  await expect(res).toContainText("Sorry, due to security settings, this ReplayWeb.page embed only be viewed within a subdomain iframe.");
+});