search

OFFLINE-GmbH / oc-responsive-images-plugin

Adds reponsive images capabilities to October CMS
MIT License
45 stars 26 forks source link

Problems with .htaccess rules on Apache, 404 erros partly showed #100

Open 01Kuzma opened 1 year ago

01Kuzma commented 1 year ago

Hi! I need help with .htaccess rules.

As I wrote earlier in the past issues, I'm running Winter CMS on PHP 8.1 with oc-responsive-images-plugin and just updated oc-speedy-plugin.

The problem is with responsive images and .htacees, once webp rules are active the part of all images disappears and I get a 404 error in my console. If I comment out the webp part everything works. Am I doing something wrong or it's a bug?

Thank you!

Here is my full .htaccess:


<IfModule mod_rewrite.c>

    <IfModule mod_negotiation.c>
        Options -MultiViews
    </IfModule>

    RewriteEngine On

    ##
    ## You may need to uncomment the following line for some hosting environments,
    ## if you have installed to a subdirectory, enter the name here also.
    ##
    # RewriteBase /

    ##
    ## Uncomment following lines to force HTTPS.
    ##
    # RewriteCond %{HTTPS} off
    # RewriteRule (.*) https://%{SERVER_NAME}/$1 [L,R=301]

    ##
    ## Paths explicitly blocked from being handled by the server
    ##
    RewriteRule ^bootstrap/.* index.php [L,NC]
    RewriteRule ^config/.* index.php [L,NC]
    RewriteRule ^vendor/.* index.php [L,NC]
    RewriteRule ^storage/cms/.* index.php [L,NC]
    RewriteRule ^storage/logs/.* index.php [L,NC]
    RewriteRule ^storage/framework/.* index.php [L,NC]
    RewriteRule ^storage/temp/protected/.* index.php [L,NC]
    RewriteRule ^storage/app/uploads/protected/.* index.php [L,NC]

    ##
    ## Paths explicitly handled by the server
    ##
    RewriteCond %{REQUEST_FILENAME} -f
    RewriteCond %{REQUEST_URI} !^/plugins/vdlp/phast/phast\.php*
    RewriteCond %{REQUEST_FILENAME} !/.well-known/*
    RewriteCond %{REQUEST_FILENAME} !/storage/app/uploads/public/.*
    RewriteCond %{REQUEST_FILENAME} !/storage/app/media/.*
    RewriteCond %{REQUEST_FILENAME} !/storage/app/resized/.*
    RewriteCond %{REQUEST_FILENAME} !/storage/temp/public/.*
    RewriteCond %{REQUEST_FILENAME} !/themes/.*/(assets|resources)/.*
    RewriteCond %{REQUEST_FILENAME} !/plugins/.*/(assets|resources)/.*
    RewriteCond %{REQUEST_FILENAME} !/modules/.*/(assets|resources)/.*
    RewriteRule !^index.php index.php [L,NC]

    ##
    ## Block all PHP files, except index
    ##
    RewriteCond %{REQUEST_FILENAME} -f
    RewriteCond %{REQUEST_URI} !^/plugins/vdlp/phast/phast\.php*
    RewriteCond %{REQUEST_FILENAME} \.php$
    RewriteRule !^index.php index.php [L,NC]

    ##
    ## Standard routes
    ##
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]

</IfModule>

##Enabling CORS ##

<IfModule mod_headers.c>
    <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js|gif|png|jpe?g|svg|svgz|ico|webp)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>
##CORS END##

## START OFFLINE.ResponsiveImages - webp-rewrite
#  DO NOT REMOVE THESE LINES
<IfModule mod_setenvif.c>
    # Vary: Accept for all the requests to jpeg and png
    SetEnvIf Request_URI "\.(jpe?g|png)$" REQUEST_image
</IfModule>
<ifModule mod_rewrite.c>
    RewriteEngine On

    # If the Browser supports WebP images, and the .webp file exists, use it.
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{REQUEST_URI} ^/?storage/.*\.(jpe?g|png)
    RewriteCond %{REQUEST_FILENAME}.webp -f
    RewriteRule ^/?(.*)$ $1.webp [NC,T=image/webp,END]

    # If the Browser supports WebP images, and the .webp file does not exist, generate it.
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{REQUEST_URI} ^/?storage/.*\.(jpe?g|png)
    RewriteCond %{REQUEST_FILENAME}\.webp !-f
    RewriteRule ^/?(.*)$ plugins/offline/responsiveimages/webp.php?path=$1 [NC,END]

