I currently have a form that allows administrators to change basic CSS attributes on a website. I was thinking of creating a form for advanced admins that will display the entire CSS file inside a text area and allow them to edit it freely. Im not worried about the file being wiped as it can be easily restored. What i am worried about is that someone could add some code to the CSS file that could cause major damage to the web server. Is it possible to execute malicious code from a CSS file?
Yes, there are some XSS risks to consider. XSS doesn't attack your webserver directly with malicious code. It is an attack on other users of your system, via their own browser. Basically, it is a browser based code execution flaw, albeit limited via what JavaScript can do (quite a lot though, bar from escaping from the browser sandbox).
As you are letting them edit text presented in a CSS file, this mitigates some of the attacks that are only possible when CSS is embedded in an HTML document (such as via STYLE="" attributes and <style> tags).
However, the following risks are still present:
The JavaScript expression directive allows JavaScript to be inserted into a CSS stylesheet. Note that this only affects Internet Explorer version 8 and earlier.
The url directive can allow JavaScript: style URLs on Internet Explorer 6.
Script execution via -moz-binding is available on Firefox 2 and 3. The Google Browser Security Handbook doesn't appear to have been updated since Firefox 3. This post indicates this is now fixed so that the XML file has to be readable from your own domain. XBL doesn't seem to be possible in current versions of Firefox.
In Internet Explorer 10 and earlier HTML Components allow script execution in CSS.
Note that allowing users to alter your CSS gives them the ability to freely position text. This would enable a malicious user to mimic trusted UI elements with their CSS code and possibly being able to trick users with the newly rendered page. This very much depends on the functionality present and the intent of the rest of your site. Definitely bear this in mind.
It can if they have access to modify. The below link describes xss and css (cross site scripting). They can redirect your background as one example
http://www.acunetix.com/websitesecurity/cross-site-scripting/
If they have access to the css file they can link it to another file that contains malicious content
Potential xss vulnerability if style.css is served with the wrong content-type header.
style.css
<script>
alert(document.cookie)
</script>
attack.html
<iframe src="style.css"></iframe>
Related
As a web developer, is there any way to prevent a user's Chrome extensions from being applied to my site? i.e. a header, meta tag, anything? Additionally, if there is, is there also a way to whitelist particular extensions?
It's not possible. At the web server end, you are only only able to control what the browser will allow you to control. In simple terms, this means you can control the data (HTML, javascript, headers etc) that you send back to it. That's about it.
Can't you create a Content Security Policy (CSP) and block inline javascript and only allow javascript from specific domains? You could even create a CSP in report-only mode and collect violation reports via something like https://report-uri.io/
Is there any way to find which CSS tags and elements are related to the specific HTML page section?
For example: We have a large CSS file but few of elements are related to content in HTML classes, is there any way to find related elements and remove other parts?
How large is the CSS file? I can't think of anything else than splitting it to multiple libraries and then including a library in your page if it's required.
For example, if the page has a slider then it will have a CSS link to slider.css this might not be ideal when you send too many HTTP requests so you might embed the library as internal <style> CSS. I've seen many WordPress theme developers use that technique.
This shouldn't be a problem since minification and Gzipping reduce the filesize drastically and once the file is cached your users wouldn't need to wait extra time to load your next pages.
For Chrome
In the Chrome DevTools, there is an Audits tab that will allow you to run a Web Page Performance audit and see a list of unused CSS rules :
For Firefox
You could install one of these add-ons :
CSS Usage for Firebug
Dust-Me Selectors
CSS Usage
Dust-Me Selectors
I don't think there is. It would be really hard to do this, too, because your system could build up a page by including 500 different files of different languages. How could such a program know which of your files is included where and under which conditions?
The thing that I think comes closest would be using your DevTools to see which styles apply to which element and maybe by hand or in an automated way create a list of which CSS rules apply to which end-page (for example which URL endpoint) element. But! Even then it would be hard, because it would be really hard for a program to find out which styles are dynamically added to elements (for example Javascript could add/remove classes when a user performs a certain action).
I am using Emmet Livestyle with Chrome and Sublime text editor. I am editing my files locally and can update my css and js from the devtools so that those changes are reflected at the same time in my local files too. But how can I update my html code too?
We cannot persist HTML edits back. Because, well, you aren't editing HTML. Here is what is going on...
The server sends Chrome the page (HTML.) This is taken, tokenized, then a DOM (Document Object Model) is constructed out of it. The page is then trashed and only the DOM is kept in memory. That is what you are seeing on the Elements panel. That panel is the full DOM as it is, made to look like HTML markup for ease-of-use.
That HTML sent down from the server, can be generated by PHP, Ruby, C, hand-coded, whatever. There is no way for DevTools to know. So, there is no way for us to transfer source edits in the DOM back automatically. CSS and JS both can take advantage of sourcemaps so DevTools know where to send things back. It isn't 100%, since say if you are using a variable you aren't editing the variable back but changing the set value (at least in CSS.) But it is good enough for the majority of uses. With HTML generation by backend languages, these kinds of kinks become even more complex, unmanageable, and will end up providing not the best experience for developers.
The best thing you can do is setup workspaces and move to editing your source in DevTools. However, this has the pitfall that custom extensions are not supported at this time. So you have a very generic writing experience going this route.
Browser is a http client..... html code is supplied from the server...... If you're developing and owner of the server side code.... Then replicate the changes you made in the cascading style sheet at the server side.
I'm looking to create an extension for personal and possibly personal friend usage as well that simply changes a few colors that are displayed on a website I visit. I use Reddit Enhancement Suite, which has options for 'Night mode' that completely changes the color appearance of Reddit.
I would like to know how to edit or inject CSS code to this website so that the colors used in the website are what I would like them to be when I view the page. Mind you, this is of course just in my browser or in another Chrome browser using my extension.
You can do exactly as you said: you can inject a CSS file or code into the page.
The easiest way is through the manifest (look at the CSS property).
You only need to complete your manifest.json in order for Chrome to know in which pages it has to insert your CSS file into.
If you want to decide programatically when to insert the CSS, you can use chrome.tabs.insertCSS(), where you can insert a CSS file or just the code as a string.
Instead of an extension, you could also do it in a user script. Then you can simply use GM_addStyle, just like with Greasemonkey scripts. It's much simpler to write and more lightweight in terms of memory usage.
There are already extensions made for this. The one I use is called Stylish, which only modifies appearance using CSS3 only, and not html. There are other extensions as well, do some google searches and you will find a few more.
I'm trying to make a page that shows how to enable JavaScript in various browsers.
The users that view the page will not have JavaScript enabled, so I can't use JavaScript to detect the browser.
How can I detect the browser without using JavaScript, PHP or ASP.NET?
The idea I have in my head is that the page will show the appropriate instructions to enable JavaScript in the user's browsers with pictures and text.
Sorry for the bad english.
Thanks!
EDIT: Is it a bad idea to use conditional comments? Why not?
You can't. You need something on the back end to read the user agent.
AFAIK, there's no way, except asking the user:
If you're using Internet Explorer (nice image of the IE logo): click here;
If you're using Firefox (nice image of the Firefox logo): click here;
Your question doesn't leave much room for providing an answer, but I'll give it a shot:
You can use a <noscript> block to provide page content which will only be visible when JavaScript is disabled.
Alternately, you can also use a JavaScript onLoad method to remove an ordinary <div> or similar element from the page when JavaScript is enabled.
The <noscript> element is generally preferred, as it will simply not appear on the page if JavaScript is already enabled.
As far as detecting which browser they're using, you need some technology on the back-end which is capable of parsing the request headers that the browser sends. This can technically be done by the web server itself using server-side include and some clever rewrite rules, but it is actually harder that way than to just learn to use a server-side scripting language.
If you're doing this for a reason (i.e., you're using an embedded webserver with little to no free space), your best option if you only want to provide a static page (in other words, just an HTML file) is to have the page content include a <noscript> block at the top, and an invisible block at the bottom (<div> with hidden), then enable the hidden div on page load via JavaScript.
Include two or three blocks with <a> anchor tags which explain how to enable JavaScript in EACH browser, and have the user click the logo that looks more familiar (all inside your <noscript> block).
That being said, server-side scripting is easy to use, easy to set up, and completely worth learning. It's quite a bit easier and more predictable than doing everything with JavaScript.