SlideShare ist ein Scribd-Unternehmen logo
1 von 40
WEB 前端安全
——从 MVVM 框架说起
WEB 安全的最大敌人
XSS(Cross-site Scripting)
2
1.
“
3
31.80%
22.30%
7.80%
4.60%
4.50%
4.20%
3.80%
3.50%
3.00%
2.90%
11.80%
2016 年 TOP10 漏洞比例分布
XSS
信息泄露类
权限控制
后台弱密码
SSRF
逻辑设计缺陷
安全性误配置
可执行漏洞
暴力破解
4怎么对付 XSS
保护 Cookie
• HttpOnly
• Secure
设置请求头
• CSP
• X-XSS-Protection
过滤
• < >
• script onerror
转义
• escape()
• HTMLEncode()
十八般武艺齐上阵
5事情好像没有那么简单
编码
• URL encode
• Unicode
其他
• window.name
• ES6 feature
(alert`1`)
• iframe
字符集
• ISO-2022-JP
• UTF-7
关键字
• scrscriptipt
• String.fromCharcode()
• location.hash
各种花式绕过技巧
MVVM
自动编码输出
天生预防 XSS 和 CSRF
6
Angular、React、Vue …
正确使用 MVVM 框架
模板注入(Client-Side Template Injection)
7
2.
Flask 用的 Jinja2 模板引擎
什么是模板注入 8
@app.errorhandler(404)
def page_not_found(e):
template = '''{%% extends "layout.html" %%}
{%% block body %%}
<div class="center-content error">
<h1>Oops! That page doesn't exist.</h1>
<h3>%s</h3>
</div>
{%% endblock %%}
''' % (request.url)
return render_template_string(template), 404
9
发生了什么?
模板引擎计算了数学表达式
7 + 7 = 14
然后将结果输出到了页面上
如果换成 {{ config.items() }} 呢?
127.0.0.1:5000/invalid{{ 7+7 }}
“
10
不能将用户输入直接作为模版内容的一部分
用 AngularJS 举个栗子🌰 11
<html>
<head>
<meta charset="utf-8">
<script
src="https://ajax.googleapis.com/ajax/libs/angular
js/1.4.6/angular.js"></script>
</head>
<body>
<div ng-app>{{ 7+7 }}</div>
</body>
</html>
» 直接生成前端模板
» {{ 7 + 7 }}
» AngularJS 解析和执行
» 输出 14
» 那如果换成 {{ alert(1) }} 会咋
样?
AngularJS 里的沙箱
什么都没发生,
源码里连 alert 都不见了 !
12
AngularJS 里的沙箱
Sandbox
对模板和表达式进行检查、过滤、解析、重写
» ensureSafeMemberName
» ensureSafeObject
» ensureSafeFunction
沙箱这么厉害,那还担心什么呢?
13
AngularJS 里的沙箱
绕过
从 1.0.1 版开始
再次绕过
1.6 以下的每个版本
废除沙箱
1.6 版本开始
14
框架的安全机制不是万能的
严格遵守开发文档,提防用户的输入
15
危险的模板和表达式 16
有多种方法可以控制模板和表达式
表达式在解析时包含用户提供的内容:
» $compile(userContent)
» $parse(userContent)
» $interpolate(userContent)
表达式中使用管道时条件包含用户提供的内容:
» {{ value | orderBy : userContent }}
在生成 AngularJS 模板时包含用户提供的内容。
表达式时在调用下面的方法时包含用户提供的内容:
» $watch(userContent, ...)
» $watchGroup(userContent, ...)
» $watchCollection(userContent, ...)
» $eval(userContent)
» $evalAsync(userContent)
» $apply(userContent)
» $applyAsync(userContent)
危险的模板和表达式 17
» 不要混合客户端和服务器模板。
» 不要使用用户输入动态生成模板。
» 不要使用之前列出的表达式函数运行用户输入
如果必须在 AngularJS 模板中使用用户提供的内容,
需要确保它在通过 ngNonBindable 指令明确指定了不编译的模板部分中。
正确使用 MVVM 框架
在 DOM 中插入 HTML 及使用第三方库
18
3.
向 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>
向 DOM 中插入 HTML 20
错误做法(二)
使用 element.html() 插入 HTML
// Within the controller
angular.element(someElement)
.html("Hello <b>" + userInput + "</b>!")
向 DOM 中插入 HTML 21
错误做法(三)
使用 ngBindHtml + trustAsHtml
// Within the controller
$scope.html = $sce.trustAsHtml("Hello <b>"
+ userInput + "</b>!");
// Within the view
<div>{{html}}</div>
向 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>
向 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
开发时往往会用到很多第三方库
单独使用时可能没有漏洞,
但与 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>
混用第三方库时的风险 25
» EscapeForHTML 常见转义函数
» userInput 用户输入
» 没有引入 Angular 时一切正常
» 引入 Angular 后
» 输入沙箱绕过的 Payload
» BOOM!
<body><div ng-app>
<script>
function escapeForHTML(unsafe) {
return unsafe
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
}
var userInput = '{{x = {"y":"".constructor.prototype};
x["y"].charAt=[].join;$eval("x=alert(1)");}}';
document.write(escapeForHTML(userInput));
</script></div>
<script src="../angularjs/1.5.7/angular.js"></script>
</body>
“
26
复制粘贴网上的代码时要留心
正确使用 MVVM 框架
资源 URL 黑白名单
27
4.
AngularJS 校验 URL 的方式 28
» $sceDelegateProvider.resourceUrl(White|Black)list([list])
» 默认只能访问同一域名下的资源
» 有三种校验方式:’self’, String 和 Regxes(正则)
» 其中 String 支持两种通配符:
* :匹配除 : / . ? & 和 ; 之外的任意数量字符
**:匹配所有的字符
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)
注释 换行
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
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
AngularJS 校验 URL 的方式 32
结论
» 尽量不要使用正则表达式
» 不要在协议中使用通配符
» 不要在域名中使用 **
» 只在子域名和网站路径中使用 *
» 最好的方式是仅列出特定的 URL 作为白名单
正确使用 MVVM 框架
前端工程的新问题
33
5.
Webpack 打包 34
SourceMap 的隐患 35
SourceMap 的隐患 36
37
解决办法
» 线上环境删除 SourceMap
» 前端工程打包时配置按需加载
» 对于既有用户界面又有后台管理界面的应用,不要做成一个 SPA
» RESTful 接口权限验证,使用 JWT
38
如何写出安全的应用
遵循规范熟读文档 从容细心
39
Any questions?
联系方式:
» YjByZ0BxcS5jb20=
» https://0x0d.im
40THANKS!

