Jump to content

Jail elements inside <DIV>?

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>

So far, I have successfully jailed <p> inside div#jail for most kinds of client's HTML elements and CSS, except position: fixed;.

div#jail .client_code {  position: fixed;  top: 0px;}

So, is it ok to only block position: fixed;, and the jail would be tough and valid? If there are any other ideas/design to achieve this, any solutions are welcomed! Thanks a lot!That is, if users use CSS position: fixed;, their elements could breakthrough the jail:

Link to post
Share on other sites

Can you upload pictures please of your current design and what you want it to look like.


This way I will be able to help you.


Thanks MarkT for willing to help. Here are the screenshots for the design illustration.




Firstly, 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.




Secondly, if the position: fixed CSS is applied to the jailed elements, the result is that it 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.

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.

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.

  • Create New...