Preamble
My use-case includes a front-end WYSIWYG editor. Taking user input in HTML5/CSS format from the CSHTML Front-End View. Receiving the input in the Backend Controller's action via POST request. And finally doing fancy Database stuff with it.
Sounds pretty easy. Using this beast of an editor, it's very straightforward and customizable.
View
WYSIWYG editor textarea
nested within a form
to send editor's raw HTML data using POST
<form class="form" asp-controller="CreationController" asp-action="CreateSnowflakeBlogpost" method="post">
<button type="submit" class="btn btn-link">Submit Snowflake Blogpost</button>
<textarea name="snowflakeHtmlContent" id="joditEditor"> </textarea>
</form>
Controller
Controller's action receiving POST parameter.
[HttpPost]
public async Task<IActionResult> CreateSnowflakeBlogpost(string snowflakeHtmlContent)
{
// store HTML content in DB and do fancy operations
// redirect to something else
return RedirectToAction("PreviewSnowflakeBlogpost");
}
The problem
HTML5/CSS tags are lost along the way when passing the POST data. Upon inspection, they are sent successfully from the View. The Action's parameter though has incorrect data.
Looks like sanitization is in motion here, stripping POST parameters of the HTML tags we want to deliberately keep.
It looks like there are possible solutions for this.
[Request.Unvalidated]
annotation. Deprecated.[AllowHtml]
annotation. Deprecated. See here and here.@Html.Raw(theString)
here but it's for passing unsafe data from Controller to View. Our use-case is the opposite.- This question has a compilation of the previous points. All doesn't work.
The question
How do I pass my raw HTML/CSS data from View to Action? satisfying the following conditions:
No data-loss of markup.
Prevent unsafe data that poses XSS risk. As per the guidelines.