Weitere ähnliche Inhalte

Was ist angesagt?

编辑器设计Kissy editor
编辑器设计Kissy editor编辑器设计Kissy editor
编辑器设计Kissy editor
taobao.com
 
编辑器设计U editor
编辑器设计U editor编辑器设计U editor
编辑器设计U editor
taobao.com
 
Node.js從無到有 基本課程
Node.js從無到有 基本課程Node.js從無到有 基本課程
Node.js從無到有 基本課程
Simon Su
 
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
taobao.com
 

Was ist angesagt? (20)

编辑器设计Kissy editor
编辑器设计Kissy editor编辑器设计Kissy editor
编辑器设计Kissy editor
 
编辑器设计U editor
编辑器设计U editor编辑器设计U editor
编辑器设计U editor
 
Frontend Devops at Cloudinsight
Frontend Devops at CloudinsightFrontend Devops at Cloudinsight
Frontend Devops at Cloudinsight
 
Node.js從無到有 基本課程
Node.js從無到有 基本課程Node.js從無到有 基本課程
Node.js從無到有 基本課程
 
Http cache 的優化
Http cache 的優化Http cache 的優化
Http cache 的優化
 
CP 值很高的 Gulp
CP 值很高的 GulpCP 值很高的 Gulp
CP 值很高的 Gulp
 
快快樂樂學 Angular 2 開發框架
快快樂樂學 Angular 2 開發框架快快樂樂學 Angular 2 開發框架
快快樂樂學 Angular 2 開發框架
 
