midnite Posted December 22, 2013 Share Posted December 22, 2013 (edited) I am going to design a webpage, which contains <div>(s) that allow users to submit their (X)HTML with CSS, and being inserted into those <div>(s). I understand it will suffer from XSS seriously, so I will use HTML Purifier to sanitise the (X)HTML and CSS. For instance, I will definitely not allow <script>, <iframe>, and external resources. But I wish to allow almost all other tags and CSS attributes. Here comes the question. I wish to keep client elements (visually) inside the <div>(s). I have tried a partial solution, by using position: absolute; and overflow: hidden;, as follow: <html><head><style>div#jail { position: absolute; overflow: hidden; border: 1px dotted red; height: 200%; width: 50%; left: 25%; top: 25%;}/* All client's CSS is ensured prefixed with div#jail */div#jail .client_code { margin: 0; position: absolute; top: -8px; z-index: 1000;}</style></head><body><div id="jail"> <p class="client_code">elements being jailed</p></div></body></html>The effect of the codes above is as follow: The red dotted line is the "Jail". The purpose is to make any HTML codes with any CSS (prefixed with div#jail) to visually keep inside the box. As shown above, the line of text tried to move out of the box. However, because of overflow: hidden, it is just clipped. So nothing could escape the "Jail". This is good. So far, I have successfully jailed <p> inside div#jail for most kinds of client's HTML elements and CSS, except when user uses position: fixed;. div#jail .client_code { position: fixed; top: 0px;}The following is the screen capture, which the "jail" failed: As shown above, if the position: fixed CSS is applied to the jailed elements, the result is that the line of text can be shown outside the box - i call it a breakthrough of the jail. This is not good. So, my question is, how to ensure everything are visually "jailed" inside the box? If position: fixed is the only CSS which can cause this breakthrough, i can just prohibit position: fixed and the Jail would be enforced. If there are any other ideas/design to achieve this, any solutions are welcomed! Thanks a lot! Edited December 22, 2013 by midnite Link to comment Share on other sites More sharing options...
dsonesuk Posted December 22, 2013 Share Posted December 22, 2013 (edited) To force position: absolute; elements positioning to be governed by the parent container they are in, the parent container must use position: relative; otherwise its position will be governed by a outer element container using position: relative OR if none exists the browser window outer edges. Position: fixed; positioning is ONLY governed by the browser window outer edges. <html><head><style>#wall {position: relative;overflow: auto;border: 1px dotted red;height: 90%; width: 50%; margin: 0 auto;}#jail {position: absolute;top:0; left:0;margin: 10px;}/* All client's CSS is ensured prefixed with div#jail NOTE: #jail will be sufficient id are unique it can't be used on any other element*/#jail .client_code {margin: 0;}</style></head><body><div id="wall"><div id="jail"><p class="client_code">elements being jailed</p></div></div></body></html> Edited December 22, 2013 by dsonesuk Link to comment Share on other sites More sharing options...
midnite Posted December 22, 2013 Author Share Posted December 22, 2013 Thanks dsonesuk for explaining about the governing elements. I have a question. To force position: absolute; elements positioning to be governed by the parent container they are in, the parent container must use position: relative; otherwise its position will be governed by a outer element container using position: relative OR if none exists the browser window outer edges. In my simple test below, for a position: absolute; inner element, in addition to being governed by a position: relative; outer element, it can also be governed by a position: absolute; outer element. Isn't it? <html><head><style>#outer { position: absolute; overflow: auto; border: 1px dotted red; height: 200%; width: 50%; left: 25%; top: 25%;}#inner { position: absolute; top: -10px; right: -10px;}</style></head><body><div id="outer"> <div id="inner"> just a line of text </div></div></body></html> However, I do agree that, if both position: relative; and position: absolute; can be used to govern the inner elements, using position: relative; would be a better choice, as it is more friendly to other elements in the webpage. Position: fixed; positioning is ONLY governed by the browser window outer edges. Secondly, do you mean that position: fixed; "reports" only to the browser window outer edges, thus position: fixed; elements can always breakthrough (ignore) its outer element(s)? I guess I didn't state my question and objective clear enough in the first post. [*]I will have a <div id="jail"></div> in my webpage.[*]Inside the <div id="jail"></div>, I will load the user-supplied (X)HTML codes.[*]To prevent XSS, those user-supplied (X)HTML codes will be sanitised by HTML Purifier.[*]I will allow also user-supplied CSS for adding styles to their elements. [*]To avoid user-supplied CSS messing up with my elements, all user-supplied CSS will be prefixed with #jail.[*]My objective is to add certain styles to <div id="jail"></div> (or using any other approaches) such that no user-supplied content will be displayed outside <div id="jail"></div>. Thanks dsonesuk again for your help. Do you have any ideas? Link to comment Share on other sites More sharing options...
dsonesuk Posted December 22, 2013 Share Posted December 22, 2013 Those try it out examples use iframes, which the browser window of that linked page will match the size of. The position absolute; within position; absolute elements will seem to be governed by the outer but it will break if the outer is not contained and different browsers may give different results on how to render such a layout. position: fixed is TAKEN completely out of the flow of the other elements, you can place it anywhere within the body, within any element with any styling, and use top: left: properties will position itself relative to the outer edges of browser viewport area. It WILL in SOME browsers, without top:, left:, right:, bottom; properties seem to follow the flow of elements around, that is why you should use minimum of top: and left: to get consistent layout in all. Link to comment Share on other sites More sharing options...
midnite Posted December 22, 2013 Author Share Posted December 22, 2013 Thanks again for your reply. Do you think if i use a position: relative; div#jail, and ban the use of position: fixed, I can visually keep everything inside the div#jail? Link to comment Share on other sites More sharing options...
dsonesuk Posted December 22, 2013 Share Posted December 22, 2013 For most yes, but! you won't stop any html inserted using position: absolute/relative; with negative values OR negative margins, text-indent: etc causing html to go outside the boundary of #jail. Link to comment Share on other sites More sharing options...
midnite Posted December 22, 2013 Author Share Posted December 22, 2013 dsonesuk, i used overflow: hidden; to visually hide elements going outside the #jail. In your examples, you used overflow: auto; (which i found it is even better as it adds the scroll bars if necessary) that can also prevent HTML goes visually outside the #jail. Do you think it is enough? Link to comment Share on other sites More sharing options...
dsonesuk Posted December 22, 2013 Share Posted December 22, 2013 Yes! using overflow: auto; is better, and is a much better option, which should give a consistent result in all browsers than what you originally had. Link to comment Share on other sites More sharing options...
midnite Posted December 23, 2013 Author Share Posted December 23, 2013 dsonesuk, thanks for reply! Do you think using position: relative; and overflow: auto; can effectively restrict all the elements visually inside div#jail? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now