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 comment
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 comment
Share on other sites


Thanks DaveJ, i know XSS would be a serious problem. That's why i will use HTML Purifier to sanitise the user-codes. Do you think it will be safe enough?

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...