我正在Angular.js中实现一个网站,它正在攻击ASP.NET WebAPI后端.
Angular.js具有一些内置功能,可以帮助防止csrf.在每个http请求中,它将查找名为"XSRF-TOKEN"的cookie并将其作为名为"X-XSRF-TOKEN"的标头提交.
这依赖于Web服务器能够在对用户进行身份验证之后设置XSRF-TOKEN cookie,然后检查X-XSRF-TOKEN标头以获取传入请求.
该角文档状态:
要利用这一点,您的服务器需要在第一个HTTP GET请求中在名为XSRF-TOKEN的JavaScript可读会话cookie中设置令牌.在后续的非GET请求中,服务器可以验证cookie是否与X-XSRF-TOKEN HTTP标头匹配,因此请确保只有您域上运行的JavaScript才能读取令牌.令牌对于每个用户必须是唯一的,并且必须由服务器验证(以防止JavaScript组成自己的令牌).我们建议令牌是您网站的身份验证cookie的摘要,以增加安全性.
我找不到ASP.NET WebAPI的任何好例子,所以我在各种来源的帮助下推出了自己的例子.我的问题是 - 任何人都可以看到代码有什么问题吗？
首先我定义了一个简单的帮助器类:
public class CsrfTokenHelper
{
const string ConstantSalt = "<ARandomString>";
public string GenerateCsrfTokenFromAuthToken(string authToken)
{
return GenerateCookieFriendlyHash(authToken);
}
public bool DoesCsrfTokenMatchAuthToken(string csrfToken, string authToken)
{
return csrfToken == GenerateCookieFriendlyHash(authToken);
}
private static string GenerateCookieFriendlyHash(string authToken)
{
using (var sha = SHA256.Create())
{
var computedHash = sha.ComputeHash(Encoding.Unicode.GetBytes(authToken + ConstantSalt));
var cookieFriendlyHash = HttpServerUtility.UrlTokenEncode(computedHash);
return cookieFriendlyHash;
}
}
}
然后我在授权控制器中使用以下方法,并在调用FormsAuthentication.SetAuthCookie()后调用它:
// http://www.asp.net/web-api/overview/security/preventing-cross-site-request-forgery-(csrf)-attacks
// http://docs.angularjs.org/api/ng.$http
private void SetCsrfCookie() …我在表行上使用ng-repeat,其中包含从服务器检索的JSON数组中的数据.我的目标是在服务器上添加,删除或修改项目时自动更新列表,而不会影响未修改的项目.在最终实现中,这些表行还将包含双向绑定<input>和<select>元素,以将更新发送回服务器.<select>元素中的一些可用选项也将使用来自另一个列表的ng-repeat指令生成,这些指令也可能会更改.
到目前为止,每当新阵列来自服务器(当前每两秒轮询一次)时,整个ng-repeat列表将被删除并重新生成.这是有问题的,因为它干扰文本选择,即使用户当前正在编辑它们也会破坏输入字段,并且可能比必要的运行速度慢很多.
我已经编写了其他使用jQuery和DOM操作执行我想要的Web应用程序,但代码最终变得非常毛茸茸并且开发非常耗时.我希望使用AngularJS和数据绑定来完成这个代码和时间的一小部分.
所以这里有一个问题:是否可以通过这种方式更新支持数组,但只修改与实际更改的项目/属性相对应的DOM元素？
这是一个最小的测试用例,它使用计时器中的硬编码数组模拟周期性轮询(请参见http://jsfiddle.net/DWrmP/).请注意,由于要删除并重新创建元素,因此每500毫秒清除一次文本选择.
<body ng-app="myApp">
<table ng-controller="MyController">
<tr ng-repeat="item in items | orderBy:'id'">
<td>{{item.id}}</td>
<td>{{item.data}}</td>
</tr>
</table>
</body>
angular.module('myApp', []).controller(
'MyController', [
'$scope', '$timeout',
function($scope, $timeout) {
$scope.items = [
{ id: 0, data: 'Zero' }
];
function setData() {
$scope.items = [
{ id: 1, data: 'One' },
{ id: 2, data: 'Two' },
{ id: 5, data: 'Five' },
{ id: 4, data: 'Four' }, …在数据加载完成之前,如何让AngularJS显示加载微调器？
如果我的控制器已$scope.items = [{name: "One"}]静态设置,并且填充了一个AJAX加载器$scope.items[0]['lateLoader'] = "Hello",我希望微调器显示直到AJAX加载完成,然后用检索到的数据填充绑定范围.
<ul ng-repeat="item in items">
<li>
<p>Always present: {{item.name}}</p>
<p>Loads later: <span ng-bind="item.lateLoader"><i class="icon icon-refresh icon-spin"></i></span></p>
</li>
</ul>
此代码立即填充绑定范围,并且由于item.lateLoader空,所以微调器将替换为空.
我该怎么干净呢？
说我有一个功能组件:
const Foo = (props) => ( <div>{props.name}</div> );
直接将其作为函数调用有什么区别:
const fooParent = () => (
<div> {Foo({ name: "foo" })} </div>
)
而将其称为组件:
const fooParent = () => (
<div> <Foo name="foo"/> </div>
)
我最感兴趣的是性能影响,React如何在内部对待它们,以及在React Fiber中可能会有什么不同,在那里我听到功能组件的性能提升.
是否可以使用datagrip编写整个数据库(SQL Server或Postgres)的模式？
我知道我可以自己获取表和视图的DDL以及每个存储过程/函数的源代码.
我可以一次为数据库中的所有对象获取一个脚本吗？
或者,有没有办法一次搜索所有例程的代码,说我需要找到哪些正在使用#table临时表？
我不是jQuery专家,但我正在学习.我正在使用一些(增长到很多)jQuery来隐藏一些图像并在点击拇指时显示单个图像.虽然这一点jQuery工作,但它的效率非常低,但我不确定如何将其简化为更普遍的工作.
<script>
$(document).ready(function () {
// Changing the Materials
$("a#shirtred").click(function () {
$("#selectMaterials img").removeClass("visible");
$("img.selectShirtRed").addClass("visible");
});
$("a#shirtgrey").click(function () {
$("#selectMaterials img").removeClass("visible");
$("img.selectShirtGrey").addClass("visible");
});
$("a#shirtgreen").click(function () {
$("#selectMaterials img").removeClass("visible");
$("img.selectShirtGreen").addClass("visible");
});
$("a#shirtblue").click(function () {
$("#selectMaterials img").removeClass("visible");
$("img.selectShirtBlue").addClass("visible");
});
// Changing the Collars
$("a#collarred").click(function () {
$("#selectCollar img").removeClass("visible");
$("img.selectCollarRed").addClass("visible");
});
$("a#collargrey").click(function () {
$("#selectCollar img").removeClass("visible");
$("img.selectCollarGrey").addClass("visible");
});
$("a#collargreen").click(function () {
$("#selectCollar img").removeClass("visible");
$("img.selectCollarGreen").addClass("visible");
});
$("a#collarblue").click(function () {
$("#selectCollar img").removeClass("visible");
$("img.selectCollarBlue").addClass("visible");
});
// Changing the Cuffs
$("a#cuffred").click(function () {
$("#selectCuff img").removeClass("visible");
$("img.selectCuffRed").addClass("visible");
}); …我有一个应用程序的注册表单,angular js负责其验证.
当Angular js没有接受其中包含撇号的电子邮件地址时,我遇到了一个问题."Pear'lpeerh.shin@xyz.com".
我发现angularJs不喜欢电子邮件地址中的unicode字符.
有没有其他人遇到过这样的问题,我有兴趣知道我可以选择在angularJs中摆脱这个错误.
任何投入都表示赞赏.谢谢 !
AngularJS验证工作正常ng-required,但我想看看我的fieldset中的所有表单元素是否有效.
<form>
<fieldset>
<legend>
Part one
<img src="/correct.png" ng-show="part_one_valid">
</legend>
<input type="text" ng-required=1 ng-model="name" placeholder="name">
<input type="text" ng-required=1 ng-model="foobar" placeholder="email">
</fieldset>
<fieldset>
<legend>
Part two
<img src="/correct.png" ng-show="part_two_valid">
</legend>
<input type="text" ng-required=1 ng-model="name" placeholder="name">
<input type="text" ng-required=1 ng-model="foobar" placeholder="email">
</fieldset>
</form>
这就是HTML简化的结构.我想做的是,当字段集内的输入字段有效时显示图像.
我有这个功能,它可以在桌面上启用悬停事件.它目前排除了标题行,但我还需要它排除第一列.有任何想法吗？
$(".GridViewStyle > tbody > tr:not(:has(table, th))")
.mouseover(function(e) {
如何将焦点添加到新创建的字段？见到目前为止的例子:http://jsfiddle.net/aERwc/165/
$scope.addField = function() {console.log('hi');
$scope.fields[$scope.keyToAdd] = $scope.valueToAdd;
$scope.setFieldKeys();
$scope.keyToAdd = '';
$scope.valueToAdd = '';
}