</ifModule>
<IfModule mod_headers.c>
    Header append Vary Accept env=REQUEST_image
</IfModule>
<IfModule mod_mime.c>
    AddType image/webp .webp
</IfModule>

## END OFFLINE.ResponsiveImages - webp-rewrite

## START OFFLINE.Speedy - caching
#  DO NOT REMOVE THESE LINES
<IfModule mod_expires.c>
    ExpiresActive on

    # Perhaps better to whitelist expires rules? Perhaps.
    ExpiresDefault "access plus 1 month"

    # cache.appcache needs re-requests in FF 3.6 (thx Remy ~Introducing HTML5)
    ExpiresByType text/cache-manifest "access plus 0 seconds"

    # Your document html
    ExpiresByType text/html "access plus 0 seconds"

    # Data
    ExpiresByType text/xml "access plus 0 seconds"
    ExpiresByType application/xml "access plus 0 seconds"
    ExpiresByType application/json "access plus 0 seconds"

    # RSS feed
    ExpiresByType application/rss+xml "access plus 1 hour"

    # Favicon (cannot be renamed)
    ExpiresByType image/x-icon "access plus 1 week"

    # Media: images, video, audio
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/webp "access plus 1 year"
    ExpiresByType video/ogg "access plus 1 year"
    ExpiresByType video/webm "access plus 1 year"
    ExpiresByType video/mp4 "access plus 1 year"
    ExpiresByType audio/ogg "access plus 1 year"
    # HTC files (css3pie)
    ExpiresByType text/x-component "access plus 1 month"

    # Webfonts
    ExpiresByType font/truetype "access plus 1 year"
    ExpiresByType font/opentype "access plus 1 year"
    ExpiresByType font/woff2 "access plus 1 year"
    ExpiresByType application/x-font-woff "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 year"

    # CSS and JavaScript
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType text/javascript "access plus 1 year"

    <IfModule mod_headers.c>
        Header append Cache-Control "public"
    </IfModule>

</IfModule>

## END OFFLINE.Speedy - caching

## START OFFLINE.Speedy - gzip
#  DO NOT REMOVE THESE LINES
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/shtml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript

    # Fonts
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE application/x-font
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE application/x-font-truetype
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE font/opentype
    AddOutputFilterByType DEFLATE x-font/ttf
    AddOutputFilterByType DEFLATE x-font/otf

    AddType x-font/otf .otf
    AddType x-font/ttf .ttf
    AddType x-font/eot .eot
    AddType x-font/woff .woff
    AddType x-font/woff .woff2
</IfModule>

## END OFFLINE.Speedy - gzip`
tobias-kuendig commented 1 year ago

Do the webp images exist beside the original files on the disk? They have the same name but .webp appended.

Also, try running the following command to generate the missing webp files:

php artisan responsive-images:convert --include=storage/app

01Kuzma commented 1 year ago

Strange things happen in my localhost, it's blocking my stylesheets "Blocked loading mixed active content". I have to investigate what is causing this after minor changes.

On the other hand, on prod version, I can't run a PHP commands. It seems, that files are not created: image

You could check the live prod's console here

tobias-kuendig commented 1 year ago

add a var_dump for the $baseDir and $source variables here and check the response in your browser console if the returned paths are valid:

https://github.com/OFFLINE-GmbH/oc-responsive-images-plugin/blob/develop/webp.php#L31

01Kuzma commented 1 year ago

I've added it just right now to prod (live): $baseDir = env('RESPONSIVE_IMAGES_BASE_DIR', __DIR__ . '/../../..'); $source = realpath($baseDir . $source); echo"SOURCE:::"; var_dump($baseDir); var_dump($source); $destination = $source . '.webp'; Cleared the cache, but it doesn't give any text output...

What is weird, on localhost (Windows) now some of the pictures are loaded, but some of them are not.

tobias-kuendig commented 1 year ago

All the image requests return No input file specified., this means the webp.php is never loaded and something is wrong with the rewrite rule.

Check your server's access and error logs and see if you can find more details there.

01Kuzma commented 1 year ago

all error logs are empty, except access.log. That;s from localhost:

