Multisite WordPress trouble: Mautic-form iframe error 'refused to connect', 'please wait' hanging Mautic form submission

Product Support
1

Your software
My Mautic version is: 2.15.1
My PHP version is: 7.1.28

Your problem
My problem is: the email-subscription Mautic form embedded in the WordPress web pages do not work properly—it either doesn’t show up at all, or it hangs with ‘please wait’ message when submitted, and fails to display the pre-assigned form submission message—although the contact gets created in Mautic.

These errors are showing in the log: No error in the Mautic log.

Steps I have tried to fix the problem:

I have read the following relevant references.

https://forum.mautic.org/t/form-submission-hanging-on-the-please-wait/10439
https://forum.mautic.org/t/problem-with-integration-form-mautic-and-wordpress/5627
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
https://stackoverflow.com/questions/38744953/apache-x-frame-options-allow-from-multiple-domains

I have added the following in the Apache server configuration file, /opt/bitnami/apache2/conf/httpd.conf, in two places.

Header always append X-Frame-Options "ALLOW-FROM https://mail.asianamericanman.com/"
Header always append X-Frame-Options "ALLOW-FROM https://mail.intellectualwomanhood.com/"
Header always append X-Frame-Options "ALLOW-FROM https://mail.intellectualmanhood.com/"

The following settings are now present in the Apache server configuration file.

<IfModule headers_module>
    <IfVersion >= 2.4.7 >
        Header always setifempty X-Frame-Options SAMEORIGIN
        Header always append X-Frame-Options "ALLOW-FROM https://mail.asianamericanman.com/"
        Header always append X-Frame-Options "ALLOW-FROM https://mail.intellectualwomanhood.com/"
        Header always append X-Frame-Options "ALLOW-FROM https://mail.intellectualmanhood.com/"
    </IfVersion>
    <IfVersion < 2.4.7 >
        Header always merge X-Frame-Options SAMEORIGIN
        Header always append X-Frame-Options "ALLOW-FROM https://mail.asianamericanman.com/"
        Header always append X-Frame-Options "ALLOW-FROM https://mail.intellectualwomanhood.com/"
        Header always append X-Frame-Options "ALLOW-FROM https://mail.intellectualmanhood.com/"
    </IfVersion>
    RequestHeader unset Proxy
</IfModule>

I used the following command to restart the Apache server.

sudo /opt/bitnami/ctlscript.sh restart apache

In Google Chrome, I’ve turned on Developer Tools (Ctrl+Shift+I), selected the Network tab, and visited the web page with the embedded Mautic form. The Response Headers section of the website shows the following.

X-Frame-Options: SAMEORIGIN, ALLOW-FROM https://mail.asianamericanman.com/, ALLOW-FROM https://mail.intellectualwomanhood.com/, ALLOW-FROM https://mail.intellectualmanhood.com/

The above seems to show that the additional X-Frame-Options work correctly.

However, the problem still persists.

Additional details*

Apache version is 2.4.39.

The websites are on an AWS Lightsail instance with Bitnami WordPress Multisite 5.1.1-2. The WordPress version is 5.2.3.

The Mautic installations are on an AWS Lightsail instance with Bitnami LAMP 7.1.28-0.

The iframe Mautic-form code, when included in an WordPress page, shows ‘mail.intellectualwomanhood.com refused to connect.’ error on the WordPress web page, and does not display the Mautic form.
<iframe src="//mail.intellectualwomanhood.com/iwmautic/form/13" width="300" height="300"><p>Your browser does not support iframes.</p></iframe>

The Mautic web page included in the iframe element, https://mail.intellectualwomanhood.com/iwmautic/form/13, shows up fine when directly visited, so it doesn’t seem like a Mautic problem. When the form is submitted on https://mail.intellectualwomanhood.com/iwmautic/form/13, it doesn’t hang, and the form-submission message is properly displayed.

All the other means of embedding the Mautic form (automatic JavaScript, manual JavaScript and CSS and HTML inclusion, and Mautic-form WordPress shortcode), all result in the ‘please wait’ hanging Mautic form submission problem (without any Mautic error in the Mautic log).

It looks like the Apache web server is blocking all the external data (the iframe and the data coming from the Mautic instance). However, embedded YouTube videos on the WordPress web pages work fine, so likely the iframe problem is specific to Mautic.

