[工作] 求助编程测试题 web front end [复制链接]

Rank: 14

升级 12.88%

UID: 21685
热情: 2910
人气: 2118
主题: 22
帖子: 16057
精华: 6
积分: 10644
阅读权限: 30
注册时间: 2003-4-28

61#分享本帖地址

发表于 2015-9-3 15:03:25 |只看该作者 微信分享

liuruihua 发表于 2015-9-3 14:58
https并不能保护数据在客户端呀
https只保护数据在中途不被截获啦

protect data at client side is not something that I have knowledge of. :)

Rank: 10

升级 92.13%

UID: 396408
热情: 2360
人气: 3194
主题: 24
帖子: 1157
精华: 0
积分: 3382
阅读权限: 30
注册时间: 2015-2-22

62#分享本帖地址

发表于 2015-9-3 15:03:33 |只看该作者 微信分享

本帖最后由 liuruihua 于 2015-9-3 15:31 编辑

匿名人士发表于 2015-9-3 14:56
liu大神，是不是用问号传值？

http://www.angularjs.cn/A0EN 这个适用吗？

就普通的http url嵌入参数例如

http://*****.com/test_user.html?userId=123456

不需要啥angularjs专用的代码啦
就是你给的连接的第一种，我没用过第二种

我看了下，第二种方法也挺好的

匿名人士

Rank: 12

升级 95.93%

UID: 55741
热情: 3998
人气: 4948
主题: 49
帖子: 818
精华: 0
积分: 4939
阅读权限: 30
注册时间: 2005-11-11

63#分享本帖地址

发表于 2015-9-3 18:15:03 |只看该作者 微信分享

liuruihua 发表于 2015-9-3 15:03
就普通的http url嵌入参数例如

http://*****.com/test_user.html?userId=123456

疯了，传过来的值不起作用 file:///C:/Users/CHRIS/Desktop/step2.htm?albumId=1

step2.htm

<script>

function get_param(param){
var query = location.search.substring(1).split('&');
for(var i=0;i<query.length;i++){
      var kv = query.split('=');
      if(kv[0] == param){
         return kv[1];
      }
}
return null;
}

      var app = angular.module('myApp', []);
            app.filter('myFilter', function() {
                     return function(items) {
                              if (typeof items == 'undefined') {
                                    return items;
                              }

                              var filtered = [];
                              for (var i = 0; i < items.length; i++) {
                                    var item = items;
                                    if (item.albumId === get_param("albumId")) {
                                             filtered.push(item);
                                    }
                              }
                              return filtered;
                     };
            });

      app.controller('customersCtrl', function($scope, $http) {


            $http.get("http://jsonplaceholder.typicode.com/photos")
                     .success(function (response) {
                              $scope.photos = response;

                     });
      });
</script>

三人行，必有我师焉。

xp_theman

Rank: 14

升级 12.88%

UID: 21685
热情: 2910
人气: 2118
主题: 22
帖子: 16057
精华: 6
积分: 10644
阅读权限: 30
注册时间: 2003-4-28

64#分享本帖地址

发表于 2015-9-3 18:46:01 |只看该作者 微信分享

匿名人士发表于 2015-9-3 18:15
疯了，传过来的值不起作用 file:///C:/Users/CHRIS/Desktop/step2.htm?albumId=1

step2.htm

应该用ngRoute就很容易实现了。

Rank: 10

升级 92.13%

UID: 396408
热情: 2360
人气: 3194
主题: 24
帖子: 1157
精华: 0
积分: 3382
阅读权限: 30
注册时间: 2015-2-22

65#分享本帖地址

发表于 2015-9-3 19:06:23 |只看该作者 微信分享

本帖最后由 liuruihua 于 2015-9-3 19:12 编辑

reference: http://stackoverflow.com/questio ... m-the-url-parameter

url  test1.html?albumId=5

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular test</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
      <div ng-app="myApp" ng-controller="customersCtrl">
            <ul>
                     <li ng-repeat="photo in photos | myFilter | orderBy:id">
                              <a href="#" ng-click="toggle($index)">{{photo.title}}</a>
                              <a href="{{photo.url}}" class="thumb">
                                    <img ng-src="{{photo.thumbnailUrl}}" ng-show="selected == $index"/>
                              </a>
                     </li>
      </ul>
</div>

<script>
      function getUrlVars() {
            var vars = {};
            var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
                     function(m,key,value) {
                              vars[key] = value;
            });
            return vars;
      }

      var app = angular.module('myApp', []);
            app.filter('myFilter', function() {
                     return function(items) {
                              if (typeof items == 'undefined') {
                                    return items;
                              }

                              var albumId = parseInt(getUrlVars()["albumId"]);
                              alert(albumId);
                              var filtered = [];
                              for (var i = 0; i < items.length; i++) {
                                    var item = items;
                                    if (item.albumId === albumId) {
                                             filtered.push(item);
                                    }
                              }
                              return filtered;
                     };
            });

      app.controller('customersCtrl', function($scope, $http) {
            $scope.selected = -1;

            $http.get("http://jsonplaceholder.typicode.com/photos")
                     .success(function (response) {
                              $scope.photos = response;
                              $scope.toggle = function ($index) {
                                    $scope.selected = $index;
                              }
                     });
      });
