test(iframes): Add X-Frame-Options: DENY (microsoft#3170) (#1)

This changeset adds tests the more closely match the reported scenario in microsoft#3170. Firefox, both headless and headfull pass completetly in all cases. The other browsers (both headless and headfull) report a successful click (i.e. they get past the await `button.click()`) but fail to pass the navigation check, except for Chromium HeadFULL with a fixed div which fails to even do the click. NB: If you perform this test manually in the production version of Firefox (78.0.2), the navigation to the Wikipedia login page will be blocked due to X-Frame-Options: DENY. The iframe will load on localhost, but clicking login will get you a an error about X-Frame-Options. So, in some ways, even though this test is "passing" for FFOX, in a traditional user environment we'd expect it to fail.
rwoll · Jul 27, 2020 · ab50b6c · ab50b6c
1 parent 46ce980
commit ab50b6c
Showing 1 changed file with 88 additions and 0 deletions.
diff --git a/test/click.jest.js b/test/click.jest.js
@@ -362,6 +362,94 @@ describe('Page.click', function() {
     const msg = await clickNotification;
     expect(msg).toBe("47");
   })
+  it.only(FFOX)('should click and navigate to a x-frame-options:DENY link in fixed position div', async({page, server}) => {
+    server.setRoute('/login-with-x-frame-options-deny.html', async (req, res) => {
+      res.setHeader('Content-Type', 'text/html');
+      res.setHeader('X-Frame-Options', 'DENY');
+      res.end();
+    });
+
+    server.setRoute('/wikipedia.html', async(req, res) => {
+      res.setHeader('Content-Type', 'text/html');
+      res.end(`
+      <!DOCTYPE html>
+      <html>
+        <body>
+          <a id="pt-login" href="/login-with-x-frame-options-deny.html">login</a>
+        </body></html>
+      `)
+    })
+
+    server.setRoute('/wrapper.html', async(req, res) => {
+      res.setHeader('Content-Type', 'text/html');
+      res.end(`
+      <!DOCTYPE html>
+      <html>
+      <body>
+          <div style="position:fixed;top:300px;left:300px;width:400px;height:400px;">
+              <iframe src="${server.CROSS_PROCESS_PREFIX + '/wikipedia.html'}"  width="100%" height="100%" > </iframe>
+          </div>
+      </body></html>
+      `)
+    })
+
+    await page.goto(server.PREFIX + '/wrapper.html')
+    const loggedIn = new Promise(fulfull => {
+      page.on('framenavigated', (frame) => {
+        if (frame.url().endsWith('/login-with-x-frame-options-deny.html')) {
+          fulfull(frame.url());
+        }
+      })
+    });
+    const frame = page.frames()[1];
+    const button = await frame.$('#pt-login');
+    await button.click();
+    expect(await loggedIn).toBeTruthy();
+  })
+  it.only(FFOX)('should click and navigate to a x-frame-options:DENY link', async({page, server}) => {
+    server.setRoute('/login-with-x-frame-options-deny.html', async (req, res) => {
+      res.setHeader('Content-Type', 'text/html');
+      res.setHeader('X-Frame-Options', 'DENY');
+      res.end();
+    });
+
+    server.setRoute('/wikipedia.html', async(req, res) => {
+      res.setHeader('Content-Type', 'text/html');
+      res.end(`
+      <!DOCTYPE html>
+      <html>
+        <body>
+          <a id="pt-login" href="/login-with-x-frame-options-deny.html">login</a>
+        </body></html>
+      `)
+    })
+
+    server.setRoute('/wrapper.html', async(req, res) => {
+      res.setHeader('Content-Type', 'text/html');
+      res.end(`
+      <!DOCTYPE html>
+      <html>
+      <body>
+          <div>
+              <iframe src="${server.CROSS_PROCESS_PREFIX + '/wikipedia.html'}"  width="100%" height="100%" > </iframe>
+          </div>
+      </body></html>
+      `)
+    })
+
+    await page.goto(server.PREFIX + '/wrapper.html')
+    const loggedIn = new Promise(fulfull => {
+      page.on('framenavigated', (frame) => {
+        if (frame.url().endsWith('/login-with-x-frame-options-deny.html')) {
+          fulfull(frame.url());
+        }
+      })
+    });
+    const frame = page.frames()[1];
+    const button = await frame.$('#pt-login');
+    await button.click();
+    expect(await loggedIn).toBeTruthy();
+  })
   it('should click the button with deviceScaleFactor set', async({browser, server}) => {
     const context = await browser.newContext({ viewport: { width: 400, height: 400 }, deviceScaleFactor: 5 });
     const page = await context.newPage();