The URL of the WordPress website is https://intellectualwomanhood.com; the URL of the Mautic instance is https://mail.intellectualwomanhood.com/iwmautic.

In the Mautic Configuration, Site URL is set to https://mail.intellectualwomanhood.com/iwmautic.

In the Mautic Configuration, CORS Settings: Restrict Domains is set to yes, and https://intellectualwomanhood.com and https://www.intellectualwomanhood.com are set as the valid domains.

2

I solved this problem.

The solution requires quite a bit of elaboration for full understanding and justification.

The problem of the embedded iframe Mautic form on my WordPress website home page not showing up, and the hanging “please wait” Mautic form submission problem on my WordPress website, were all caused by the X-Frame-Options header setting in the configuration file of my Mautic Apache webserver.

The X-Frame-Options header, when delivered by your webserver to a web browser, indicates to the web browser which domains or websites should be allowed to embed the contents of your webserver.

For example, if you set the X-Frame-Options header setting to deny or sameorigin, in your webserver configuration file, other websites will not be able to embed the contents of your webserver in their web pages, because web browsers will block out the contents of your website that are embedded in the web pages of other websites.

Moreover, for whatever reason, if you set the X-Frame-Options header setting to deny or sameorigin, in your Mautic webserver configuration file, your Mautic form embedded on another website, such as your WordPress website, will hang when the submit button is pressed, and will keep displaying “Please wait” message. This probably happens because the X-Frame-Options set in your Mautic webserver blocks your WordPress website from getting the Mautic form message to display when the submit button of the embedded Mautic form is pressed.

The ALLOW-FROM option of the X-Frame-Options header can be used to selectively indicate which domains or websites should be allowed to embed and access the contents of your website on their web pages, but this option, as indicated in https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options and https://stackoverflow.com/questions/10658435/x-frame-options-allow-from-in-firefox-and-chrome, is not supported by Google Chrome (as of yet in September, AD 2019).

I have performed a number of tests on my Mautic webserver, and tried several variations of the X-Frame-Options header settings with the ALLOW-FROM option: it all confirmed that ALLOW-FROM option is not supported by Google Chrome.

Since Google Chrome has the biggest web browser market share, using the ALLOW-FROM option of the X-Frame-Options header is completely pointless, since it is not supported by the currently most popular web browser.

The best option to enable iframe Mautic form embedding, and resolve the hanging “Please wait” Mautic form submission problem, is to simply comment out the X-Frame-Options header settings in your Mautic webserver configuration file, such as in the following for the Apache webserver configuration file.

<IfModule headers_module>
    <IfVersion >= 2.4.7 >
        #Header always setifempty X-Frame-Options SAMEORIGIN
    </IfVersion>
    <IfVersion < 2.4.7 >
        #Header always merge X-Frame-Options SAMEORIGIN
    </IfVersion>
    RequestHeader unset Proxy
</IfModule>

The intention of the X-Frame-Options header is good: it is for restricting what domains or websites should be allowed to use the contents or resources of your web server. However, since it is not correctly and broadly implemented by all the current web browsers, it is not an option that you can use, unless you want to block all the other websites from embedding the contents of your website. Since your Mautic contents must be embedded on another website, for your Mautic instance to be useful, your Mautic webserver must not be configured to send the X-Frame-Options header to web browsers (for the maximum web-browser compability).

There is another type of header that is related to X-Frame-Options: Content-Security-Policy. The Content-Security-Policy header tells web browsers which domains or websites should be allowed to display their contents on the web pages of your website.

That is, while the X-Frame-Options header controls which domains or websites can display the contents of your website, the Content-Security-Policy header controls which domains or websites can display their contents on the web pages of your website.

For example, if you add a Content-Security-Policy header in your WordPress Apache webserver configuration file, web browsers will display the embedded contents on your WordPress website’s web pages, only if those contents are from the white-listed domains in your website’s Content-Security-Policy header.

Properly implementing one’s website for the Content-Security-Policy header usage, and properly setting the Content-Security-Policy header in your webserver’s configuration file, can be complicated if your website uses contents from a lot of third-party domains or websites (such as embedded images from another website).

The following are some references on the Content-Security-Policy header.
https://www.w3.org/TR/CSP2/
https://content-security-policy.com/

If there are any technical inaccuracy in any of the above, let me know; I’ll correct it.

2 Likes