Why can't I link my CSS when it's outside the root directory?

Question

I've been trying to reorganize my website's folder structure to make it impossible for users to reach certain directories or files via URL, and moved these folders outside the root folder based on this answer. Since I'm testing this on a local server (xampp), I changed this in my httpd file:

DocumentRoot "C:/xampp/htdocs/website"
<Directory "C:/xampp/htdocs/website">...</Directory>

and my website's folder structure now looks like this:

htdocs
    css
        styles.css
    includes
        header.php
    website
        index.php

Typing localhost into my browser correctly displays index.php, which includes my header with include '../includes/header.php';. In header.php I've tried linking my CSS file like this:

<link rel="stylesheet" type="text/css" href="../css/styles.css">

I thought this would simply go up a directory from includes or website to css since that has worked for all of my includes, but no matter what I've tried (including other links) I cannot get my CSS to work unless I put the css folder somewhere inside the root directory. I've also tried spamming CTRL+F5, opening my website in every major browser and restarting Apache.

I'm sure there must be a simple explanation for this that I'm overlooking.

score 3 · Accepted Answer · answered Aug 28 '18 at 01:58

3

The php include is done by the php interpreter itself (it has access to ALL the system) and the user accesing your site has no way to modify that, the user doesn't even know and can not know that since there's no acces for him to that.

But for obvious security reasons you can't let a user have access to parent directories. Just imagin if someone could do a request to ../../../home/youruser/ and point to any file on the server! That would be insane and a really big security breach.

You just can not move up from DocumentRoot path when you do a request.

You have to move the css folder inside website and point at it using /css/style.css.

answered Aug 28 '18 at 01:58

arieljuod

15,460
2
25
36

While it's not necessarily a security issue, is there a better way for me to "hide" my CSS folder, other than naming it something obscure? I suppose this might apply to Javascript files as well. – Ginger and Lavender Aug 28 '18 at 02:06
1

@Dalsia you cant hide it, any one can view the web page source on a browser and find it, its the browser that reads the css file. When i visit your site the css file gets copied to my computer – Aug 28 '18 at 02:09
Yes I know, but since you link JS files the same way shouldn't I be able to hide those? I mean, some of my JS files contain information about certain PHP scripts that the user doesn't or should not know about. – Ginger and Lavender Aug 28 '18 at 02:11
2

@Dalisa, you cannot hide css nor javacript files. If the user can't see then, neither the browser can see them, and the site won't work. You can obfuscate, uglify or minify your assets, but there are tools to prettify them. Are you worried about someone stealing code from you? if you have really important business logic that can't be seen be the user then it should not go inside a js file. If you see an html tag like this `` it's a css file, you can't hide that from a user. – arieljuod Aug 28 '18 at 02:16
No, I don't have anything crucial to hide in these files, I just want my website to be as secure as possible. I have spent a great deal of time ensuring it's safe, but I'm glad you clarified this for me. Thank you! – Ginger and Lavender Aug 28 '18 at 02:19
1

About those PHP scripts you wrote before, you have to assume that someone with some web knowledge can find them (you can't hide them), and think on how to secure those endpoints if you think that represents a security risk (authentication, referer restrictions, CSRF tokens, session keys, there are a lot of techniques). – arieljuod Aug 28 '18 at 02:21

score 1 · Answer 2 · answered Aug 28 '18 at 02:26

You can't prevent people from loading CSS that is delivered via a link tag. Their browser already cached it the moment your page loaded.

You can use the structure you presented and deliver CSS via server-side includes using the style tag.

Server-Side CSS File

In ../css/styles.css, place your stylesheet data. This will be imported inline via a PHP include later.

h1 {
  text-decoration: underline;
  font-size: 1.4em;
}

Injecting Styles Server-Side

<html>
<head>
  <title>Example inline CSS</title>
  <style media="all">
  <?php include_once '../css/style.css'; ?>
  </style>
</head>
<body>
  <h1>Page with server-side CSS.</h1>
</body>
</html>

Sample Output

Now, with all of that said - I'm not sure why you'd want to do any of this. The web is designed to be open - sharing code and techniques is a large part of why HTML, CSS, and JavaScript have been so successful. Attempting to hide your techniques won't deter anyone who wants to "steal" from you, and will likely cause performance and stability issues with your site.

Why can't I link my CSS when it's outside the root directory?

2 Answers2

Server-Side CSS File

Injecting Styles Server-Side

Sample Output