htaccess rewrite condition miss css and image - css

i'm tryng to use a rewrite condition like this:
www.sitename.com/view/post/1
and rewrite to:
www.sitename.com/view_post.php?id=1
I'm using this code:
RewriteRule view/post/([^/]+) view_post.php?id=$1 [L]
But on this page the linked css and images were missed if i link them like this:
css/style.css
It's possible to avoid this error also when working in localhost/sitename for developing with the same htaccess? thanks a lot

If you use relative URIs then the same and code will work on multiple sites, e.g. www.sitename.com and localhost.
Why not add 127.0.0.1 localhost www.sitename.home to your hosts file and then you can test locally using http://www.sitename.home/whatever_uri
The issue on the CSS is that the browser will resolve a relative URI of css/style.css from a referring www.sitename.com/view/post/1 as www.sitename.com/view/post/css/style.css. Do you see why? You either need to swap all of your app references to site-relative, directory-absolute /css/style.css as Danilo suggests -- and which might involve a lot of rework -- or use an additional rule to dump the extraneous directories:
RewriteRule .*/css/(.*?)\.css css/$1.css [L]
Do you see how this works? :-)

try using
<link rel="stylesheet" type="text/css" href="http://www.sitename.com/css/style.css">
If you want test you app on localhost you must use
<link rel="stylesheet" type="text/css" href="/css/style.css">

Related

F3 routing engine works using XAMPP and PhpStorm on Linux, but gives 404 for CSS files

