Jump to content

Recommended Posts

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: post-8945-0-48037300-1387554782.png 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: post-8945-0-66431200-1387554793.png 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 by midnite

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

dsonesuk, thanks for reply! Do you think using position: relative; and overflow: auto; can effectively restrict all the elements visually inside div#jail?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...