LazyLoad for CSS background images triggers DOMException errors when the CSS is coming from a PHP file about wp-rocket HOT 6 CLOSED

Reproduce the problem

Like explain in the issue itself,
We can create a page with the following HTML:

<div class="my-test-background-1"></div>

Creating a test.php and put it in the rocket-test-data folder:

<?php
header('Content-Type: text/css');
echo '.my-test-background-1 {
    width: 500px;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
    background-image: url("http://wp-rocket.esy.es/wp-content/uploads/2020/10/rose-165819_1920-1024x678.jpg");
    }'; 

And adding this to functions.php:

wp_enqueue_block_style(
    'test',
    array(
        'handle' => 'my-test-background-1',
        'src'    => get_home_url( null,'wp-content/rocket-test-data/styles/test.php' ),
        'path'   => get_home_url( null,'wp-content/rocket-test-data/styles/test.php' )
    )
);

We get the console error as mentioned.

Identify the root cause

The issue is that when we are extracting the content of the file, we keep the whole php content. Which means we are keeping the echo element.

Scope a solution

To solve the issue, we could modify the function

	protected function fetch_content( string $path ) {
		if ( ! wp_http_validate_url( $path ) ) {
			$file_extension = pathinfo($path, PATHINFO_EXTENSION);

			if (strtolower($file_extension) !== 'php') {
				return $this->filesystem->get_contents($path);
			}
		}
		return wp_remote_retrieve_body( wp_remote_get( $path ) );
	}

would work.

Development steps:

Effort estimation:

XS

Is a refactor needed in that part of the codebase?

No

from wp-rocket.

@Miraeld This solution would work fine if we had only echo to worry about but if we have cases like:

$script = '.my-test-background-1 {
   width: 500px;
   height: 500px;
   margin-left: auto;
   margin-right: auto;
   background-image: url("http://wp-rocket.esy.es/wp-content/uploads/2020/10/rose-165819_1920-1024x678.jpg");
   }'; 
   echo $script;

or

print '.my-test-background-1 {
    width: 500px;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
    background-image: url("http://wp-rocket.esy.es/wp-content/uploads/2020/10/rose-165819_1920-1024x678.jpg");
    }'; 

to say the least, this kind of construct will trigger yet another console error.
could be an edge case though maybe @piotrbak

from wp-rocket.

I thought about that, but I wan't able to think of a global solution for this kind of thing except playing with regex ... If you have an idea in mind, please share it

from wp-rocket.

@wp-media/engineering-plugin-team I see here that we will get content here when the css url does not contain a host, so for this maybe we can do a check for a php ext and do a request with a constructed url to get the file buffer instead of the content.

from wp-rocket.

Based on @jeawhanlee comment, here is what we could do:

In the function

we can add a condition to check if this is a php file, and if this is, then we return the content of the loaded php:

	protected function fetch_content( string $path ) {
		if ( ! wp_http_validate_url( $path ) ) {
			$file_extension = pathinfo($path, PATHINFO_EXTENSION);

			if (strtolower($file_extension) !== 'php') {
				return $this->filesystem->get_contents($path);
			}
		}
		return wp_remote_retrieve_body( wp_remote_get( $path ) );
	}

This would work.

I have updated the grooming accordingly

from wp-rocket.

Looks good to me

from wp-rocket.