</script>

</body>
</html>

匿名人士

Rank: 12

升级 95.93%

UID: 55741
热情: 3998
人气: 4948
主题: 49
帖子: 818
精华: 0
积分: 4939
阅读权限: 30
注册时间: 2005-11-11

66#分享本帖地址

发表于 2015-9-3 22:25:53 |只看该作者 微信分享

本帖最后由匿名人士于 2015-9-4 16:00 编辑

liuruihua 发表于 2015-9-3 19:06
reference: http://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-url-parameter

ur ...

liu大神，

弹出框（Chrome 里2次？为什么，暂时没有IE可以测试）可以看到值已经传过去了，但是filter没有起作用，我直接把filter改成1 竟然也没有起作用？

三人行，必有我师焉。

MSSA

Rank: 14

升级 25.6%

UID: 343013
热情: 10003
人气: 11756
主题: 35
帖子: 664
精华: 0
积分: 11280
阅读权限: 30
注册时间: 2012-9-20

67#分享本帖地址

发表于 2015-9-4 00:31:56 |只看该作者 微信分享

liuruihua 发表于 2015-9-3 14:03
如果被人知道了service call 参数和返回数据格式，又不能要求用户注册使用，任何人都可以不注册使用，又不 ...

REST API不能这么设计，除非是完全public API，否则必须要求用户验证后才可以call,因为你的JS frontend是没法安全存储token/key的。

MSSA

Rank: 14

升级 25.6%

UID: 343013
热情: 10003
人气: 11756
主题: 35
帖子: 664
精华: 0
积分: 11280
阅读权限: 30
注册时间: 2012-9-20

68#分享本帖地址

发表于 2015-9-4 00:40:15 |只看该作者 微信分享

本帖最后由 MSSA 于 2015-9-4 00:45 编辑

liuruihua 发表于 2015-9-3 14:15
公共网站啦
那你来帮我设计下在没有 authentication的情况下，如何保护数据？我很想改进我的设计啦
就以此 ...

没有办法保护，这个需求本身就有问题，既然是restricted access的需要为和不authenticate user?

任何加密手段放在前端都是极大的security vulnerability，你这种层面的保护是根本没法防御determined attacker,个人观点有和没有没啥太大意思。首先我copy你的js就可以随便call你的API，其次可以用beautifier还原你obfuscated的JS,你的加密手段这种情况一定是symmetric encryption，只要看到你代码里用的key就可以还原你加密的手段随便写一个backend完全扒光你的网站数据。

MSSA

Rank: 14

升级 25.6%

UID: 343013
热情: 10003
人气: 11756
主题: 35
帖子: 664
精华: 0
积分: 11280
阅读权限: 30
注册时间: 2012-9-20

69#分享本帖地址

发表于 2015-9-4 00:44:31 |只看该作者 微信分享

liuruihua 发表于 2015-9-3 08:45
java不算啥啦，C/C++编译出的二进制代码也可以被破解，1995年的时候我工作的公司里面的开发团队被上海的 ...

当然任何程序都可以reverse engineering,但是这里还有不同一个是decompile一个是disassembly, decompile可以还原source,disassembly的话只能还原到汇编。如果你现在还对破解感兴趣，不知道你是否用过IDAPro - 个人认为绝对是最好的破解工具，没有之一。

Rank: 10

升级 92.13%

UID: 396408
热情: 2360
人气: 3194
主题: 24
帖子: 1157
精华: 0
积分: 3382
阅读权限: 30
注册时间: 2015-2-22

70#分享本帖地址

发表于 2015-9-4 08:42:06 |只看该作者 微信分享

MSSA 发表于 2015-9-4 00:40
没有办法保护，这个需求本身就有问题，既然是restricted access的需要为和不authenticate user?

任何加密 ...

同意

Rank: 10

升级 92.13%

UID: 396408
热情: 2360
人气: 3194
主题: 24
帖子: 1157
精华: 0
积分: 3382
阅读权限: 30
注册时间: 2015-2-22

71#分享本帖地址

发表于 2015-9-4 08:43:09 |只看该作者 微信分享

MSSA 发表于 2015-9-4 00:31
REST API不能这么设计，除非是完全public API，否则必须要求用户验证后才可以call,因为你的JS frontend是 ...

你说的和我在前面说的一样:-)

Rank: 10

升级 92.13%

