Cannot submit front-end from embedded within an iframe - Support Forums

This topic has 8 replies, 3 voices, and was last updated 1 year, 3 months ago by Przemek.

Creator

Topic
August 21, 2020 at 3:06 PM #21377
Resolved Przemek
Participant
Hello!

I cannot submit front-end form which is embedded within an iframe.
(I have a central website storing form submissions and an iframe with the form on multiple dependent sites. I use almost empty template doing the shortcode inside)
It concerns both normal and Ajax forms. I'm pretty sure it worked some time in the past.

First I suspected that the issue may be connected with cross-site security policy applied this year in browsers but I couldn't confirm it.

Idea: what about setting session cookie in MBFS with secure param when https?
session_set_cookie_params('3600', 'mydomain.com', (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off')? true : false, true);

Well it overcame some console warnings about cookie security, but did not fix submission.

Also, when the form is set to Ajax and I look at the Chrome console it shows an error:
```
frontend-submission.js?ver=3.0.0:1 Uncaught TypeError: Cannot read property 'message' of undefined
    at Object.<anonymous> (frontend-submission.js?ver=3.0.0:1)
    at i (jquery.js?ver=1.12.4-wp:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4-wp:2)
    at x (jquery.js?ver=1.12.4-wp:4)
    at XMLHttpRequest.c (jquery.js?ver=1.12.4-wp:4)
```
marking the part m(a.data.message as the point where bug occurs.

The same form accessed directly (not within an iframe) works perfectly.

Could you test your plugin in such use case?

Thank you.
Creator

Topic

Viewing 8 replies - 1 through 8 (of 8 total)

Author

Replies
August 21, 2020 at 3:14 PM #21378

Przemek
Participant

By the way, I'm using Metabox All in One and it claims about the missing CSS file:

https://(...)/wp-content/plugins/meta-box-aio/vendor/meta-box/mb-frontend-submission/assets/css/frontend-submission.css?ver=2.0.0

August 21, 2020 at 4:45 PM #21385

Long Nguyen
Moderator

Hi,

I'm using WordPress 5.5, Meta Box 5.3.3, Meta Box AIO 1.11.18 and theme Twenty Twenty. Just submit a post via a frontend submission form embedded in the <iframe> tag but not see any issue https://www.loom.com/share/2092f9d1e9494b6c8553e42b0e1901bf.

Could you please deactivate all plugins except Meta Box, Meta Box AIO and switch to the default theme of WordPress (Twenty Twenty) then check the issue again?

August 21, 2020 at 7:10 PM #21388

Przemek
Participant

Hello!

Thank you for your testing.

Actually, I should have check it and mention that the iframe embedded on the host site works for me as well.

However, the story is about the iframes embedded under different domains than that where MB is installed. (Perhaps it should be something different than "localhost" to reproduce the case; I use 2 domains in Local by Flywheel app like primary-site.local and secondary-site.local.

August 22, 2020 at 8:59 AM #21395

Long Nguyen
Moderator

Hi,

The “Same Origin” (same site) policy of the Chrome browser limits access of windows and frames to each other.
https://developer.chrome.com/extensions/xhr
https://javascript.info/cross-window-communication

I've tried to submit via Firefox and see it works. Could you please confirm this?

Also, it's not the Meta Box's issue itself so I mark this topic as resolved.

August 22, 2020 at 12:56 PM #21398

Przemek
Participant

Did you test with a non-Ajax form as well?

I can for example add comment to the host site but I cannot submit MBFS form. It just reloads.

August 24, 2020 at 6:35 PM #21432

Przemek
Participant

After investigation I found that the issue is caused by the fact that MBFS form page loading in iframe tries to set up PHP session cookie. It could be secure cookie under https - then it would be solvable in Chrome - but Safari blocks all 3-party cookies by default anyway.

I don't know if MBFS really, really needs this session cookie, however, this makes my setup impossible to implement with MB causing me to be very sad...

August 25, 2020 at 10:00 AM #21444

Anh Tran
Keymaster

Hi,

MBFS doesn't use cookie. It uses only PHP session (which stays in the server). So, I think it's not a problem with cookie or browser restriction.

If submitting via Ajax, there might be issue with CORS which doesn't allow to send Ajax request from a domain to another. It's a security feature for the web (you can read more about it here). If this is the case, you can set headers on the origin website to accept Ajax request from other domains.

I'll check more with that. Probably browsers have their restriction that we need to investigate.

August 25, 2020 at 1:09 PM #21445

Przemek
Participant

Hello,

Thank you for looking at this.

The page (being within an iframe; let's call it "primary" page) with form tries to create PHPSESSID cookie when opened on "secondary" page. As for now it works in Firefox, doesn't work in Chrome (session, when https, should be started with params: 'Secure' => 1 'SameSite' => 'None') and doesn't work in Safari (is blocking third party cookies like this one PHPSESSID by default).

As the form submission relies on this session cookie, I think nothing can be done to override Safari policy here.
Author

Replies

Viewing 8 replies - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.