Berserk js
Berserk jsBerserk js
Berserk js
 
AKS 與開發人員體驗 (Kubernetes 大講堂)
AKS 與開發人員體驗 (Kubernetes 大講堂)AKS 與開發人員體驗 (Kubernetes 大講堂)
AKS 與開發人員體驗 (Kubernetes 大講堂)
 
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式
 
AngularJS training in Luster
AngularJS training in LusterAngularJS training in Luster
AngularJS training in Luster
 
React.js what do you really mean?
React.js what do you really mean?React.js what do you really mean?
React.js what do you really mean?
 
twMVC#43 C#10 新功能介紹
twMVC#43 C#10 新功能介紹twMVC#43 C#10 新功能介紹
twMVC#43 C#10 新功能介紹
 
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
 
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
 
宅學習 Firebase
宅學習 Firebase宅學習 Firebase
宅學習 Firebase
 
webpack 入門
webpack 入門webpack 入門
webpack 入門
 
Angular js twmvc#17
Angular js twmvc#17Angular js twmvc#17
Angular js twmvc#17
 
NodeJS基礎教學&簡介
NodeJS基礎教學&簡介NodeJS基礎教學&簡介
NodeJS基礎教學&簡介
 
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
 

Ähnlich wie 前端MVVM框架安全

面向开发的前端性能优化
面向开发的前端性能优化面向开发的前端性能优化
面向开发的前端性能优化
li qiang
 
浅谈前端安全与规范(渔隐)
浅谈前端安全与规范(渔隐)浅谈前端安全与规范(渔隐)
浅谈前端安全与规范(渔隐)
tbmallf2e
 
Script with engine
Script with engineScript with engine
Script with engine
Webrebuild
 
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
leneli
 
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
jay li
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
leneli
 
前端性能测试
前端性能测试前端性能测试
前端性能测试
tbmallf2e
 
希望科技研发部变量命名及编码规范
希望科技研发部变量命名及编码规范希望科技研发部变量命名及编码规范
希望科技研发部变量命名及编码规范
Hongjian Wang
 

Ähnlich wie 前端MVVM框架安全 (20)

恶意网页分析实战
恶意网页分析实战恶意网页分析实战
恶意网页分析实战
 
Web security
Web securityWeb security
Web security
 
面向开发的前端性能优化
面向开发的前端性能优化面向开发的前端性能优化
面向开发的前端性能优化
 
浅谈前端安全与规范(渔隐)
浅谈前端安全与规范(渔隐)浅谈前端安全与规范(渔隐)
浅谈前端安全与规范(渔隐)
 
Share xss
Share xssShare xss
Share xss
 
Script with engine
Script with engineScript with engine
Script with engine
 
高性能远程调用解决方案
高性能远程调用解决方案高性能远程调用解决方案
高性能远程调用解决方案
 
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development FundamentalsExam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
 
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
 
用戶端攻擊與防禦
用戶端攻擊與防禦用戶端攻擊與防禦
用戶端攻擊與防禦
 
Php应用程序常见安全问题解析
Php应用程序常见安全问题解析Php应用程序常见安全问题解析
Php应用程序常见安全问题解析
 
PHP Coding Standard and 50+ Programming Skills
PHP Coding Standard and 50+ Programming SkillsPHP Coding Standard and 50+ Programming Skills
PHP Coding Standard and 50+ Programming Skills
 
Backbone.js and MVW 101
Backbone.js and MVW 101Backbone.js and MVW 101
Backbone.js and MVW 101
 
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
 
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
 
Ken20150320
Ken20150320Ken20150320
Ken20150320
 
twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC#01 | ASP.NET MVC 的第一次親密接觸twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC#01 | ASP.NET MVC 的第一次親密接觸
 
前端性能测试
前端性能测试前端性能测试
前端性能测试
 
希望科技研发部变量命名及编码规范
希望科技研发部变量命名及编码规范希望科技研发部变量命名及编码规范
希望科技研发部变量命名及编码规范
 

前端MVVM框架安全