Blank screen for WP 5.0 beta on a web host with a Mod_Security conflict

[designsimply]

I'm posting this here as documentation for an issue that breaks the editor due to a mod_sec rule triggering for the wp-polyfill-ecmascript.min.js (on Bluehost in my case but other hosts may be affected) and to see whether anything can be done from the WP side to either help alleviate the problem or show a useful error message such as passing through the error that is seen when you try to load the blocked file directly (this might not be possible in context).

Steps to reproduce:

1. Install WP 5.0 beta on any host which has a Mod_Security rule blocking the word ecmascript.
2. Go to Posts > Add New.

Result: completely white screen.

Console panel contains:

JQMIGRATE: Migrate is installed, version 1.4.1 load-scripts.php:9:542
Loading failed for the <script> with source “https://madefortesting.com/wp-includes/js/dist/vendor/wp-polyfill-ecmascript.min.js?ver=5.0-beta1-43823”. post.php:73
[Show/hide message details.] ReferenceError: regeneratorRuntime is not defined[Learn More] api-fetch.min.js:1:3589
[Show/hide message details.] TypeError: wp.apiFetch is undefined[Learn More] post.php:1607:1
[Show/hide message details.] ReferenceError: regeneratorRuntime is not defined[Learn More] data.min.js:1:14145
[Show/hide message details.] ReferenceError: regeneratorRuntime is not defined[Learn More] core-data.min.js:1:6442
[Show/hide message details.] ReferenceError: regeneratorRuntime is not defined[Learn More] editor.min.js:55:45558
[Show/hide message details.] TypeError: Object(...) is not a function[Learn More] block-library.min.js:12:9498
[Show/hide message details.] TypeError: Object(...)(...) is undefined[Learn More] edit-post.min.js:12:19442
[Show/hide message details.] TypeError: wp.editPost is undefined[Learn More] post.php:1680:4
window._wpLoadBlockEditor</<
https://madefortesting.com/wp-admin/post.php:1680:4

Since the console messages say wp-polyfill-ecmascript.min.js could not be loaded, I tried loading ​https://madefortesting.com/wp-includes/js/dist/vendor/wp-polyfill-ecmascript.min.js?ver=5.0-beta1-43823 directly and saw this:

Not Acceptable!
An appropriate representation of the requested resource could not be found on this server. This error was generated by Mod_Security.

I have reached out to Bluehost to see if the Mod_Security rule can be modified to allow the wp-polyfill-ecmascript.min.js file to load.

[Clorith]

There is an existing issue logged for this at ​https://github.com/WordPress/gutenberg/issues/10075

I'll just fill out with some other mod_sec rules we've observed for maximum coverage:

ModSecurity: Access denied with code 403 (phase 2). Match of "within %{tx.allowed_request_content_type}" against "TX:0" required. [file "/usr/local/apache2/conf/modsecurity/base_rules/modsecurity_crs_30_http_policy.conf"] [line "63"] [id "960010"] [msg "Request content type is not allowed by policy"] [data "application/json"] [severity "WARNING"] [tag "POLICY/ENCODING_NOT_ALLOWED"] [tag "WASCTC/WASC-20"] [tag "OWASP_TOP_10/A1"] [tag "OWASP_AppSensor/EE2"] [tag "PCI/12.1"] [hostname "www.domain.com"] [uri "/wp-json/wp/v2/posts/6/autosaves"] [unique_id "W3dK9goASzoAABfURiAAAAA-"]

ModSecurity: [file "/etc/httpd/conf/modsecurity.d/rules/tortix/modsec/50_plesk_basic_asl_rules.conf"] [line "301"] [id "340149"] [rev "152"] [msg "Protected by Atomicorp.com Basic Non-Realtime WAF Rules: Potential Cross Site Scripting Attack"] [data "ecmascript"] [severity "CRITICAL"] Access denied with code 403 (phase 2). Pattern match "(?:< ?i?frame ?src ?= ?(?:ogg|gopher|data|php|zlib|(?:ht|f)tps?):/|(?:\\\\.add|\\\\@)import |asfunction\\\\:|background-image\\\\:|e(?:cma|xec)script|\\\\.fromcharcode|get(?:parentfolder|specialfolder)|\\\\.innerhtml|\\\\< ?input|(?:/|<) ?(?:java|live|j|vb)script!s| ..." at REQUEST_URI. [hostname "dev.partzorg.nl"] [uri "/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js"] [unique_id "W59N9ACZ95d3fNdTxLlY8gAAAAY"], referer: http://dev.partzorg.nl/wp-admin/post.php?post=407&action=edit

