ASP.NET MVC 3 - Sequester HTML.Raw Output

Question

I am working on a system where users are able to submit HTML to the system, and then 'preview' the resulting page. The HTML submitted by the user is given to the page via a call to HTML.Raw in the view, where it is displayed as part of a table with other data. In a naive implementation, it is being displayed like so:

...
    <td>
        <div>@Html.Raw(UserEnteredHTMLIsFetchedHere)</div>
    </td>
...

The problem I am having is that the user-entered HTML is not guaranteed to be error-free (far from it, in fact). If a user enters an unclosed div tag in the HTML and then goes to preview it, that unclosed tag returned by Html.Raw will close on the /div outside of the Html.Raw call and create improper nesting on the entire page.

I am looking for a way to sequester the output of Html.Raw so that unclosed tags will not interfere with the rest of the page.

I have attempted to use iframe tags to accomplish this (setting the src to the encoded HTML), but it did not play nice with CSS. I would like the existing CSS of the page to be preserved within the sequestered HTML if at all possible.

I'm not sure if this is a way that Html.Raw is even supposed to be used, but this is an implementation that I am modifying, not creating, and I would like to preserve as much of the original implementation as possible.

Community · Accepted Answer · 2017-05-23 12:11:09Z

1

The important thing to understand is that this is never a good idea, unless you are creating a CMS system (see my answer here https://stackoverflow.com/a/4146470/467198 )

Yes, CSS will not work in the iframe, but you can inject same CSS into the iframe as you did in your parent page. But obviously the parent page layout will not follow the content of the iframe (for example if there's a big div in the iframe, the parent page will not make iframe bigger)

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Sep 20, 2013 at 19:09

Artemiy

1,97914 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nicholas Moutrey Over a year ago

I am aware of XSS issues, but I left it out of the description because I wanted to keep the problem on target.

Community · Accepted Answer · 2017-05-23 12:11:09Z

0

Your best bet for displaying user entered HTML without it affecting your view is to use an IFrame. You can manually set the content of an IFrame using Javascript.

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Sep 20, 2013 at 17:26

Erik Philips

54.8k11 gold badges133 silver badges158 bronze badges

1 Comment

Nicholas Moutrey Over a year ago

I had to fiddle with them a bit more than I would have liked, but I managed to get iframes working for me after all.

Dmitry Efimenko · Accepted Answer · 2013-09-20 17:47:25Z

0

Check out html attribute contenteditable. It assures that whoever modifies the content of the div that has this attribute applied does not have to deal with html, yet the html will be generated.

It allows for formatting as well. For example, you could press Ctrl+B and highlighted things would get bolded. Or you could type things in MS Word, format them as you want, and copy paste it in the div.

This might or might not work for you. I found it very convenient for situations when I know that person, who's going to be typing content needs it formatted, but has no idea about html.

answered Sep 20, 2013 at 17:47

Dmitry Efimenko

11.2k7 gold badges65 silver badges85 bronze badges

Collectives™ on Stack Overflow

ASP.NET MVC 3 - Sequester HTML.Raw Output

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related