Embed MvcHtmlString containing <script> with Javascript

Question

The following method of embedding some Html from a string in a <div> with Javascript (using some JQuery) works:

var div = $('#someId');
var testHtml = '<script></script><div>dummy Content</div>';
div.html(testHtml);

The Html code gets embedded and displayed in the div. If I put some alert('Test')-statement in the <script> tags, the alert would show up.

What also works is this:

<div id="someId">@MvcHtmlString.Create("<script></script><div>dummy Content</div>")</div>

However I need to pass a MvcHtmlString to a javascript function and then embed this string with javascript.

This works if there is no javascript code inside the string:

var div = $('#someId');
var inputItem = '@MvcHtmlString.Create("<div>dummy Content</div>")';
div.html(inputItem);

However if there is javascript content inside the string, the <script>-part does not get embedded and the content doesn't get displayed properly.

So this doesn't work properly:

var div = $('#someId');
var inputItem = '@MvcHtmlString.Create("<script></script><div>dummy Content</div>")';
div.html(inputItem);

Can someone explain why this doesn't work? Is there a simple trick to it?

Community · Accepted Answer · 2017-05-23 11:56:19Z

2

I don't know in which browser you've tested (I've tested in IE8 and Chrome22) but your original example is also not working:

var div = $('#someId');
var testHtml = '<script></script><div>dummy Content</div>';
div.html(testHtml);

Check this JSFiddle

Because you cannot have "</script>" inside a JS string because the browsers interpreat it as the closing <script> tag. See this SO question: Script tag in JavaScript string

So the solution is the same for you so don't have directly the </script> inside the string:

<script type="text/javascript">
    var div = $('#someId');
    var testHtml = '@MvcHtmlString.Create("<script>alert(\"test\");</sc' + 'ript><div>dummy Content</div>")';
    div.html(testHtml);
</script>

You can also chek this in action in this JSFiddle.

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Oct 22, 2012 at 17:13

nemesv

140k16 gold badges424 silver badges364 bronze badges

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

Comments

A. Wolff · Accepted Answer · 2012-10-22 16:52:56Z

0

Adding a fake attribute type to script tag other than " text/javascript" escape content. Ex:

var inputItem = '@MvcHtmlString.Create("<script type="text"></script><div>dummy Content</div>")';

Remove later this attribute could make the trick. But as i dont have idea how works MvcHtmlString, im really not sure it can be a solution here.

answered Oct 22, 2012 at 16:52

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Comments

chridam · Accepted Answer · 2012-10-22 16:54:00Z

0

The MvcHtmlString.Create method creates HTML that is encoded and strips HTML script tags.

Use @Html.Raw("htmlstring") to give you the raw HTML value of the string without stripping the tags.

var div = $('#someId');
var inputItem = '@Html.Raw("<script></script><div>dummy Content</div>")';
div.html(inputItem);

answered Oct 22, 2012 at 16:54

chridam

104k26 gold badges246 silver badges243 bronze badges

3 Comments

nemesv Over a year ago

MvcHtmlString.Create method encodes nothing but Razor does when the @ is used. So @MvcHtmlString.Create(@"<script></script>") outputs just fine <script></script> and Html.Raw internally eventually calls the same code as MvcHtmlString.Create...

chridam Over a year ago

msdn documentation states that MvcHtmlString.Create method "Creates an HTML-encoded string using the specified text value" msdn.microsoft.com/en-us/library/ee461471(v=vs.100).aspx

nemesv Over a year ago

maybe the documentation is missleading but you can check yourself in the source code that nobody is HTML encoding what you pass into MvcHtmlString.Create

Collectives™ on Stack Overflow

Embed MvcHtmlString containing <script> with Javascript

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related