ModSecurity: Access denied with code 403 (phase 2). Match of "ge 1" against "&REQUEST_COOKIES_NAMES:/^wordpress_([0-9a-fA-f]{32})$/" required. [file "/usr/local/cwaf/rules/28_Apps_WordPress.conf"] [line "127"] [id "225170"] [rev "1"] [msg "COMODO WAF: Sensitive Information Disclosure Vulnerability in WordPress 4.7 (CVE-2017-5487)||my-domain-name|F|2"] [severity "CRITICAL"] [tag "CWAF"] [tag "WordPress"] [hostname "my-domain-name"] [uri "/wp-json/wp/v2/users"] [unique_id "WqDSpFczAjtKrcDim5CqlAAAAGA"], referer: http://my-domain-name/wp-admin/post-new.php?post_type=page

Those were the three I could recall the topics for, I don't know specific hosts, but I'm seeing one default plesk rule at least.

[designsimply]

Ace. ❤️ for renaming the file. I will circle back and close this once the file is renamed and the update has been tested after that.

The question about whether or not it's possible to add a notice instead of a blank screen still stands (in case there's anything that can be done!).

[michelwppi]

Hi, I observe similar blank screen when trying to edit (normal) a post edited previously with gutenberg. Please find error and line in javascript log (post.php) of my Safari (test with WP beta3-43876 on a clean install on MAMP)

TypeError: undefined is not an object (evaluating 'window._wpLoadBlockEditor.then')

<script type='text/javascript'>
window._wpLoadBlockEditor.then( function() {

wp.data.dispatch( 'core/edit-post' ).setAvailableMetaBoxesPerLocation( {"side":[],"normal":[],"advanced":[]} );

} );

</script>
Cheers,

[peterluit]

Is there any developmetnt around this big issue?

[Clorith]

The GitHub issue referenced above, ​https://github.com/WordPress/gutenberg/issues/10075, has more information and the current progress on parts of this, in particular relating to the ecmascript rulesets.

[peterluit]

Well, I figured out that I could disable one rule in the mod_security in Plesk. With the firewall switched on, using Gutenberg results in the following error (xxx for IP address)

[client xxx.xxx.xxx.xxx] ModSecurity: [file “/etc/httpd/conf/modsecurity.d/rules/tortix/modsec/50_plesk_basic_asl_rules.conf”] [line “253”] [id “33340149”] ..............

The ID of the rule is 33340149. If you set that as the ID to be ignored, then Gutenberg will work fine.

Just wanted to let you know. It seems that ‘they’ are working on a final solutions to avoid individual rule settings per site. But for now this is ok as a workaround.

[pento]

In 43884:

Block Editor: Update @wordpress dependencies to the latest version.

Changes of note:

• Includes the new Annotations API package.
• wp-polyfill-ecmascript.js is renamed to wp-polyfill.js.
• strip_dynamic_blocks() has been removed in favour of excerpt_remove_blocks().
• The PHP block parser is now syncing from the block-serialization-default-parser package.
• do_blocks() uses the new parser.
• The do_block filter has been removed from do_blocks(), in favour of a render_block filter in render_block().

See #45145, #45190, #45264, #45282.

[desrosj]

In 44261:

Block Editor: Update @wordpress dependencies.

Changes of note:

• Includes the new Annotations API package.
• wp-polyfill-ecmascript.js is renamed to wp-polyfill.js.
• strip_dynamic_blocks() has been removed in favor of excerpt_remove_blocks().
• The PHP block parser is now syncing from the block-serialization-default-parser package.
• do_blocks() uses the new parser.
• The do_block filter has been removed from do_blocks(), in favor of a render_block filter in render_block().

Also, a little cleanup to render_block(). Always normalize $block['attrs’] to array in ’render_block’ filter.
Props pento, azaozz.

Merges [43884] and [43888] to trunk.

See #45145, #45190, #45264, #45282.