I have a question about file permissions of html - css files served by httpd (on CentOS).
I have a website with several html - php - css files. When a user enters the URL of my website, index.html is displayed as it should. I tried to browse one of my css files (just for fun), and I realized that css source code is displayed in the browser. I do not publish the css files and their exact names of course, but some names (e.g style.css , bootstrap.css etc) are trivial, and one can try and get the styling of my webpage easily.
What is the solution to that? I cannot take off the read permissions of these files, because apache would not style the html files (since it will not be able to read the css).
There's no solution to that, css files must be readable and downloadable. You can minify them if you want them to be less readable (and smaller which is its real use).
Edit: Relevant Answer
Related
I was wondering if there is a file format around where I can put (one or multiple) .css and (one or multiple) .html files, for example as a .zip (or similar) file AND your favourite browser can recognize it and opens it as a sort of static local "web page".
My use case would be to create html reports of some program execution, style it with a standardized css file and upload it on a cloud service, such that anyone with access can view it direcly in the browser.
I know a litte about html and css, but not enough to answer this question myself.
And "combine html and css" is not searchable on the web, so I'm asking you.
I'm not looking for a solution which bakes everything into one file.
I'm also not looking for an unzipped version of this (a folder), since that is not uploadable to most cloud storages I am aiming for.
Thank you.
AFAIK, there is no file format for that, but what you can do is create a folder in your htdocs or public folder and add all your .css and .html files in there. Then access it in localhost/yourfolder or if you are using a host http://yourdomain.com/yourfolder. For your HTML files to display the style correctly, they should be linked with the .css files or with the style inside each .html file between <style></style> tags in the <head> section.
You will see something like this, where you and others can preview and navigate through all HTML and CSS files.
Note: I've never done this on a host only on localhost, if you are using a host you will probably need to create permisions to access this folder, in that case contact your host so they can explain.
Just wondering how/why this works, when I'm making a simple html file and linking in some css, then dragging my html file into the browser, no static web server is needed for me to view the file.
Why is that so..
I'm looking at my browser's network tab, and no request is made for the css file, and my browser still displays it perfectly..
Is there a way to do without a static file server on the web for html, css, js files, like when dragging and dropping a file into a browser?
Just going back and requestionning basics here..
Thanks in advance!
Because the link to your CSS file is relative, and your CSS file is accessible locally. Browsers can be used to access local files, not just files on the Internet.
When working with links, you may see just the name of the file referenced, as such:
Link
This is known as a relative link. file.html is relative to wherever the document is that is linking to it. In this case, the two files would be in the same folder.
There's a second type of link, known as an absolute URL, where the full path is specified.
Consider a typical absolute website link:
Link
With a local file, this would essentially be:
Link
The file protocol can be used to access local files.
Considering both the homepage (presumably index.html) and file.html would live in the same folder on both a web server and your local machine, Link would work for either scenario. In fact, with a relative link, the location of the second file is automatically determined based on the location of the first file. In my example, index.html would live at file://[YOUR WEBSITE]/index.html, so your browser is smart enough to known to look in file://[YOUR WEBSITE]/ when searching for any relative URLs.
Note that the same scenario applies to any other file! <link> and <script> tags will look for files in the exact same way -- that includes your stylesheet :)
Hope this helps!
Sounds like you are new to HTML and web development.
It all has to do with relative versus absolute file paths.
Check out these articles and have fun coding! Always remember that Google is your friend, improve your search-foo and you will not have to ask questions like this.
God speed.
http://www.geeksengine.com/article/absolute-relative-path.html
http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
How to properly reference local resources in HTML?
I have a small problem that concerns an outsourced website development company who will not (for perfectly normal and valid reason) allow us access to the server to alter stylesheets. I've been tasked to redesign a website layout. Problem is, I cannot access the website nor a dev environment to alter the stylesheets to bring forth these ideas. Only route to this would be to create a local custom.css to send via email to the person who uploads them. However, I cannot in good faith just throw them a CSS file to be applied on a live site without fully cross-browser checking it and I cannot do this locally on IE, Safari or Opera.
One solution was to save the website locally as HTML (file, save as...) but the problem is the background CMS is complete crap, meaning it has like 200 completely unnescessary CSS files and it is organized as:
main.css has 7 #import rules with relative paths.
Inside this is another stylesheet with 16 #import rules with relative paths.
Inside this... You get the picture.
This would mean I would have to shift through these 200 import rules and files to download them manually via the address bar. So my question is:
How can I save this website as HTML to my computer to apply a custom user stylesheet file to it so I can cross-browser test it properly? Is there some website that can go through a site and compress all the CSS to one file or smth?
You can download a whole website with dependencies using programs like HTTrack
http://www.httrack.com/
It allows you to download a World Wide Web site from the Internet to a local directory, building recursively all directories, getting HTML, images, and other files from the server to your computer. HTTrack arranges the original site's relative link-structure. Simply open a page of the "mirrored" website in your browser, and you can browse the site from link to link, as if you were viewing it online. HTTrack can also update an existing mirrored site, and resume interrupted downloads. HTTrack is fully configurable, and has an integrated help system.
WinHTTrack is the Windows 2000/XP/Vista/Seven release of HTTrack, and WebHTTrack the Linux/Unix/BSD release.
It doesn't consolidate all the CSS files into one, but it is better to retain the files as-is if you want to minimize changes
I work on a very large enterprise web application - and I created a prototype HTML page that is very simple - it is just a list of CSS and JS includes with very little markup. However, it contains a total of 57 CSS includes and 271 javascript includes (crazy right??)
In production these CSS/JS files will be minified and combined in various ways, but for dev purposes I am not going to bother.
The HTML is being served by a simple apache HTTP server and I am hitting it with a URL like this: http://localhost/demo.html and I share this link to others but you must be behind the firewall to access it.
I would like to package up this one HTML file with all referenced JS and CSS files into a ZIP file and share this with others so that all one would need to do is unzip and directly open the HTML file.
I have 2 problems:
The CSS files reference images using URLs like this url(/path/to/image.png) which are not relative, so if you unzip and view the HTML these links will be broken
There are literally thousands of other JS/CSS files/images that are also in these same folders that the demo doesn't use, so just zipping up the entire folder will result in a very bloated zip file
Anyway -
I create these types of demos on a regular basis, is there some easy way to create a ZIP that will:
Have updated CSS files that use relative URLs instead
Only include the JS/CSS that this html references, plus only those images which the specific CSS files reference as well
If I could do this without a bunch of manual work, if it could be automatic somehow, that would be so awesome!
As an example, one CSS file might have the following path and file name.
/ui/demoapp/css/theme.css
In this CSS file you'll find many image references like this one:
url(/ui/common/img/background.png)
I believe for this to work the relative image path should look like this:
url(../../common/img/background.png)
I am going to answer my own question because I have solved the problem for my own purposes. There are 2 options that I have found useful:
Modern browsers have a "Save Page As..." option under the File menu, or in Chrome on the one menu. This, however does not always work properly when the page is generated by javascript
I created my own custom application that can parse out all of the CSS/Javascript resources and transform the CSS references to relative URLs; however, this is not really a good answer for others.
If anyone else is aware of a commonly available utility or something like that which is better than using the browser built in "Save page as..." option - feel free to post another answer.
I'd like to load all the MedaiWiki static resources from a Content Delivery Network (CDN) for obvious reasons (using MW 1.17.0).
I think I need to set $wgStylePath=http://cdn.example.com/ Then put everything currently in my /skins/ directory into http://cdn.example.com/
(this appears to be suggested in this Stack Overflow question/answer: How can you change images src attributes in mediawiki to access a CDN? but it's not very clear
My concern is the .php files that are currently in the /skins/ directory...
My only thought is that I need to put all the sub-directories from /skins/ into the CDN, but not the .php files that are directly in /skins/
Maybe I'm going about this the wrong way... is there a better way to achieve what I'm trying to do? (I'd like all the theme related .js, .css and image files to load from the external CDN)
Thanks,
-Dan
There are two completely different paths here: the filesystem path through which the webserver accesses skin-related PHP files ($wgStyleDirectory) and the URL which will be placed in the HTML code and used by the browser to access css/js files ($wgStylePath). If you want to use a CDN, you set the latter to the CDN url and leave the former in peace.