Missing X-CSRF-Token Header on AJAX POST Request with File Upload

[mvastola]

I'm trying to trace either some sort of conflict on my end (my app is rather complex, albeit not really JS-wise) or a bug in jquery-ujs which I have tentatively traced to the nonBlankFileInputs variable. (That is the bug seems to occur, if this if block is true: https://github.com/rails/jquery-ujs/blob/master/src/rails.js#L477)

Basically, I have a form that sends correct AJAX requests (correct meaning including the X-CSRF-Token header) as long as, and only as long as, its file input field left empty. As soon as a file input field is selected the header is no longer sent (and I think the request is also no longer handled via AJAX).

Some quirky things about this form that may be contributing to this bug are

• I use the simple_form gem instead of the default form_for tags.
• The form itself is loaded by AJAX due to user input, so it isn't present on the page at load time, in case that is causing some event not to bind to it.
• The form loads in a modal box javascript library (called bootbox) which has its own button design, so the way I ended up implementing the submit action is by placing a display: none submit button within the <form> tags and then triggering it with javascript from the bootbox code with $('div.bootbox div.bootbox-body').find('input[type=submit]').first().click();. This has worked perfectly so far though.

Any advice on how I can trace this problem further would be greatly appreciated.

[rafaelfranca]

It is the expected behavior. If the form has file inputs it will fallback to standard POST, so it will not need to send the header.

[mvastola]

But how does the csrf token from the meta tags get included then? And why am I  getting an invalid authenticity token error then?

[rafaelfranca]

The form usually include the authenticity token. Check if it is being included in the form.

[mvastola]

You mean as a hidden input? No. It isn't.

[rafaelfranca]

Yes, the hidden input. So that is why it is not working.

[mvastola]

Iiinteresting.. thanks a ton!

[mvastola]

@rafaelfranca so doing some more investigation into this, I seem to have figured out the source of the problem here.

I'm not sure if you'd like to reopen this issue or if I should make a new one (please advise), but this definitely seems to warrant further discussion/analysis.. Basically, this problem seems to be a case of both the action_view gem and the jquery-ujs gems each thinking that the other is handling the inclusion of the authenticity token when there is a file field in a form is submitted via AJAX. (See https://github.com/rails/rails/blob/621ed494f573c4e37c1f7d37cc8741cc4c502827/actionview/lib/action_view/helpers/form_tag_helper.rb#L20 on lines 20, 31 and 38 for further details.)

According to the source code comments there, a simple workaround would be to set config.action_view.embed_authenticity_token_in_remote_forms = true, but it appears this is intentionally disabled by default (and presumably delegated to this gem by the Rails team) to allow for the fragment caching of forms.

Might I propose solving this conflict by catching submit events for AJAX POST forms with file uploads and creating/updating a hidden authenticity_token input field (from the token in the meta tags) before letting the submission through?

If that route is not chosen, I really think there should at least be better warnings/documentation for this situation, since, AFAIK, there is currently none whatsoever, neither in Rails nor in this gem. (By "warnings", I mean that perhaps an error should be thrown in ActionView if a file_field in a form_for where :remote => true and !config.action_view.embed_authenticity_token_in_remote_forms. This raises the question though as to why this functionality can't just be implemented.)

Please let me know if I should also be creating a concurrent issue in the Rails repository.

[rafaelfranca]

I believe we should take in consideration rendering the hidden field if remote: true and file_field is present. Could you open a PR?

[mvastola]

I can certainly try my hand at it.. Should have one within a week (if not much sooner).

[mvastola]

Should this issue be reopened in the interim in case others have ideas/input?

[mvastola]

@rafaelfranca Wait, to clarify, when you say "rendering the hidden field", are you suggesting doing this at submit-time via JS in jquery-ujs (as I suggested) or inside ActionView?

[rafaelfranca]

Inside action view. It is the best place to know about this case.