Autoptimize Plugin + Hype Wordpress Plugin

Exporting & Previewing
1

Hello @Daniel,

Did you find Hype plugin does not work with Autoptmize? https://wordpress.org/plugins/autoptimize/

autoptimize support exclude file from optimize by setting wp-content/cache/, wp-content/uploads/, like this kind of directory:

https://homewareselect.com/wp-content/themes/oceanwp/assets/js/third/woo/woo-scripts.min.js
https://homewareselect.com**/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js**

but HYPE-674.thin.min.js will be loaded directly from project page, like this:

https://homewareselect.com/test.hyperesources/HYPE-674.thin.min.js

On the page at https://homewareselect.com/test

In this case, it seems no way exclude hype min.js, and it will show 404 Nginx not found:http://prntscr.com/vd2oet, and the Hype project will blank page.

Anyway to make it work with Autoptimize and set the js file to be excluded from optimize please?

Thanks

2

If the plugin is rewriting code that the Hype animation relies on -- then it will break your Hype export. What do you have setup as excluded directories? Having just wp-content/uploads should be enough.

3

Here are what I input: wp-content/uploads/, HYPE-674.thin.min.js

but does not work, and you can test at https://homewareselect.com/test

4

But that's not the path of the JavaScript file... For you it is:

https://homewareselect.com/wp-content/uploads/hypeanimations/1/test.hyperesources/HYPE-674.thin.min.js

But ideally, you would just be able to use the URL:

https://homewareselect.com/wp-content/uploads/hypeanimations/

Or:

https://homewareselect.com/wp-content/uploads/hypeanimations/*

Do either of those work?

And does it also work fine if you uncheck 'optimize JavaScript?'

5

In their documentation, they say:

Both CSS and JS optimization can skip code from being aggregated and minimized by adding “identifiers” to the comma-separated exclusion list. The exact identifier string to use can be determined this way:   if you want to exclude a specific file, e.g. wp-content/plugins/funkyplugin/css/style.css, you could simply exclude “funkyplugin/css/style.css”  if you want to exclude all files of a specific plugin, e.g. wp-content/plugins/funkyplugin/js/* , you can exclude for example “funkyplugin/js/” or “plugins/funkyplugin” if you want to exclude inline code, you’ll have to find a specific, unique string in that block of code and add that to the exclusion list. Example: to exclude <script>funky_data='Won\'t you take me to, Funky Town'</script>, the identifier is “funky_data”.

So you would need to put in:

wp-content/uploads/hypeanimations/*

1 Like
6

Hi Daniel,

Yes, Hype projects will work fine if unchecked 'optimize JavaScript". but will still show:

The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored.

I tired both of these two inputs:

https://homewareselect.com/wp-content/uploads/hypeanimations/*
wp-content/uploads/hypeanimations/*

and also test two hype projects:

https://homewareselect.com/parallax-vdbear
https://homewareselect.com/test

Please check the screenshot:

On console, it will show:

`Failed to load resource: the server responded with a status of 404 ()`

    Refused to execute https://homewareselect.com/test.hyperesources/HYPE-674.thin.min.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type.

    The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored.'

Here is what think, please correct me if I am wrong:

Autoptimze take the files from the directory of wp-content, like HYPE-674.thin.min.js as MIME type, whatever the file format is.

So, this issue seems related to nginx configuration but not autoptimize or wordpress. you might like to check at

Content-Security-Policy

https://content-security-policy.com/examples/nginx/
https://github.com/nginx/nginx/blob/master/conf/mime.types

specially, this one:

On our server, we use wordops optimized nginx configuration setting:

    # Common security headers
	more_set_headers "X-Frame-Options : SAMEORIGIN";
	more_set_headers "X-Xss-Protection : 1; mode=block";
	more_set_headers "X-Content-Type-Options : nosniff";
	more_set_headers "Referrer-Policy : no-referrer, strict-origin-when-cross-origin";
	more_set_headers "X-Download-Options : noopen";

	# oscp settings
	resolver 8.8.8.8 1.1.1.1 8.8.4.4 1.0.0.1 valid=300s;
	resolver_timeout 10;
	ssl_stapling on;

	##
	# Basic Settings
	##
	# server_names_hash_bucket_size 64;
	# server_name_in_redirect off;

	include /etc/nginx/mime.types;
	default_type application/octet-stream;

Specifically, it is related to this setting:

more_set_headers "X-Content-Type-Options : nosniff";

So, if Autoptimze is deactivated, the info will still show up:

The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored.

For Hype wordpress plugin, maybe the issue could be fixed if the js are loaded from the directory of wp-includes?

7

Could this be what you are experiencing then.

https://content-security-policy.com/strict-dynamic/

Also, regarding the screenshot and the exclusion, it may be being covered by the red box but is there actually a comma before the hype file url.

8

Did you find a workaround for the security + caching requirements for your server @alexlii ?

9

Hello Daniel,

thanks for message.

No, not yet.

Maybe it would be better to write to the author of autoptimize, usually they reply to any quetions very soon, and maybe they can give some suggetions, and I have not got time to do that, or please let me know if you gave any suggestion.

10

Hi Daniel,

I wrote to the author of Autoptimize, and here is the solution:

try adding hypeanimations to the exclusion list AND also untick the “minify excluded JS/ CSS” option (near the bottom of the main settings-page).

hope this helps,
frank

and you may check the reply at https://wordpress.org/support/topic/problem-with-excluding-js-in-wp-content/

After test, I found it works.

3 Likes