Clean URL's using htaccess breaks my css - php

I'm trying to clean my URL path's so that I don't have any GET parameters and PHP extensions in all of my links. As an example for what I'm trying to achieve:
http://localhost/projectname/?page=dashboard
needs to be:
http://localhost/projectname/dashboard/
And it actually works, I used the following code in my .htaccess:
RewriteEngine on
RewriteCond %{REQUEST_URI} dashboard/
RewriteRule dashboard/ http://localhost/projectname/?page=dashboard
However, the page displays itself without any CSS or Javascript. I tried navigating to my Style.css only to find out that it looks exactly like the webpage itself, instead of showing me my CSS rules.
So what am I doing wrong? Please don't mark my question as a duplicate, I've been looking into similar questions but couldn't solve the problem.

You're changing the relative URI when your URL goes from /projectname/ to /projectname/dashboard/.
When that happens, every relative link on the page will have the wrong base added to it. The browser has no idea that the base is actually /projectname/ when all it sees is the location being at /projectname/dashboard/.
Right now, when your css is linked like:
<link rel="stylesheet" href="Content/style.css">
The browser attempts to resolve it by adding the base from the location, and it'll load:
https://localhost/projectname/dashboard/Content/style.css
which doesn't exist because the "dashboard" isn't actually a folder.
You can either add a base to the actual page by including this in the page header:
<base href="/projectname/" />
Or you can try to un-rewrite the dashboard out of the request (a bit trickier and more error prone) by adding this rule
RewriteCond %{REQUEST_URI} ^/projectname/dashboard/(.*\.css)$
RewriteCond %{DOCUMENT_ROOT}/projectname/%1 -f
RewriteCond ^projectname/dashboard/(.*\.css)$ /projectname/$1 [L]
Note that does this may have an unintended impact on your browser's cache.

Use the absolute path to the CSS.
<link rel="stylesheet" href="http://localhost/projectname/assets/style.css">

Related

Problems with Apache mod_rewrite