I'm trying to code a F3 ("Fat Free Framework") application using PhpStorm and XAMPP on Linux.
In order to make use of the .htaccess file provided by F3 necessary for the RewriteEngine (see the comments as why this is wrong), I launch my code using the following special run configuration :
I launch the run configuration, which starts the Web Server. I open a browser and go to http://localhost:8000/ . I can see the content, and the links work and I can navigate from page to page, per the routes defined.
But none of the CSS is there. If I click on "view-source" and click on the CSS link, I get the 404 Not Found message from F3. So, it seems that for some reason, F3 is blocking CSS files.
The beginning of the webpage is as follow:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A title</title>
<link href="{{#BASE}}/f3style.css" rel="stylesheet" type="text/css" />
</head>
Although the #BASE variable is empty in my case. The "f3style.css" file is really at the root of my web directory currently.
I use the default .htaccess file recommended by F3:
RewriteEngine On
# Uncommenting the following line has no effect
# RewriteBase /
RewriteRule ^(app|tmp)\/|\.ini$ - [R=404]
RewriteCond %{REQUEST_FILENAME} !-l
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule .* index.php [L,QSA]
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization},L]
(Again, see the comments as to why the .htaccess file is irrelevant here)
And here are my routes. They are in "index.php":
<?php
$f3 = require('lib/base.php');
// Routes
require 'controller.php';
$f3->route('GET /index.php', 'Controller->showMain');
$f3->route('GET /', 'Controller->showMain' );
$f3->route('GET /items/#item', 'Controller->showItem');
$f3->run();
Any idea what I should look for?
Based on the screenshot you are using PHP's built-in web server. The thing is: it does not support .htaccess. Therefore all HTTP requests go to your router script (framework/index.php -- part of the F3 app I guess).
I'm not familiar with how F3 routing works, but I'd assume it's the same as any other: it goes through all registered routes/endpoints and if no match found it will report "404 Not Found" response.
Since there are no rules from .htaccess in place to filter out requests for such static/existing files (css/jpg/png/js etc), the request goes through your index.php, through the whole routing table and it's F3 that reports that 404 error back to the browser (when no matching route was found).
There are a few possible solutions here:
Create a separate route(s) for such static resources and serve them there from your F3 code (your code needs to locate a file and send a response with the right headers etc.)
Not really worth implementing it this way TBH (since it's just to handle this specific situation / under PHP's web server).
Do a pre-filter and ignore any requests to such static files. When using PHP's web server it's a matter of returning false in the router script (which tells PHP to use built-in web server code to serve such request). Look at the sample from the following link and add a similar one to your code: https://www.php.net/manual/en/features.commandline.webserver.php#example-426
if (preg_match('/\.(?:png|jpg|jpeg|gif|css)$/', $_SERVER["REQUEST_URI"])) return false;
NOTE: you can add it right into the existing index.php like you did (at the top, after all use lines but before actual code lines) but this means that you are hardcoding such specific-to-PHP's-web-server-only logic into the script that can run under a proper web server.
Instead I suggest creating a separate router script (e.g. php-router.php and use it instead of index.php from your screenshot) where you will do this and if execution will pass that condition, only then call the code from your real index.php (i.e. require './index.php'; or alike)
Why not use Apache web server from your XAMPP to serve the whole site in the first place?
Once Apache is running it handles ALL of the virtual hosts (that you can access via fake domain name in your OS' hosts file or by having website on a custom dedicated port) -- no need to launch each site separately.
Apache obviously fully supports .htaccess and always better/more features/more close to the production environment than for-dev-only PHP's built-in web server (mod_rewrite and other modules).

Symfony cache busting / Assetic minification

I have a problem with cache busting after minifying my js files via uglify using method from here:
http://symfony.com/doc/current/cookbook/assetic/uglifyjs.html
After minifying my files are loaded as 1f4daf9.js without assets version which is set in the config.
My uglify filter is configured like this:
filters:
uglifyjs2:
bin: /usr/local/bin/uglifyjs
And what I want to achive is to get 1f4daf9.js?r1234 name with assets version so the browser is forced to reload it. So how can I do that?
Found answer on https://stackoverflow.com/a/27900224/3922926
You actually need to use {{ asset(asset_url) }} instead of {{ asset_url }} since it doesn't add version to asset_url automatically.
If you set an output filename to a fixed filename on disk, you can then arrange the cache-busting to be done on the request URL (which isn't actually named identically). It would still send the original file from disk however. The h5bp cache-busting config has an example:
# If you're not using a build process to manage your filename version
# revving, you might want to consider enabling the following directives
# to route all requests such as `/style.12345.css` to `/style.css`.
#
# To understand why this is important and even a better solution than
# using something like `*.css?v231`, please see:
# http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+)\.(\d+)\.(bmp|css|cur|gif|ico|jpe?g|js|png|svgz?|webp|webmanifest)$ $1.$3 [L]
</IfModule>
Unfortunately, the assets_version_format can't embed strings within the filename, which would leave the file-naming as a somewhat manual process.
This will work for Javascript as equally as CSS. The JS and CSS files would then also be able to be set with long-expiry times, meaning they will be cached by the viewing browser, and not re-requested at all - until the URL (with the embedded version, or hash) changes, and the latest version is fetched.

Invalid image url throws exception

If I try to visit an invalid image url e.g. example.com/images/non-existent-image an error is thrown: Symfony\\Component\\Routing\\Exception\\ResourceNotFoundException
How should I prevent this, is there a specific route(-requirement) I should add, or should I use something like a .htaccess rule?
Thanks
If it was a permission error you would get sth like permission denies. Check again the path...also check that you have placed the folder images in the proper directory in server (try moving images/ in the same directory where directory WEB-INF is..files under WEB-INF cannot be accessed for security reasons)
Okay the answer to this question is twofold.
First of all: Yes, static resources should not be requested via the front controller (as per thecatontheflat's comment). Symfony has a rule in the .htaccessfile distributed with the standard edition:
# If the requested filename exists, simply serve it.
# We only want to let Apache serve files and not directories.
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule .? - [L]
As it turned out, my problem was somewhere else. It is normal for symfony to throw the ResouceNotFoundException. However , this error should be caught and should create a 404 instead. This was not happening because I was using IS_GRANTEDin my error template. (Also see stof's comment here)

Apache alias not working, WAMP

I am using WAMP.
I edited the httpd.conf file to include:
Alias /static "c:/he/sites/browsbyboodah.com/htdocs/static"
When linking my .css's I use this path:
<link rel="stylesheet" type="text/css" href="/static/css/reset.css" />
I cannot load the .css like this for some reason. What am I forgetting?
Thanks.
/* EDIT */
After a little debugging I found the following from a view page source and clicking on the css file:
Page not found (404)
Request Method: GET
Request URL http://127.0.0.1:8000/static/css/reset.css
css\reset.css could not be found
check whether Apache mod_alias module is installed or not? and remove "
Alias /static/ /sites/browsbyboodah.com/htdocs/static/
alternatively you can use AliasMatch Directive
One subtle difference between Alias and AliasMatch is that Alias
automatically copies any additional part of the URI onto the end of
the file path on the right. AliasMatch does not.
AliasMatch ^/static/(.*)$ /sites/browsbyboodah.com/htdocs/static/$1
Read this article for more help

How to solve CSS include error after Apache RewriteRule?

I use winXP and AppServ. I have a "showitem.php" on my website root. An example usage:
www.mydomain.com/showitem.php?id=123
I want to use links like following:
www.mydomain.com/item/123
In .htaccess I write this line:
RewriteRule ^item/([^/]+)$ showitem.php?id=$1
Server directs to showitem.php and id is received successfully. However, main problem is with the css and js files. If I make "css/style.css" to "/css/style.css", page is shown on the internet and but not on localhost, because root is "localhost" but files are under "localhost/mydomain". I have also tried "!-f" condition for .css files but it doesn't help and it can't as far as I understand. To solve the problem, I should direct wrong css file interpretation to the correct place, so I want to redirect client request "item/css/style.css" to its original location "css/style.css". I add the following rules for localhost but is there any other way?
RewriteRule ^item/css/([^/]+)$ /mydomain/css/$1
RewriteRule ^item/img/([^/]+)$ /mydomain/img/$1
Set a base tag in your html head.
<base href="http://www.mydomain.com/" />
And then set your stylesheet linking paths relative to the base, e.g.
<link href="css/style.css" />
you could write these to the file .htaccess
ErrorDocument 404 /error_404.php
/error_404.php is your error file you want to put something in there.

Resources