Skip to content

Manipulation: Respect script crossorigin attribute in DOM manipulation #4563

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

Merged
merged 23 commits into from
Sep 22, 2020

Conversation

gaohuia
Copy link
Contributor

@gaohuia gaohuia commented Dec 10, 2019

Summary

jQuery does not respect the crossOrigin attribute on the script tag #4542

Checklist

Sorry, something went wrong.

@jsf-clabot
Copy link

jsf-clabot commented Dec 10, 2019

CLA assistant check
All committers have signed the CLA.

@mgol mgol added this to the 3.5.0 milestone Dec 10, 2019
@mgol
Copy link
Member

mgol commented Dec 11, 2019

Thanks for the PR, I'll have a closer look later. In the meantime, please sign our CLA, this is a requirement for us moving forwards with the PR.

Copy link
Member

@jaubourg jaubourg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are some code styles I'm not sure about in the unit tests. I'm not the best to judge those though.

As for the patch itself, it looks good to me.

@gaohuia
Copy link
Contributor Author

gaohuia commented Dec 23, 2019

Thanks for your explaination.

@gaohuia gaohuia requested a review from mgol December 23, 2019 03:25
@gaohuia gaohuia requested a review from jaubourg January 8, 2020 13:58
Copy link
Member

@mgol mgol left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is looking good! Just a few final comments.

Copy link
Member

@mgol mgol left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I found some issues, please see newest comments.

@mgol mgol removed the Needs review label Jan 8, 2020
@mgol
Copy link
Member

mgol commented Jan 10, 2020

@gaohuia Your PR now contains my cherry-picked PRs... Can you instead rebase your PR over current master so that it only contains your code? My commits should disappear then:

git fetch --all --tags -p
git rebase origin/master

If your upstream is named differently than origin, substitute the name.

In the future, it's a good idea to not modify code on the master branch but keep master synced with upstream instead and use a different branch for PRs. See this link for more info:
https://contribute.jquery.org/commits-and-pull-requests/#never-commit-on-master

This is for the future sake only, let's keep this PR as it is as you can't change the source branch when the PR is open.

@mgol
Copy link
Member

mgol commented Jan 15, 2020

@gaohuia You can see that jQuery Slim tests failed on your PR (see the Travis link). Your unit test should be moved to unit/ajax.js where tests related to the ajax module should lie. Then that test will be excluded for the Slim build & it should pass again.

Also, remember about #4563 (comment) - we still need to get the tests to succeed in IE, Edge & Safari.

@gaohuia
Copy link
Contributor Author

gaohuia commented Jan 17, 2020

Hi @mgol I didn't see any failed tests in safari 13, can you try again?

@gaohuia gaohuia requested a review from mgol January 17, 2020 11:41
@mgol
Copy link
Member

mgol commented Jan 17, 2020

@gaohuia Yes, Safari 13 is still failing. Note that Travis only runs tests on Chrome & Firefox, you need to test on the other browsers manually.

See e.g. Safari 13:
Screen Shot 2020-01-17 at 23 03 56
and Edge 18:
Screen Shot 2020-01-17 at 23 09 56

@mgol
Copy link
Member

mgol commented Jan 17, 2020

Hmm, the above test results were achieved in our PHP setup, the one that runs on our TestSwarm as well: http://swarm.jquery.org/project/jquery

When I run it on the Karma setup, by running grunt karma:chrome-debug, opening http://localhost:9876 in Safari & clicking "DEBUG", all tests pass.

However, in Chrome & Firefox tests pass in both modes.

@mgol
Copy link
Member

mgol commented Jan 17, 2020

I figured out the issue. Karma runs on http://localhost:9876 so a replacement of localhost to 127.0.0.1 worked fine there. However, on my local PHP setup I'm relying on virtual hosts so the page runs on http://jquery.l so the replacement failed and the loaded script was, in effect, using the same domain. Apparently, in Chrome & Firefox that works but Safari 13 & Edge 18 just don't execute the script.

Ultimately, we cannot rely on the URL where the tests are loaded to be localhost. On our TestSwarm, for example, tests are loaded via URLs like:
http://builds.jenkins.jquery.com/jquery/ff2819911da6cbbed5ee42c35d695240f06e65e3/test/index.html
Replacing it via an IP won't work.

We need to remove the replacement of localhost to 127.0.0.1 from the test. (This part is out of date, see my later comments) The mere inclusion of the crossorigin attribute makes the script loaded with the Origin header so the current test checking whether corsCallback was invoked with true would fail without current source changes; that may serve as some kind of a check. Unfortunately, if we cut out the Access-Control-Allow-Methods & Access-Control-Allow-Origin the test still passes; I'm not sure if there's a way around that, though, unfortunately.

Copy link
Member

@mgol mgol left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See some more comments.

@gaohuia
Copy link
Contributor Author

gaohuia commented Sep 20, 2020

@mgol can you tell me how to run the karma tests with the real mock.php (I mean run it with php)? I added the same logic to "mock.php", but just not sure if it works fine.

@mgol
Copy link
Member

mgol commented Sep 20, 2020

@gaohuia PHP tests are not run via Karma. To have all tests passing, you need to have Apache or nginx configured with PHP and open /test/?hidepassed in a browser, tests will run.

If this is too much, you can run a quick static PHP server in the jQuery directory:

php -S 0.0.0.0:7001

and then open http://localhost:7001/test/?hidepassed. Note that with this basic setup some tests will fail as PHP can only handle one request at a time and some tests depend on being able to run requests in parallel. But it might be enough for your purposes.

@gaohuia
Copy link
Contributor Author

gaohuia commented Sep 21, 2020

Thanks @mgol , i have nginx+fpm locally. the mock.php seems working good.

TomZhuPlanetart and others added 2 commits September 21, 2020 22:14
Co-authored-by: Michał Gołębiowski-Owczarek <m.goleb@gmail.com>
Copy link
Member

@mgol mgol left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me! Just one suggestion.

In my testing, the new test succeeds on BrowserStack in IE 11 in Windows 10 but not in Windows 7. I'm not sure why, maybe the Windows 7 copy is not up to date. We'll worry about that when/if we start testing on Karma in IE.

Thanks for following up with our code review remarks for this past months!

One note, @gaohuia: we're treating this as a potentially breaking change as code using the crossorigin attribute on same-domain scripts would now switch to using the script tag injection method which is asynchronous. Because of that, for now we'll only land it on the master branch which is the future jQuery 4.0. We can consider backporting this change to the 3.x-stable branch if this incompatibility is resolved, maybe by only passing scriptAttrs in jQuery._evalUrl for cross-domain scripts? We need to be careful here, though, so at least for now it's 4.0-only.

gaohuia and others added 2 commits September 22, 2020 21:29
Co-authored-by: Michał Gołębiowski-Owczarek <m.goleb@gmail.com>
@mgol mgol changed the title jQuery does not respect the crossOrigin attribute on the script tag #4542 Manipulation: Respect script crossorigin attribute in DOM manipulation Sep 22, 2020
@mgol mgol merged commit 15ae361 into jquery:master Sep 22, 2020
@mgol
Copy link
Member

mgol commented Sep 22, 2020

Landed, thanks!

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

Successfully merging this pull request may close these issues.

7 participants