UID: 396408
热情: 2360
人气: 3194
主题: 24
帖子: 1157
精华: 0
积分: 3382
阅读权限: 30
注册时间: 2015-2-22

72#分享本帖地址

发表于 2015-9-4 08:43:52 |只看该作者 微信分享

MSSA 发表于 2015-9-4 00:44
当然任何程序都可以reverse engineering,但是这里还有不同一个是decompile一个是disassembly, decompile ...

矛和盾啦

http://stackoverflow.com/questio ... ger-some-many-times

Rank: 10

升级 92.13%

UID: 396408
热情: 2360
人气: 3194
主题: 24
帖子: 1157
精华: 0
积分: 3382
阅读权限: 30
注册时间: 2015-2-22

73#分享本帖地址

发表于 2015-9-4 08:56:05 |只看该作者 微信分享

匿名人士发表于 2015-9-3 22:25
liu大神，请看测试页面 http://www.experiencenz.com/step2.htm?albumId=1

弹出框（Chrome 里2次？为什么 ...

Rank: 10

升级 92.13%

UID: 396408
热情: 2360
人气: 3194
主题: 24
帖子: 1157
精华: 0
积分: 3382
阅读权限: 30
注册时间: 2015-2-22

74#分享本帖地址

发表于 2015-9-4 09:00:13 |只看该作者 微信分享

你可以不用filter
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular test</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
      <div ng-app="myApp" ng-controller="customersCtrl">
            <ul>
                     <li ng-repeat="photo in photos">
                              <a href="#" ng-click="toggle($index)">{{photo.title}}</a>
                              <a href="{{photo.url}}" class="thumb">
                                    <img ng-src="{{photo.thumbnailUrl}}" ng-show="selected == $index"/>
                              </a>
                     </li>
      </ul>
</div>

<script>
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(m,key,value) {
vars[key] = value;
});
return vars;
}

var app = angular.module('myApp', []);

app.controller('customersCtrl', function($scope, $http) {
$scope.selected = -1;

$http.get("http://jsonplaceholder.typicode.com/photos")
.success(function (response) {
var albumId = parseInt(getUrlVars()["albumId"]);
var filtered = [];
var items = response;
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (item.albumId === albumId) {
filtered.push(item);
}
}
$scope.photos = filtered;
$scope.toggle = function ($index) {
$scope.selected = $index;
}
});
});
</script>

</body>
</html>

1 查看全部评分

匿名人士

minigun

=白金会员=

Rank: 17

升级 21.37%

UID: 77617
热情: 22789
人气: 24302
主题: 38
帖子: 1206
精华: 0
积分: 24274
阅读权限: 30
注册时间: 2006-6-26

75#分享本帖地址

发表于 2015-9-4 19:42:59 |只看该作者 微信分享

这贴貌似吸引了不少js dev，打车问一下有人在工作里接触到mean架构吗，或者至少涉及其中的某一块，node，mongodb，express
前面有人提到gulp，有用grunt的吗，那种更流行
本人做.net的，最近对js颇感兴趣做了些学习故此一问

gonghaima

Rank: 12

升级 67.27%

UID: 102262
热情: 3119
人气: 4476
主题: 74
帖子: 1308
精华: 0
积分: 4509
阅读权限: 30
注册时间: 2006-12-30

76#分享本帖地址

发表于 2015-10-25 19:14:34 |只看该作者 微信分享

本帖最后由 gonghaima 于 2015-10-25 20:51 编辑

liuruihua 发表于 2015-9-4 09:43
你说的和我在前面说的一样:-)

众神听说过 OAth 吗 ?前后台交互方式（ajax / or page refresh / or ...），跟security是两个问题。
考虑一下facebook, google, etc 怎么expose api 出来，同时也有security 保障，是怎么实现的。
这个测试题是关于前台设计和调用，没有必要加一层security.
当然如果一定要加，也是有很多option的。不过被测试的人会苦逼而死，死前狠狠咒骂出题的人

仁者见仁智者见智，抛砖引玉。欢迎大家讨论：）

Before you rock your body, rock your mind

gonghaima

Rank: 12

升级 67.27%

UID: 102262
热情: 3119
人气: 4476
主题: 74
帖子: 1308
精华: 0
积分: 4509
阅读权限: 30
注册时间: 2006-12-30

77#分享本帖地址

发表于 2015-10-26 13:00:11 |只看该作者 微信分享

本帖最后由 gonghaima 于 2015-10-27 07:38 编辑

live site
http://webfrontangular.azurewebsites.net/

source code
https://github.com/gonghaima/webfront

Future improvement

Separation of layers (new folder for Views / Controllers / Services )
Typescript / Angular 2 syntax . Need use as less $scope as possible.
UI / UX

a good learning source:
http://campus.codeschool.com/courses/shaping-up-with-angular-js/contents

Before you rock your body, rock your mind