Category Archives: autoptimize

Autoptimize with support for AVIF images

You probably have heard about AVIF already, but if not; it is a new image format which is based on the AV1 video format and generally has superior compression than the better-known WebP, JPEG, PNG and GIF formats. Avif is currently supported by Chrome & Opera and can be enabled by setting the image.avif.enabled flag in Firefox.

So now you know what it is you may want to use it on your WordPress site? In that case -and the title kind of gives it away- the freshly released Autoptimize 2.7.8 now has support for AVIF if you have image optimization active. Just as for WebP Autoptimize hooks into the lazyload JavaScript to detect if your visitor’s browser supports AVIF and will switch the requests to the ShortPixel CDN to that format if so. If AVIF is not support but WebP is, the requests will be for WebP images and if those are not supported old-fashioned JPEG’s will be loaded.

So there you have it, AVIF is now available in WordPress!

Want to test AVIF images with Autoptimize’s Image Optimization?

So AVIF is a new(ish) image format that promises even better optimization then WebP and is supported in desktop Chrome & behind a preference in Firefox; go to about:config and set image.avif.enabled to true.

If you are using Autoptimize to optimize your images and you want to test AVIF images, you can use below code snippet to do so;

add_filter('autoptimize_filter_imgopt_webp_js', function(){return '<script data-noptimize="1">function c_img(a,b){src="avif"==b?"data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAABoAAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAEAAAABAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACJtZGF0EgAKCBgADsgQEAwgMgwf8AAAWAAAAACvJ+o=":"data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==";var c=new Image;c.onload=function(){var d=0<c.width&&0<c.height;a(d,b)},c.onerror=function(){a(!1,b)},c.src=src}function s_img(a,b){w=window,"avif"==b?!1==a?c_img(s_img,"webp"):w.ngImg="avif":!1==a?w.ngImg=!1:w.ngImg="webp"}c_img(s_img,"avif");document.addEventListener("lazybeforeunveil",function({target:a}){window.ngImg&&["data-src","data-srcset"].forEach(function(b){attr=a.getAttribute(b),null!==attr&&-1==attr.indexOf("/client/to_")&&a.setAttribute(b,attr.replace(/\/client\//,"/client/to_"+window.ngImg+","))})});</script>';});

Use the the code snippets plugin to add this (easy and safe) or if you’re adventurous add it to your theme’s functions.php.

Autoptimize < 2.7.7 security vulnerabilities debrief

screenshot of the arbitrary file upload fix on github. quite happy with my work thereWith Autoptimize 2.7.7 released on August the 23rd and having been pushed to all sites that were still on 2.7.0-2.7.6 by the WordPress plugins team on Aug. 30th and 31th, resulting in just under one million downloads in 8 days time, it is now the moment for a small debrief of the security issues that were fixed in this version.

2.7.7 fixed two vulnerabilities, one authenticated cross-site scripting and one arbitrary file upload.

  1. XSS:
    1. Problem: administrator users were able leave JavaScript in the exclusion-fields for CSS and JS optimization, leading that JS to be executed when the page was (re-)loaded.
    2. Risk: This could be abused by one administrator to execute JS against another administrator.
    3. Solution: This was fixed by applying esc_html (to become esc_attr in the next version as suggested by George Stephanis) to escape the JS-code and avoid it getting executed.
  2. Arbitrary File Upload:
    1. Problem: the code that processes Critical CSS settings imports did insufficient checks to ensure no malicious files were uploaded as it lacked a user capability check, did not check file extension of to uploaded file to be zip and did not check the contents of the zip-file. It did however check for a correct nonce for that specific action.
    2. Risk: this could lead to authenticated attackers uploading PHP-files that could be executed, but that risk was very much limited by the nonce-check (which all exploits I have seen happily ignore).
    3. Solution: the code has been updated to do a capability check, to make sure the file uploaded is a zip-file and most importantly to delete any unknown file found immediately after unzipping (based on an list of known-good files).

A big thank you to the two security researchers (Erin Germ for the XSS and an anonymous whitehatter for the file upload problem) who reported these vulnerabilities in a responsible manner and to the WordPress plugin team for their invaluable help in keeping our users safe.

Don’t take free & open source for granted; donate to Mozilla!

Do you ❤️ the free and open web and do you want to ensure a non-profit can continue to play an important role? Do you use Firefox or use MDN (Mozilla Developer Network) to check up on JS or CSS or HTML syntax?

We do too and as from today Optimizing Matters will donate $20 monthly. If you use Autoptimize or Async JavaScript or WP YouTube Lyte then please, pretty please, consider donating at https://donate.mozilla.org too.