「我是一個前端工程師,每次要進行頁面套版時,都要等後端工程師寫好 API 才能測試,我覺得很痛苦,但公司的後端我又叫不動,有沒有甚麼方法可以簡單的設計出 RESTful API,讓我可以立即套版使用?我不想每次都苦苦哀求後端工程師快點生出 API 給我!」這是之前某位學生告訴我的一段話,也想必是許多前端工程師的痛,現在,你可以不一樣!
我將在這場分享中講解如何利用 JSON Server 快速建立 RESTful API 服務,讓前端工程師可以在完全沒有後端開發能力的情況下,自行設計出任意格式的 API 讓自己使用。本次直播完全免費,當天還會簡單示範如何在 Angular 使用 Http 服務元件呼叫自製的 API!
「我是一個前端工程師,每次要進行頁面套版時,都要等後端工程師寫好 API 才能測試,我覺得很痛苦,但公司的後端我又叫不動,有沒有甚麼方法可以簡單的設計出 RESTful API,讓我可以立即套版使用?我不想每次都苦苦哀求後端工程師快點生出 API 給我!」這是之前某位學生告訴我的一段話,也想必是許多前端工程師的痛,現在,你可以不一樣!
我將在這場分享中講解如何利用 JSON Server 快速建立 RESTful API 服務,讓前端工程師可以在完全沒有後端開發能力的情況下,自行設計出任意格式的 API 讓自己使用。本次直播完全免費,當天還會簡單示範如何在 Angular 使用 Http 服務元件呼叫自製的 API!
本簡報是 Will 保哥在 2016/6/24 於 CTJS 中台灣 JavaScript Conference 的演講簡報
[ 相關連結 ]
本次演講的 Live Demo 原始碼
https://github.com/doggy8088/ctjs2016-ng2demo
The Will Will Web記載著 Will 在網路世界的學習心得與技術分享
http://blog.miniasp.com/
Will 保哥的技術交流中心 (臉書粉絲專頁)
http://www.facebook.com/will.fans
Will 保哥的噗浪
http://www.plurk.com/willh/invite
Will 保哥的推特
https://twitter.com/Will_Huang
本簡報是 Will 保哥在 2016/6/24 於 CTJS 中台灣 JavaScript Conference 的演講簡報
[ 相關連結 ]
本次演講的 Live Demo 原始碼
https://github.com/doggy8088/ctjs2016-ng2demo
The Will Will Web記載著 Will 在網路世界的學習心得與技術分享
http://blog.miniasp.com/
Will 保哥的技術交流中心 (臉書粉絲專頁)
http://www.facebook.com/will.fans
Will 保哥的噗浪
http://www.plurk.com/willh/invite
Will 保哥的推特
https://twitter.com/Will_Huang
PHP Coding Standard and 50+ Programming SkillsHo Kim
1. How and Why to write good code?
2. Coding standard based on ZendFramework and real world practise.
3. PHP programming skills from daily coding.
4. Some security tips
5. Some optimization tips
Introduce twMVC
list text here ASP.NET MVC 可以吃嗎?
ASP.NET MVC 的成功案例
什麼是 MVC
MVC 概觀
ASP.NET MVC 對物件導向的潛移默化
View 簡介
View Engine
HTML Helper
Partial View
Razer Helper 小技巧
19. 向 DOM 中插入 HTML 19
错误做法(一)
关闭自动转义
// Within the controller
// Disables strict auto escaping
$sce.enabled(false);
$scope.html = "Hello <b>" + userInput +
"</b>!";
// Within the view
<div>{{html}}</div>
20. 向 DOM 中插入 HTML 20
错误做法(二)
使用 element.html() 插入 HTML
// Within the controller
angular.element(someElement)
.html("Hello <b>" + userInput + "</b>!")
21. 向 DOM 中插入 HTML 21
错误做法(三)
使用 ngBindHtml + trustAsHtml
// Within the controller
$scope.html = $sce.trustAsHtml("Hello <b>"
+ userInput + "</b>!");
// Within the view
<div>{{html}}</div>
22. 向 DOM 中插入 HTML 22
错误做法(四)
使用 ngBindHtml + trustAsHtml
然后自己写 XSS 过滤函数
// Within the controller
var escapedUserInput =
escapeForHtml(userinput);
$scope.html = $sce.trustAsHtml("Hello <b>"
+ escapedUserInput + "</b>!");
// Within the view
<div>{{html}}</div>
23. 向 DOM 中插入 HTML 23
正确做法
使用 ngBindHtml + sanitizer
<body>
<script src="../1.5.7/angular.js"></script>
<script src="../1.5.7/angular-sanitize.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="html"></p>
</div>
<script>
var userInput = 'test<svg/onload=alert(1)>';
var myApp = angular.module('myApp', ["ngSanitize"]);
var controller = myApp.controller('myCtrl',
function($scope) {
$scope.html = "Hello <b>" + userInput + "</b>!"
});
</script>
</body>
24. 混用第三方库时的风险 24
开发时往往会用到很多第三方库
单独使用时可能没有漏洞,
但与 AngularJS 混合使用时就出现
问题了。
<script>
// A non angular-related library.
// Secure without Angular. Insecure with
Angular.
document.write(escapeForHTML(userInput));
</script>
<script
src="../angularjs/1.5.7/angular.min.js"></script>
29. AngularJS 校验 URL 的方式 29
错误做法(一)
在协议处使用通配符
// Whitelist all possible schemes
"**://example.org/*"
● Exploit 1:
http://evil.com/?ignore=://example.org/a
● Exploit 2:
javascript:alert(1);//example.org/a
// Less permissive, but still bad
"*://example.org/*"
● Exploit 1:
javascript://example.org/a%0A%0Dalert(1)
注释 换行
30. AngularJS 校验 URL 的方式 30
错误做法(二)
在域名里使用 ** 通配符
// Whitelist all possible subdomains
"https://**.example.org/*"
● Exploit 1:
https://evil.com/?ignore=://example.org/a
// Whitelist all possible top level domains
"https://example.**"
● Exploit 1:
https://example.evil.com
● Exploit 2:
https://example.:foo@evil.com
31. AngularJS 校验 URL 的方式 31
错误做法(三)
使用正则表达式
// Use a RegEx to whitelist a domain
/http://www.example.org/g
● Exploit 1:
// (dots are not escaped)
http://wwwaexample.org
● Exploit X:
All the wildcard-based exploits can be
applied as well