Subscriptions Widget Broken Under AMP with Native Template Mode

[macmanx2]

When using AMP 1.0.2 and Jetpack 7.1.1 under WordPress 5.1.1, the Subscribe button in the Subscriptions widget does not function while under AMP's Native template mode.

To reproduce the issue, simply add the "Blog Subscriptions (Jetpack)" widget to your site, make sure that AMP is running under the Native template mode, and attempt to subscribe. You will notice that clicking the Subscribe button does nothing, and the following errors appear in the Console:

Response must contain the AMP-Access-Control-Allow-Source-Origin header: template-impl.js:227:8

Jf template-impl.js:227
<anonymous> viewport-impl.js:1126
assert log.js:349
y log.js:762
Wg action-impl.js:716

Form submission failed: Error: Response must contain the AMP-Access-Control-Allow-Source-Origin header​​​: log.js:187:6

Ha log.js:187
Da log.js:242
error log.js:257
xc amp-form.js:885

The Subscribe button works perfectly under the Paired and Classic template modes, only the Native mode is affected.

Reported at https://wordpress.org/support/topic/jetpack-subscribe-button-stopped-working/

(Apologies if this should have gone under #9730 I didn't see it listed there and am not 100% sure on the protocol.)

[westonruter]

Fix in #11637.

[westonruter]

Actually, I haven't seen the AMP-Access-Control-Allow-Source-Origin issue in my testing. I'll have to look into that. It should be getting sent here:

https://github.com/ampproject/amp-wp/blob/9e1a9d691c6e2baf0be775d38a879b0afacb599c/includes/class-amp-http.php#L271-L311

[westonruter]

@macmanx2 I can't reproduce the AMP-Access-Control-Allow-Source-Origin issue, actually.

In testing a site in native mode, when I submit the subscriptions form, I see a request to:

https://example.com/?_wp_amp_action_xhr_converted=1&__amp_source_origin=https%3A%2F%2Fexample.com

And the response headers include:

access-control-allow-origin: https://example.com
access-control-expose-headers: AMP-Access-Control-Allow-Source-Origin
amp-access-control-allow-source-origin: https://example.com

And there is no such error:

Form submission failed: Error: Response must contain the AMP-Access-Control-Allow-Source-Origin header​​​

[macmanx2]

I can still reproduce this using the latest stables under Twenty Nineteen. Are you using a development version of either?

[westonruter]

I was using the latest stable version of the AMP plugin to test (v1.0.2). I tested with Twenty Seventeen, but the theme shouldn't matter. Can you share details about the environment you tested on? Maybe on Slack?

[macmanx2]

Yeah, can you leave me a DM to remind me? I’m away from deep work until Monday.

[macmanx2]

I forgot I could easily pull this from Health Check, which is hilarious because I recommend it for the same reason every day.

WordPress

Version: 5.1.1
Language: en_US
Permalink structure: /%year%/%monthnum%/%postname%/
Is this site using HTTPS?: No
Can anyone register on this site?: No
Default comment status: closed
Is this a multisite?: No
User Count: 1
Communication with WordPress.org: WordPress.org is reachable
Create loopback requests: The loopback request to your site completed successfully.

Installation size

Uploads Directory: 135.27 MB
Themes Directory: 1.26 MB
Plugins Directory: 25.29 MB
Database size: 2.75 MB
Whole WordPress Directory: 204.05 MB
Total installation size: 206.80 MB

Active Theme

Name: Twenty Nineteen
Version: 1.3
Author: the WordPress team
Author website: https://wordpress.org/
Parent theme: Not a child theme
Supported theme features: automatic-feed-links, title-tag, post-thumbnails, menus, html5, custom-logo, customize-selective-refresh-widgets, wp-block-styles, align-wide, editor-styles, editor-style, editor-font-sizes, editor-color-palette, responsive-embeds, infinite-scroll, jetpack-responsive-videos, jetpack-geo-location, jetpack-content-options, amp, widgets

Must Use Plugins (1)

Health Check Disable Plugins: Version 1.0

Active Plugins (3)

AMP: Version 1.0.2 by WordPress.com VIP, XWP, Google, and contributors
Health Check & Troubleshooting: Version 1.2.6 by The WordPress.org community
Jetpack by WordPress.com: Version 7.1.1 by Automattic

Inactive Plugins (3)

Akismet Anti-Spam: Version 4.1.1 by Automattic
Block Bad Queries (BBQ): Version 20190311 by Jeff Starr
Two Factor: Version 0.4.0 by George Stephanis

Media handling

Active editor: WP_Image_Editor_Imagick
Imagick Module Version: 1683
ImageMagick Version: ImageMagick 6.9.3-10 Q16 x86_64 2016-05-06 http://www.imagemagick.org
Imagick Resource Limits:
area: 62 GB
disk: -1
file: 12288
map: 62 GB
memory: 31 GB
thread: 24
GD Version: bundled (2.1.0 compatible)
Ghostscript Version: 8.70

Server

Server architecture: Linux 3.10.0-693.11.6.1.ELK.el6.x86_64 x86_64
Web Server Software: Apache
PHP Version: 7.0.29 (Supports 64bit values)
PHP SAPI: cgi-fcgi
PHP max input variables: 1000
PHP time limit: 300
PHP memory limit: 256M
Max input time: 300
Upload max filesize: 1024M
PHP post max size: 1024M
cURL Version: 7.48.0 OpenSSL/1.0.1e
SUHOSIN installed: No
Is the Imagick library available: Yes
htaccess rules: Custom rules have been added to your htaccess file

Database

Extension: mysqli
Server version: 5.6.41-84.1
Client version: 5.5.59-MariaDB
Database prefix: del_

WordPress Constants

ABSPATH: /home/macmanx2/public_html/delta/
WP_HOME: Undefined
WP_SITEURL: Undefined
WP_DEBUG: Disabled
WP_MAX_MEMORY_LIMIT: 256M
WP_DEBUG_DISPLAY: Enabled
WP_DEBUG_LOG: Disabled
SCRIPT_DEBUG: Disabled
WP_CACHE: Disabled
CONCATENATE_SCRIPTS: Disabled
COMPRESS_SCRIPTS: Undefined
COMPRESS_CSS: Undefined
WP_LOCAL_DEV: Undefined

Filesystem Permissions

The main WordPress directory: Writable
The wp-content directory: Writable
The uploads directory: Writable
The plugins directory: Writable
The themes directory: Writable
The Must Use Plugins directory: Writable

[westonruter]

Is this site using HTTPS?: No

This may be the underlying problem right here. The amp-form requires that the submissions be made to an HTTPS endpoint. The AMP plugin would try to force the URL to be HTTPS, but this request is failing for you most likely, which in turn is resulting in the AMP-Access-Control-Allow-Source-Origin response header not being seen.

So this is a separate issue (that AMP requires HTTPS), and not related to Jetpack, I believe.

[macmanx2]

Hm, that does make sense in hindsight. I originally ruled that out since the original reporter's site was under HTTPS.

Looking at https://wordpress.org/support/topic/amp-jetpack-subscribe-button-stopped-working/ it seems your pull request works, so I think we can close this. :)

Thanks!