CODEWITHSUNDEEP
phphtmlcss
Ginger and Lavender
Ginger and Lavender

Reputation: 468

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

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.

Upvotes: 2

Views: 2757

Answers (2)

Will Bickford
Will Bickford

Reputation: 5386

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

enter image description here

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.

Upvotes: 1

arieljuod
arieljuod

Reputation: 15848

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.

Upvotes: 3

Related Questions