SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Sep 2010
    Location
    Shanghai, China
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [discussion]css security issue

    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. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code HTML4Strict:
    <!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. #4
    SitePoint Member
    Join Date
    Sep 2010
    Location
    Shanghai, China
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    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.
    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. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Member
    Join Date
    Sep 2010
    Location
    Shanghai, China
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    You would not have to style all of the psm children, but whatever you hook that ID to will win out over any classes.
    Thanks! Rayzur. I got what you mean. Let me think it over. Thank you very much

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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. #8
    SitePoint Member
    Join Date
    Sep 2010
    Location
    Shanghai, China
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.
    Thanks Paul! I think maybe the best way is to make convention with the third-party developers!

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by goddy128 View Post
    Thanks Paul! I think maybe the best way is to make convention with the third-party developers!
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •