Passing data from MVC controller to Angular view without showing the data value in the final html
Question
I am working a MVC+angular front end project. In one scenario, the angular page will be launched with a HTTPS GET request, so, it display a log in page. In another scenario, we will get HTTPS POST request with user name and password in the post data. In this case, we need to have the MVC controller pass these information to the angular controller, and start the angular page view differently. I read several articles on how to pass data from MVC controller to the angular controller, angular view. Here is what I have
MVC controller:
public class HomeController : Controller
{
[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
public ActionResult Index(string name, string password)
{
if (name == null)
{
name = "test";
password = "pass";
}
UserInfoModel infoModel = new UserInfoModel(name, password);
var model = SerializeObject(infoModel);
return View(model);
}
public static IHtmlString SerializeObject(object value)
{
using (var stringWriter = new StringWriter())
using (var jsonWriter = new JsonTextWriter(stringWriter))
{
var serializer = new JsonSerializer
{
// Let's use camelCasing as is common practice in JavaScript
ContractResolver = new CamelCasePropertyNamesContractResolver()
};
// We don't want quotes around object names
jsonWriter.QuoteName = false;
serializer.Serialize(jsonWriter, value);
return new HtmlString(stringWriter.ToString());
}
}
Index.cshtml
<!DOCTYPE html>
<html ng-app="MVCApp" ng-controller="LandingPageController">
<body>
<h1>{{models.username}}</h1>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
@Scripts.Render("~/bundles/MVCApp")
@model IHtmlString
<script>
angular.module("MVCApp", []).value("data", @Html.Raw(Model));
</script>
</body>
</html>
Angular application MVCApp.js is like:
var MVCApp = angular.module('MVCApp', []);
MVCApp.controller('LandingPageController', LandingPageController);
Angular controller is like:
var LandingPageController = function ($scope, data) {
console.log(data);
$scope.models = {
username: data.userName
};
}
LandingPageController.$inject = ['$scope', 'data'];
When I run it, I can see the data did get passed to the LandingPageController. But if I look at the html of the page, I see the following in the html.
angular.module("MVCApp", []).value("data", {userName:"test",password:"pass"});
I don't won't the data(at least some portion, like password) to be visible/readable in the html.
Can I pass the data without having it visible in the html?
1 answers
solution1
1 ACCPTED 2015-03-07 20:19:14
@Html.Raw(Model) outputs the contents of your model when the page is rendered. If you load the data via a separate ajax call after the page has loaded (and not with @Html.Raw(Model)), then it won't be visible by viewing the page source.
It can still very easily be found with a javascript debugger, so this will do absolutely nothing in terms of security. But if someone views the source, they won't see pages of JSON data.
The other downside is that you're making the user wait longer instead of providing the initial data when the page is first served.
Also, I don't know what you're ultimately trying to do, but passing cleartext passwords to a browser is almost never correct.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.