Is it possible to reference images outside the domain root?

Question

I have a website with a file structure a bit like this....

/webroot/folder1/main            - php, css etc files in here
/webroot/folder1/data/images     - images in here

I.e. www.mydomain.com/index.php will point to the files in /webroot/folder1/main/

And, for example, in .css there might be a reference to an image like this...

background: url(../data/images/sprite1.png);

It is not picking up the images. I guess this is because the ../ wants to go up a level but the website thinks its at the root already so it cant go up?

Is this normal, should I have expected this to happen? Or there a way round it?

(I know I could move images as a sub-directrory of main but I have lots of google map image tiles etc in here and this would make backup difficult and I'd need to change all my tile generation scripts etc.)

I thought of pointing the domain at /webroot/folder1/ and doing an .htaccess reWrite to silently go to /webroot/folder1/main but I couldnt get it to work.

Answer 1

There is no way to reference those image files through HTML or CSS. Your "web root" is /webroot/folder1/main/ - that folder on the server corresponds to the root of your domain. So a file at /webroot/folder1/main/page.html on the server is accessed on http://example.com/page.html.

Everything below the main folder is publicly accessible using your domain, while everything above that on the server is not.

The most appropriate solution for you is to move the images folder under the main folder, i.e. so it's at /webroot/folder1/main/images/. Then the images can be referenced from the stylesheet with url("/images/file.jpg") (note the leading slash on the URL).

There are reasons you may wish to keep files outside the web root, such as security. Moving your application files there prevents them from ever being accessible publicly in case of a server misconfiguration (quite rare).

You may also want to restrict users to viewing certain files - server side code like PHP should still be able to access the files. You would put the files outside the web root and have a public URL (e.g. a PHP script) that checks permissions and serves the file if allowed.

Answer 2

It is not picking up the images. I guess this is because the ../ wants to go up a level but the website thinks its at the root already so it cant go up?

Correct. Relative URLs are resolved by the client, not the server.

If it was possible to pass ../ to the server and escape the document root then any file on the server would be available to any HTTP client. This would be a serious security problem.

Is this normal, should I have expected this to happen?

Yes

Or there a way round it?

Expose the images on a sensible URL. You could use (to take Apache HTTP as an example) Alias to expose a directory outside the server root to a URL, or use a symbolic link, or you could just move the files so they are under the server root.

Change the URLs you are passing to the client to point to the new URLs you've set up for the images.

Answer 3

Assuming that I'm correct then your structure is like so:

/webroot/folder1/main/index.php
/webroot/folder1/main/style.css
/webroot/folder1/main/data/images/sprite1.png

If this is the case then style is also included within the root so using ../ would actually take you to /folder1/data/images/sprite1.png rather than /webroot/folder1/main/data/images/sprite1.png also because its in the root you do not need / at the start and should only be included when going up a level. So your CSS should work with the following:

background: url('data/images/sprite1.png');