127.0.0.1 - - [26/Apr/2023:15:15:08 +0300] "GET / HTTP/1.1" 200 10085
127.0.0.1 - - [26/Apr/2023:15:15:08 +0300] "GET /storage/app/uploads/public/5ff/33c/ea6/thumb_146_600_600_0_0_auto.jpg HTTP/1.1" 302 162
127.0.0.1 - - [26/Apr/2023:15:15:08 +0300] "GET /storage/app/uploads/public/60c/f79/a4b/thumb_401_600_600_0_0_auto.jpg HTTP/1.1" 302 162
127.0.0.1 - - [26/Apr/2023:15:15:09 +0300] "POST /andreishilov/up/config/ HTTP/1.1" 200 193
127.0.0.1 - - [26/Apr/2023:15:15:08 +0300] "GET /404 HTTP/1.1" 404 280
127.0.0.1 - - [26/Apr/2023:15:15:09 +0300] "GET /404 HTTP/1.1" 404 280
01Kuzma commented 1 year ago

Even with standard winter's .htaccess + ResponsiveImages the results are the same :/

<IfModule mod_rewrite.c>

    <IfModule mod_negotiation.c>
        Options -MultiViews
    </IfModule>

    RewriteEngine On

    ##
    ## You may need to uncomment the following line for some hosting environments,
    ## if you have installed to a subdirectory, enter the name here also.
    ##
    # RewriteBase /

    ##
    ## Uncomment following lines to force HTTPS.
    ##
    # RewriteCond %{HTTPS} off
    # RewriteRule (.*) https://%{SERVER_NAME}/$1 [L,R=301]

    ##
    ## Paths explicitly blocked from being handled by the server
    ##
    RewriteRule ^bootstrap/.* index.php [L,NC]
    RewriteRule ^config/.* index.php [L,NC]
    RewriteRule ^vendor/.* index.php [L,NC]
    RewriteRule ^storage/cms/.* index.php [L,NC]
    RewriteRule ^storage/logs/.* index.php [L,NC]
    RewriteRule ^storage/framework/.* index.php [L,NC]
    RewriteRule ^storage/temp/protected/.* index.php [L,NC]
    RewriteRule ^storage/app/uploads/protected/.* index.php [L,NC]

    ##
    ## Paths explicitly handled by the server
    ##
    RewriteCond %{REQUEST_FILENAME} -f
    RewriteCond %{REQUEST_FILENAME} !/.well-known/*
    RewriteCond %{REQUEST_FILENAME} !/storage/app/uploads/public/.*
    RewriteCond %{REQUEST_FILENAME} !/storage/app/media/.*
    RewriteCond %{REQUEST_FILENAME} !/storage/app/resized/.*
    RewriteCond %{REQUEST_FILENAME} !/storage/temp/public/.*
    RewriteCond %{REQUEST_FILENAME} !/themes/.*/(assets|resources)/.*
    RewriteCond %{REQUEST_FILENAME} !/plugins/.*/(assets|resources)/.*
    RewriteCond %{REQUEST_FILENAME} !/modules/.*/(assets|resources)/.*
    RewriteRule !^index.php index.php [L,NC]

    ##
    ## Block all PHP files, except index
    ##
    RewriteCond %{REQUEST_FILENAME} -f
    RewriteCond %{REQUEST_FILENAME} \.php$
    RewriteRule !^index.php index.php [L,NC]

    ##
    ## Standard routes
    ##
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]

</IfModule>

## START OFFLINE.ResponsiveImages - webp-rewrite
#  DO NOT REMOVE THESE LINES
<IfModule mod_setenvif.c>
    # Vary: Accept for all the requests to jpeg and png
    SetEnvIf Request_URI "\.(jpe?g|png)$" REQUEST_image
</IfModule>
<ifModule mod_rewrite.c>

    # If the Browser supports WebP images, and the .webp file exists, use it.
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{REQUEST_URI} ^/?storage/.*\.(jpe?g|png)
    RewriteCond %{REQUEST_FILENAME}.webp -f
    RewriteRule ^/?(.*)$ $1.webp [NC,T=image/webp,END]

    # If the Browser supports WebP images, and the .webp file does not exist, generate it.
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{REQUEST_URI} ^/?storage/.*\.(jpe?g|png)
    RewriteCond %{REQUEST_FILENAME}\.webp !-f
    RewriteRule ^/?(.*)$ plugins/offline/responsiveimages/webp.php?path=$1 [NC,END]

</ifModule>
<IfModule mod_headers.c>
    Header append Vary Accept env=REQUEST_image
</IfModule>
<IfModule mod_mime.c>
    AddType image/webp .webp
</IfModule>

## END OFFLINE.ResponsiveImages - webp-rewrite