title: Solving XSS issues
body: <p>I am trying to build an MVC application and have been told it is not a good way to retrieve data and is susceptible to cross-site scripting. I have never done security and have been trying to learn as well but I cannot wrap my head around it. </p>
  
  <p>I am guessing there are several flaws here. Is there any particular encoding I can use?</p>
  
  <p>I haven't pasted the entire code here but trying to figure out where I can stop the XSS attacks. </p>
  
  <p>Model and View Model</p>
  
  <pre><code>namespace ThePeopleSearchApplication.Models
  {
      public class UserViewModel
      {
          public string UID{ get; set; }
          public string FName{ get; set; }
          public string LName{ get; set; }
          public string Email { get; set; }
          public string Status{ get; set; }
  
      }
  
      public class UserModel
      {
          public string UID{ get; set; }
          public string FName{ get; set; }
          public string LName{ get; set; }
          public string Email { get; set; }
          public string Status{ get; set; }
      }
  
  }
  </code></pre>
  
  <p>Controller</p>
  
  <pre><code>    namespace ThePeopleSearchApplication.Controllers
  {
      public class MyController : Controller
      {
          // GET: My
          public ActionResult Index()
          {
              return View();
          }
  
          [ValidateInput(false)] //has been added to understand XSS better
          public ActionResult SearchUserAjax(string userId)
          {
              UserModel myUser = fetchUserFromLdap(userId);
              return Content("{\"message\": \"search for userId: " +
                             userId + " result\", \"result\": " + convertToJson(myUser) + " }");
          }
  
          private string convertToJson(UserModel myUser)
          {
              return "{ \"userId\": \"" + myUser.UserId + "\", \"FirstName\": \"" +
                     myUser.FirstName + "\", \"LastName\": \"" + myUser.LastName + "\", \"Email\": \"" +
                     myUser.Email + "\", \"Status\": \"" + myUser.Status + "\"}";
          }
  
          [ValidateInput(false)] //has been added to understand XSS better
          public ActionResult SearchUser(string userId)
          {
              UserModel myUser = fetchUserFromLdap(userId);
              var viewModel = new UserViewModel
              {
                  UID = userId,
                  FName = myUser.FirstName,
                  LName = myUser.LastName,
                  Email = myUser.Email,
                  Status = myUser.Status,
              };
              return this.View(viewModel);
          }
  
          private UserModel fetchUserFromLdap(string userId)
          {
              var retVal = new UserModel();
              if (String.IsNullOrEmpty(userId))
              {
                  retVal.UID = "N/A";
                  retVal.FName = "N/A";
                  retVal.LName = "N/A";
                  retVal.Email = "N/A";
                  retVal.Status = "N/A";
              }
              else
              {
                  retVal.UID = userId;
                  retVal.FName = "FirstName";
                  retVal.LName = "LastName";
                  retVal.Email = "email@example.com";
                  retVal.Status = "&lt;div style=background-color:#F00800&gt;My Status&lt;/div&gt;";
              }
  
              return retVal;
  
          }
      }
  }
  </code></pre>
  
  <p>View</p>
  
  <pre><code>    @model ThePeopleSearchApplication.Models.UserViewModel
  @{
      ViewBag.Title = "Search result for user: " + Model.UserId;
      var ulId = "ul-id" + Model.UserId;
      var formId = "form" + Model.UserId;
  }
  &lt;html&gt;
  &lt;head&gt;
      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/bootstrap")
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;Search result for user: @Model.UserId&lt;/h1&gt;
  &lt;ul id="@Html.Raw(ulId)"&gt;
      &lt;li&gt;@Model.FirstName&lt;/li&gt;
      &lt;li&gt;@Model.LastName&lt;/li&gt;
      &lt;li&gt;@Model.Email&lt;/li&gt;
      &lt;li&gt;@Html.Raw(Model.Status)&lt;/li&gt;
  &lt;/ul&gt;
  &lt;form id=@formId name=@formId action=/My/SearchUser enctype="multipart/form-data"&gt;
      &lt;input type="text" name="userId" /&gt;
      &lt;input type="submit" /&gt;
  &lt;/form&gt;
  &lt;script type="text/javascript"&gt;
      var theForm = document.@formId;
      $(theForm).submit(function() {
          alert('Valid form');
          return true;
      });
  // just to demonstrate potential usage $(theForm).submit();
  &lt;/script&gt;
  &lt;div&gt;
      Ajax search:
      &lt;form id="ajax-search" name="ajax-search"&gt;
          &lt;input type="text" name="userId" /&gt;
          &lt;input type="submit" /&gt;
      &lt;/form&gt;
      &lt;script&gt;
          $("#ajax-search").submit(function() {
              var url = "/My/SearchUserAjax"; // the script where you handle the form input.
              $.ajax({
                  type: "POST",
                  url: url,
                  data: $("#ajax-search").serialize(), // serializes the form's elements.
                  success: function(data)
                  {
                      var obj = JSON.parse(data);
                      $('#ajax-search').append('&lt;hr/&gt;');
                      $('#ajax-search').append(obj.message); // show response from the php script.
                      $('#ajax-search').append('&lt;hr/&gt;');
                      $('#ajax-search').append(obj.result.userId);
                      $('#ajax-search').append('&lt;hr/&gt;');
                      $('#ajax-search').append(obj.result.FirstName);
                      $('#ajax-search').append('&lt;hr/&gt;');
                      $('#ajax-search').append(obj.result.LastName);
                      $('#ajax-search').append('&lt;hr/&gt;');
                      $('#ajax-search').append(obj.result.Status);
                      $('#ajax-search').append('&lt;hr/&gt;');
                  }
              });
              return false; // avoid to execute the actual submit of the form.
          });
      &lt;/script&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>