I decided to use mod_rewrite to make my URLs look better. I created very simple rules:
RewriteEngine on
RewriteBase /
RewriteRule ^(profile|contact|help|events|account|logout)/?$ index.php?p=$1 [NC]
RewriteRule ^home/?$ index.php [NC]
RewriteRule ^PlaceOrder/([0-9]+)/?$ index.php?p=mos&gc=$1 [NC]
It almost works well but it doesn't. So for example, [NC] is supposed to make it case-insensitive. However, for some reason, when I type for example localhost/Help in the browser, for some strange reason, it redirects to home page.
Another issue is with the last rule. If I type in localhost/PlaceOrder/1 it works as expected and opens index?p=mos&gc=1. But after that if I click on, for example, Account button, the browser uses this URL: localhost/PlaceOrder/account. Which is wrong. It should only use localhost/account. Why is it adding that sub-directory in there? It is only happening after the last rule is used. Prior to using the last rule, all links work well.
I'm going to guess that the localhost/Help isn't because of the rules and because of something in your index.php script. There's nothing those rules do that could possibly rewrite Help to the home page.
The second issue is a matter of a relative vs absolute URL issue. You're probably using relative links in your pages and because you've changed your relative URL base (which would be /PlaceOrder/ all relative links will have that prepended to it. You need to either change all your links to absolute URLs (they'd start with a /) or add this to your page's header:
<base href="/" />

mod_rewrite RewriteRule and html links

I'm creating a new website and it has some php in it. The site basically would work like this, i have /index.php?page=category_page. The the category would be the category and the page would be the sort-of sub category / actual page. The rewritten rule would look like this: /category/page.
I've got this:
RewriteEngine On
RewriteRule ^category/([^/]*)$ index.php?page=$1 [L]
But i dont know how to separate the category and the page, any help?
The second thing is, in my index.php (for instance) i have some css from an external file:
<link rel="stylesheet" type="text/css" href="style/style.css"/>
This doesn't work with the rewrite rule, because it tries to load /category/page/style/style.css which doesn't exist / doesn't rewrite. How do i make it work? I know a simple fix would be to put /style/style.css and that would load from the root of the website, but i'm currently running the website from a sub directory e.g. example.com/new/index.php so that isn't an option. Any help with this?
Problem 1:
You could define multiple parameters in your regex, e.g. category & page (see below).
With such a broad rewrite rule, you would want to add a condition not to rewrite for stylesheets, images, and other assets, though.
I also modified your pattern to only match letters, digits, hyphens, and underscores, which would prevent the use of non-standard characters in your category or page names.
RewriteEngine On
RewriteCond %{REQUEST_URI} !\.(js|css|png|gif|jpg)$ [NC]
RewriteRule ^([\w\d\-]+)/([\w\d\-]+)/?$ index.php?category=$1&page=$2 [L]
Problem 2:
You're using a relative url in your href, which is appending the stylesheet's location to the current location defined in your browser (/category/page/).
Even though the server-side is rewriting that URL, the browser is unaware of the rewrite.
If you use an absolute URL instead, your browser will define the URL relative to the BASE url (/).
Try this:
<link rel="stylesheet" type="text/css" href="/style/style.css"/>
Use this RewriteRule
RewriteEngine On
RewriteRule ^(.+)/(.+)/$ index.php?page=$1_$2 [L]

.htacces Appears only html with no CSS or PHP

I've been wondering on the internet on how to work with htacces(really hard to learn it). And when I was lurking in the internet, I found this: http://www.generateit.net/mod-rewrite/
Well, I inserted my url(working on localhost):empresa.com/index.php?p=sub_artigo&id=1&cat=Mercearia
and it gave me this(with all options by default):http://empresa.com/sub_artigo/5/Mercearia.html
And the .htacces code was this:RewriteRule ^([^/]*)/([^/]*)/([^/]*)\.html$ /index.php?p=$1&id=$2&cat=$3 [L]
And when I generate the url in php I do
$response2[nome_sub_artigo]
And then, when I click the button, it appears like, only html.
example: http://s14.postimg.org/wr137fx4x/htacces_error.jpg
Any idea what is happening ?
It looks like you are using relative links for your assets (images, javascript, css).
That means that when you look for css/my_stylesheet.css, from the new url, the browser will request a url like http://empresa.com/sub_artigo/5/css/my_stylesheet.css.
The easiest solution is to always use absolute urls for your assets, like /css/my_stylesheet.css, etc.
Your PHP code is outputting relative paths to the style sheets.
Example:
<link rel="stylesheet" type="text/css" href="styles.css">
Given your example input URL, this causes the browser to look for a stylesheet at the following URL:
http://empresa.com/sub_artigo/5/styles.css
This is because the browser doesn't know that the URL has been rewritten - it believes it is viewing a file in a subdirectory that doesn't really exist.
Instead you should use an absolute path, such as:
<link rel="stylesheet" type="text/css" href="/styles.css">
Notice the leading / on the path? This will tell the browser to look from the root of the domain:
http://empresa.com/styles.css
In this way you can still decouple your HTML from the protocol and domain/port (so you aren't tied to http://empresa.com) but the path will always be the same regardless of the URL that was used to reach the referencing page.
Try this code :
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^/]*)/([^/]*)/([^/]*)\.html$ /empresa.com/index.php?p=$1&id=$2&cat=$3 [L]

Strange php behavior

I was busy on my website doing URL rewrites when suddenly something happened from which I really don't know how it happened or how this is possible and how to maybe prohibit this from happening, probably some little mistake in the URL rewrite rule where I try to force the www in front of the address but when I remove the www. and press enter it comes up with an address which he can't find cause he doesn't put a / behind the .nl
somehow a extra index.php got fixed in between and what happens that in this way the whole website can be seen without any CSS markup...
it is reproducible, just fit the extra index.php in between like the example and the whole website can be seen and surfed without any markup from the CSS file
[http://www.capoeiravelsen.nl/index.php/index.php?page=home]
what is actually happening here ? why isn't it reading the CSS file in this way. of course users are not just gonna fix the extra index.php in between but does this presents a sort of security breach or bug or whatever....
[EDIT]
yeah it sounds logic that it can't fetch the CSS cause it looking in a
different directory or something, still don't know how it still can
fetch all the other docs then since a folder named index.php doesn't
exist in any way.
it happened with this rewrite rule:
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteCond %{HTTP_HOST} (.*)
RewriteRule (.*) http://www.%1$1 [R=301,L]
where I forced the www in the address, but when a some random crazy
user would want to delete the www. and pressed enter the weird effect
occurs.
the request would then change to:
[http://www.capoeiravelsen.nlindex.php/?page=home] where the browser
says it can't find that page of course
not noticing the / in between .php and ? I put a / in between .nl
and index.php so it would become
[http://www.capoeiravelsen.nl/index.php/?page=home] and pressed enter
then the whole address changed to:
[http://www.capoeiravelsen.nl/index.php/index.php?page=home]
where browsing the site is possible but without markup...
I solved this issue by changing the rewrite rule to:
RewriteCond %{HTTP_HOST} !^www\.
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]
when some random user would delete the www. and pressed enter nothing
crazy happens the www. just gets forced again
You are linking the CSS relatively
<link href="inc/stylesheet.css" rel="stylesheet" type="text/css">
When you are accessing /index.php/index.php?page=home the browser look for the CSS file in
/index.php/inc/stylesheet.css
The Solution is :
Fix the rewrite so it won't allow using "/" after the php file (this way the OS looks for folder named "index.php"
link the CSS file absolutly:
i.e:
[link href="/inc/stylesheet.css" rel="stylesheet" type="text/css" />
(replace the [ with < :) )
Hope it helps
It will try to fetch the CSS files from the directory /index.php/ on your web server and not / as expected. It is not a security breach
I don't know about your rewriting rules since you haven't posted them, but the problem with missing CSS is because you're linking the stylesheet and other files in your HTML with relative paths, i.e.:
<link href="inc/stylesheet.css" rel="stylesheet" type="text/css">
Since your URL is http://www.capoeiravelsen.nl/index.php/index.php?page=home that makes the browser request a file located under http://www.capoeiravelsen.nl/index.php/inc/stylesheet.css, which, of course, doesn't exist on the server.
One solution is to change all paths in your HTML to absolute, i.e.:
<link href="http://www.capoeiravelsen.nl/inc/stylesheet.css" rel="stylesheet" type="text/css">

Mod Rewrite path issues

I have successfully created rewrite rules to handle URLs like
http://example.com/xyz
http://example.com/xyz/
http://example.com/xyz/abc
http://example.com/xyz/abc/
Here is the mod rewrite & regex:
Options +FollowSymlinks
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^/?([0-9]+)(?:\/)?$ /index.php?p=$1 [L]
RewriteRule ^/?([-a-zA-Z0-9_+]+)(?:\/)?$ /index.php?n=$1 [L]
RewriteRule ^/?([-a-zA-Z0-9_+]+)/([-a-zA-Z0-9_+]+)(?:\/)?$ /index.php?n=$2 [L]
This works great, but the problem is that when I go to http://example.com/xyz/abc, my script gets the correct input (n=abc) but the paths are messed up, so all relative URLs in my code are broken, as they are now relative to xyz instead of the root.
Is there a way around this at all? As you can see above I have tried to redirect to /index.php to force the path to be correct. My brain is fried after a long day of regex and code, so I hope it's not something disastrously trivial.
Use the HTML base element to force all relative URLs to use a different path than the one the browser displays.
<base href="http://www.example.com/"/>
...
link
The relative URL will use "http://www.example.com" as its base, even if the browser thinks it's looking at the page "http://www.example.com/xyz/". So the link goes to "http://www.example.com/relative/url" instead of "http://www.example.com/xyz/relative/url"
And there's the Stack Overflow way of doing it, in which every URL is either an absolute path (to resources like images) or paths including the root (i.e. "/feeds/questions/123"), which avoid the relative path issues.
The three options are:
1) Use a base tag (this will affect every relative URI on your page, including links, images, scripts, stylesheets and so on)
<base href="http://yoursite/">
2) Change all of your links to fully qualified URIs
<a href="http://yoursite/yourpage.html">
3) Use the "/" prefix to show that the path is relative to the root on each URI.
<a href="/yourpage.html">
I have personally used the base-tag option the most, which does get some bad press (from people that have used it without really understanding it). When it comes to mod_rewrite, the base tag is perfect as you probably DO want all your paths to be relative to the root, including all your images, css, scripts and links.
Edit: I assume you are talking about URLs in your HTML code, e.g. to images and stylesheets, that are broken.
Nope, as far as I know there is no way around it, because the browser sees a path, and requests resources relative to it. It has nothing to do with the server, and there is nothing you can do.
You will either have to resort to a different splitter that is not interpreted as a directory splitter (e.g. underscores), or use absolute paths, or use the <base> tag. I have never used the base tag myself, however, and it is not very well regarded wherever you look. The best thing would probably be to switch to absolute paths.
modify your last RewriteRule to include the path. you have the path in the regular expression.
RewriteRule ^/?([-a-zA-Z0-9_+]+)/([-a-zA-Z0-9_+]+)(?:\/)?$ $1/index.php?n=$2 [L]
or alternatively (depending on what you are trying to achieve):
RewriteRule ^/?([-a-zA-Z0-9_+]+)/([-a-zA-Z0-9_+]+)(?:\/)?$ /index.php?n=$1/$2 [L]
I tried using the BASE element in my pages as a shortcut instead of changing all urls. Add the base element as follows:
<base href="/">
And here are the results:
This: <link type="text/css" rel="stylesheet" href="my.css">
Becomes: <link type="text/css" rel="stylesheet" href="/my.css">
This: <script type="text/javascript" language="javascript" src="include/my.js"></script>
Becomes: <script type="text/javascript" language="javascript" src="/include/my.js"></script>
This: <a href="foo.html">
Becomes: <a href="/foo.html">
This: <a href="foo/bar.html">
Becomes: <a href="/foo/bar.html">
You can always override the base tag where necessary:
This: <a href="/foo">
Remains: <a href="/foo">
This: <a href="/foo/bar/">
Remains: <a href="/foo/bar/">

Categories