Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

interception does not work with page.setContent() and relative URLs #4526

Closed
FranckFreiburger opened this issue Jun 5, 2019 · 4 comments
Closed

Comments

@FranckFreiburger
Copy link

FranckFreiburger commented Jun 5, 2019

Steps to reproduce

Tell us about your environment:

  • Puppeteer version: 1.17.0
  • Platform / OS version: Windows 7
  • URLs (if applicable):
  • Node.js version: 11.11.0

What steps will reproduce the problem?

import puppeteer from 'puppeteer'

;(async() => {

	const browser = await puppeteer.launch();
	const page = await browser.newPage();

	await page.setRequestInterception(true);

	page.on('request', interceptedRequest => {

		console.log( 'interceptedRequest:', interceptedRequest.url() )
		interceptedRequest.continue();
	});

	await page.setContent(`
	<html>
	<body>
		<img src="./foo.png">
		<img src="http://localhost/foo.png">
	</body>
	</html>
	`, { waitUntil: ['load'] });

	await browser.close();
})();

What is the expected result?

The output should show that ./foo.png and http://localhost/foo.png are intercepted

What happens instead?

Only http://localhost/foo.png request is intercepted

@aslushnikov
Copy link
Contributor

@FranckFreiburger This happens because the default page is opened on 'about:blank' url. This is a special URL - relative paths are not getting resolved against it, so the first image is not even attempted to be loaded.

If, before doing page.setContent, you do await page.goto('https://example.com'), you'll see both requests in your request interception.

Hope this helps.

@marcusstenbeck
Copy link

@FranckFreiburger Right now I'm polyfilling fetch() to turn relative URLs into absolute for about:blank.

  const browser = await puppeteer.launch(LAUNCH_OPTIONS);
  const page = await browser.newPage();

  // Polyfill fetch so it handles relative URLs in `about:blank`
  await page.evaluate(() => {
    const originalFetch = window.fetch;
    window.fetch = (inputResource, init) => {
      let resource = inputResource;

      // https://regexper.com/#%5E%5C%2F%28%3F!%5C%2F%29.*
      if (
        typeof resource === 'string' &&
        (resource.match(/^\/(?!\/).*/) || resource === '')
      ) {
        resource = `https://self.local${resource}`;
      }

      return originalFetch(resource, init);
    };
  });

@aslushnikov Is there a better way if I don't want to page.goto() but still want to intercept relative URLs?

@aslushnikov
Copy link
Contributor

Is there a better way if I don't want to page.goto() but still want to intercept relative URLs?

Maybe you can use <base> tag - but I'm not really sure. 🤷‍♂️

@marcusstenbeck
Copy link

@aslushnikov I realized that I avoid a lot of headaches by just doing a

page.goto('file://path/to/empty.html')

and using that as a starting point. There is a lot of functionality that's limited in that about:blank page.

vogler added a commit to vogler/syncmine that referenced this issue Aug 27, 2019
page.goto works, page.setContent led to empty links in eval
puppeteer/puppeteer#4526
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants