[discussion]css security issue

HTML & CSS
1

How to prevent thirty-party css code from damaging my own page style?

My Case condition:

  1. Page’s style can be customized by third-party css code
  2. Page has its own private section which doesn’t allow other code modify its style.

For example:

Page may like this:
<div class=“page”><div class=“other”></div><div class=“.psm”><h2></h2></div></div>

Thirty party code may like this:
.page{ color: red;}
.page h2{color: blue; font-size: 100px;} /* danger: it will influence the .psm h2 which is a private section */

So, how to provide a way to satisfy above two condition? which means letting
thirty-party css code customize all page content but the private section?

Any ideas?

2

You could try counteracting the styles or using inline styles though of course it depends on what actually; you can and cannot edit. I assume you already know about CSS classes.

3

Hi,
As long as the page div is not an ID and it is left as a class (as you show it) you should be ok by styling your psm div and it’s children.

If your psm div is just found in one spot on each page then you can make it an ID and it will carry more weight than a class.

If all else fails you can apply the !important declaration to your styles, only as a last resort though.

EDIT:
Of course it depends on how the cascade is set up if they are all left as classes. Your stylesheet would need to be last in the cascade of your linked sheets in the head element.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
.page{ color: red;}
.page h2{color: blue; font-size: 50px;}

.psm {color: orange}
.psm h2{color: green; font-size: 20px;}
</style>

</head>
<body>

<div class="page">
    <div class="other">
        Generic page text
        <h2>other h2</h2>
    </div>
    <div class="psm">
        Generic private text
        <h2>private h2</h2>
    </div>
</div>

</body>
</html>
4

But it doesn’t make sense to style all the PSM. For example, as the following psm html:
<div class=“.psm”>
<div class=“header”><h2>module title</h2></div>
<div class=“content”>
…<!–complex html tags to express the module contents–>
</div>
</div>

So, I can’t explicitly style all the dom inside the psm. for h2, it has its default browser style.

Style psm with ids or !important doesn’t seem to be a good solution.

5

I made an edit to my last post and gave an example of setting up the cascade.

Style psm with ids or !important doesn’t seem to be a good solution.
The question is: Will that psm div just be used once on each page?

If yes, then an ID is the best way to give more specificity to your styles.

You would not have to style all of the psm children, but whatever you hook that ID to will win out over any classes.

#psm h2 {color:green; font-size:20px}

will overpower any .page h2 styles

6

Thanks! Rayzur. I got what you mean. Let me think it over. Thank you very much

7

It can’t be really be done in total because a user stylesheet that use !important will override anything you put in place of the same weight.

You can of course set up your own important rules and hope that by setting ids that your rules will carry more weight and then they will win out. It would be hard for a user to guess what ids you were using but is not foolproof of course.

However unless you set all properties for every element any style you missed would still cascade into your pageif the user had set it in their user stylesheet using !important.

!important was specifically changed in css2.1 to allow user stylesheets to make sure that they get what they want and not what you want I’m afraid.

8

Thanks Paul! I think maybe the best way is to make convention with the third-party developers!

9

Yes, I was explicitly talking about “user stylesheets” which will always win out but on third party code you should always be able to win out assuming you can counteract what they have applied.

Third party code (if well written) should normally be self contained and only apply directly to their own code and avoid all global references.

Due to the very nature cascading nature of CSS it is very difficult to stop code cascading into other sections. It would be nice to have an isolate (or protected) feature but I’m sure that would produce as many reverse issues where code that needs to be affected isn’t :slight_smile: