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

Error when requesting blob object urls through XHR #2634

Closed
acostajohn opened this issue May 18, 2021 · 7 comments · Fixed by #2737
Closed

Error when requesting blob object urls through XHR #2634

acostajohn opened this issue May 18, 2021 · 7 comments · Fixed by #2737

Comments

@acostajohn
Copy link

acostajohn commented May 18, 2021

What is your Scenario?

Using XHR to request object urls of type blob: will make hammerhead error out and thus, the request is not made.

I tracked down the exception to this line which expects reqOpts to have a value in the send wrapper, but no values where defined in the open method wrapper because it is a local object url.

Here is where the request options are supposed to be set (xhr.open). This only happens for http and file domains, not for blob which I think makes sense.

XhrSandbox.REQUESTS_OPTIONS.set(this, {

And here in xhr.send it tries to retrieve the request options which never fails for regular requests to http urls, but since those never are set for blob: urls, it fails badly.

if (reqOpts.withCredentials !== this.withCredentials)

What is the Current behavior?

Considering the following snippet:

const blob = new Blob(['this is a text'], { type: 'plain/text' });
const url = URL.createObjectURL(blob);

const xhr = new XMLHttpRequest();

xhr.open('get', url, false);
xhr.addEventListener('load', () => {
    console.log(xhr.responseText);
});

xhr.send(); // <-- this throws an exception: "a is undefined"

Because of the exception, the request is not made.

What is the Expected behavior?

xhr.send(); correctly sends the request and the event listener prints this is a text.

What is your public web site URL?

Your website URL (or attach your complete example):

Your complete app code (or attach your test files):
 
Screenshots:

Steps to Reproduce:

  1. Go to: ...
  2. Execute this command: ...
  3. See the error: ...

Your Environment details:

  • node.js version:
  • browser name and version:
  • platform and version:
  • other:
@github-actions
Copy link

Thank you for submitting this issue. We would love to assist you and diagnose it. However, we need a simple sample that we can easily run on our side in order to replicate the issue and research its cause. Without a sample, we are not able to figure out what's going on and why this issue occurs. We look forward to your response.

@acostajohn
Copy link
Author

Hey, sorry! just added more details. Please let me know if y'all need anything else from my side.

@miherlosev
Copy link
Contributor

Hi @acostajohn

Thank you for the shared information. I've reproduced the issue.

For team
Steps to reproduce:

  • Open the page with the following content:
<html>
	<body>
		<button id="send">Send blob via xhr</button>
		<script>
			var sendBtn = document.getElementById('send');
			
			sendBtn.addEventListener('click', function () {
				const blob = new Blob(['this is a text'], { type: 'plain/text' });
				const url  = URL.createObjectURL(blob);
				const xhr  = new XMLHttpRequest();

				xhr.open('get', url, false);
				
				xhr.addEventListener('load', () => {
					console.log(xhr.responseText);
				});

				xhr.send();
			});
		</script>
	</body>
</html>

in health-monitor and press 'Send blob via xhr' button.

  • the script error will be displayed in the DevTools console tab
    image

@trzopekm
Copy link

Hi, any updates here?

@github-actions
Copy link

No updates yet. Once we get any results, we will post them in this thread.

@kirillsalikhov
Copy link
Contributor

Hello

I want to try to fix this issue, by adding check for reqOpts variable existence in send method override:

// src/client/sandbox/xhr.ts

        overrideFunction(xmlHttpRequestProto, 'send', function (this: XMLHttpRequest, ...args: Parameters<XMLHttpRequest['send']>) {
            //...
            const reqOpts = XhrSandbox.REQUESTS_OPTIONS.get(this);
            
            if (reqOpts && reqOpts.withCredentials !== this.withCredentials)
                XhrSandbox._reopenXhr(this, reqOpts);
            //...
        });

and test

// test/client/fixtures/sandbox/xhr-test.js

test('should handle blob object urls (GH-1397)', function () {
    return new Promise(function (resolve) {
        var xhr = new XMLHttpRequest();
        var blob = new Blob(['this is a text'], { type: 'plain/text' });
        var url = URL.createObjectURL(blob);

        xhr.open('get', url, false);
        xhr.addEventListener('load', function () {
            resolve(xhr);
        });

        xhr.send();
    }).then(function (xhr) {
        strictEqual(xhr.responseText, 'this is a text');
    });
});

@viktoria2506
Copy link

Please submit a Pull Request with the fix. See the Сontribution guide for more information.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants