从web前端角度浅析网络安全
摘 要
当前网络与信息技术已经有了非常大的进步﹐Web前端技术的使用、和其安全问题也越来越受到我们的重视。 Web前端技术毫无疑问是网络技术的入口，是我们互联网的门户，也是网络安全中最容易被攻击的环节，经常受到黑客的青睐。因此，从Web前端来剖析网络安全问题并找到最优化的防范方案是当前互联网工作中的重大任务。
本文结合当前计算机专业本科所学习的知识，也结合W3C的新标准HTML5 + css3+ javaScript的新的特性和产生的一系列安全问题，向大家解析一下XSS攻击、和界面操作劫持的攻击方式和作用原理、以及当前的防御措施和解决方案，同时我也根据网络安全的具体要求，尝试去设计新型的 web前端防御模型，这种模型可以应用JSP的静态分析和动态拦截相结合方式，从web服务器端和客户操作端对所有的输入与请求进行分析综合，采用黑名单模式的验证与拦截，我们也能通过JSP页面的内容易于进行动态的标记与提醒的特征，合理运用Nginx 代理服务器对所做出的动态改变进行特征比对，用这种方法可以检测页面有没有包含有害的攻击信息，如果有，就采取相应的阻止策略。
关键词：Web前端；网络安全；攻击；防御模型
Abstract
At present, the network and information technology have made great progress, and the use of Web front-end technology and its security issues have also attracted more and more attention. Web front-end technology is undoubtedly the entrance to network technology, the gateway to our Internet, and the most vulnerable link in network security, often favored by hackers. Therefore, dissecting network security problems from the web front end and finding the most optimized prevention solution is a major task in the current Internet work.
This article combines the knowledge learned by the current computer undergraduate, and also combines the new features of the new W3C standard HTML5 + css3 + javaScript and a series of security issues, to analyze the XSS attack, and the attack method and effect of interface operation hijacking, as well as the current defense measures and solutions, and I also try to design a new type of web front-end defense model according to the specific requirements of network security. This model can apply JSP static analysis and dynamic interception combination, from the web server side and the client operation side of all input and request analysis synthesis, using blacklist mode verification and interception, we can also through the JSP page content is easy to dynamically mark and remind the characteristics, the rational use of Nginx proxy server to make dynamic changes to the feature comparison, with this method can detect whether the page contains harmful attack information, if there is, Adopt the appropriate blocking policy.
Keywords：Web front-end; cybersecurity; attack; defense model
1.研究背景和意义
1.1研究背景
从20世纪90年代互联网崛起到如今的2022年，web应用在不知不觉中已经悄然进入到了我们的生活当中，给我们带来了非常多的便利，我们的衣食住行都依赖各类应用软件，比如淘宝、京东、美团、导航软件等。Web应用服务我们学习工作生活健康的同时，也在遭受着网络空间安全所带来的风险。webCohort 有一份关于网络安全的报告说明：通过对现在市场现有的大部分网络应用程序进行测试之后，发现至少有93%都存在安全漏洞和被攻破的风险，并且里面有79%的程序由于Web前端存在的安全漏洞导致的，都是有很大可能遭到黑客攻击[1]。如果遭到攻击，会产生不可逆的后果。所以通过研究发现，当下的Web安全问题特别突出，需要我们去研究并且找出合理的方案，维护我们的互联网安全环境。
1.2研究意义
web前端是我们与各类应用软件交互的媒介，是我们与使用计算机的窗口。随着互联网科技的发展，Web应用种类越来越多，功能越来越复杂，效果也越来越多样，不断地增强我们的使用体验，越来越多的需求也推动了Web 前端技术不断朝着完美的方向前进，但经过我的问卷调查，发现较多的使用者虽然用着各种各样的程序，但是对web前端和网络空间安全的了解程度（图1）还不是很高。Web前端的安全防护并没有十分有效的防范策略，者就需要开发者再日常的代码编写和其他开发工作中，要自觉地遵守国家要求的安全编码规范并且根据现实的网络环境要求，采取最可行的安全措施，在各类浏览器中，用户自己是可以查看Web前端的所有代码的，这才导致了Web前端安全成了计算机的网络安全防护工作最薄弱的地方，因为一旦源代码存在漏洞，就相当于把漏洞公布给了所有的黑客，如果被不法分子修改运用，所造成的危害大、涉及广、难以发现。
对于我们使用过程中涉及的安全隐患，大部分使用者没有合理的解决方法（如图2），大家都觉得重启能解决90%的问题，重装系统能解决5%的问题，剩下的5%只能听天由命了。所以，从我们直接接触的web前端的角度去剖析网络安全问题，并且给出合理性的预防策略是非常有意义的。
2.Web前端攻击与防范的分析
2.1涉及的基本技术知识
我们要想了解了解前端攻击方式、发现前端漏洞以及如何防御，那么我们就必须学习与web前端安全相关的基础知识，通过学习，我建议从W3C标准、HTML5、CSS3和JavaScript、浏览器同源策略、URL、HTTP协议等相关基础知识入手，去进行探究。
2.1.1 W3C标准
W3C标准是由万维网联盟指定的，这个标准不是一个具体的标准，而是一系列标准的集合。从文字定义的角度来说，web前端可以大致分为结构（Structure）、表现（Presentation）和行为（Behavior）这三部分组成。
（1）结构标准语言
包含以下两个内容：一是可扩展标记语言，即标准通用标记语言下的一个子集：XML，二是可扩展超文本标记语言XHTML[2]。
（2）表现标准语言
层叠样式表（CSS），由于原有的编程方式代码冗长，不易于维护，所以我们用CSS3来解决这个问题。万维网联盟创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言，纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易[3]。
（3）行为标准
①文档对象模型（DOM）。根据W3C DOM规范，DOM是一种与浏览器、平台和语言相结合的接口，让我们能较为方便的访问页面其他的标准组件，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突问题，给予web开发工作中和前端工程师一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对象[3]。②ECMAScript。ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言：JAVAScript[4]。
2.1.2 浏览器同源策略
在网络安全的范畴里，有一种策略是同源策略(SameOrigin Policy)，它是一种针对于前端开发的系统的约定规范，这是一种限制读写的方法，它设置了不同源的客户端脚本，如果没有得到明确授权，就不能读写对方的资源。同源策略是当前市面上所以浏览器最核心的功能之一，所有浏览器必支持同源策略，可以说整个互联网Web都是构建在同源策略的基础上[5]。
2.2 XSS攻击
2.2.1 XSS 攻击概述
XSS全称为Cross Site Scripting，即跨站脚本，这是一种经常出现在我们日常使用的Web应用中的前端安全漏洞，通常指攻击者通过各种手段篡改了网页页面，注入了恶意的攻击脚本，这些攻击脚本包括HTML代码和JavaScript脚本等，从而在用户访问时，通过该恶意脚本进行攻击的一种手段[7]。XSS攻击根据效果的不同可以分成三类:反射型XSS (Reflected XSS )、存储型XSS (Stored XSS ）和DOM BasedXSS 。
（1）反射型XSS
反射型XSS从它的特性我们可把它分为非持久型XSS，攻击者先编辑一个带有病毒的链接，再去诱惑用户去点击并且访问相关的后台，所包含恶意脚本代码自动发送到服务器端，这些代码会自动被植入到访问这个资源的服务器的相关响应页面中，用户浏览器接收、解析响应后，恶意代码自动执行，当我们状态处于服务器端动态生成页面时，就会有很大的概率出现这种漏洞。如果这个页面被人为的注入了未经验证的用户数据，黑客很容易就进行攻击，攻击的方法一般是使用从客户端注入恶意代码到动态页面的方法，这能达到比较好的攻击效果。
（2）存储型XSS
存储型XSS，XSS(Persistent XSS)，攻击者把带有恶意代码段的脚本保存在服务器端，从它的应用效果上看，这种攻击被保存的时间比较长，从而具备了较高的稳定和持久性。所以这种XSS攻击也叫做持久型XSS。我们最容易遇到了情况是：攻击者在网页上发表带有恶意JavaScript代码的信息或者链接，信息发表后，任何访问该信息的用户的浏览器都会被动执行这段恶意的JavaScript代码，从而启动了XSS攻击。
（3） DOM Based XSS
DOM Based XSS从它产生的行为后果来说，我们也把它归类为反射型XSS的一种。但是DOM Based xSS 的形成原因尤其特殊，我们都知道，浏览器可以把每一个web前端页面渲染，并且生成相应的DOM节点，通过某种方法取得并在一定规则内修改页面的DOM节点形成的XSS就被称为DOM Based XSS。这里有一个简单的代码实例如下:
如果我们直接打开这个HTML文件将什么都不会显示，此时eval函数location.hash中的值将被执行，即地址栏URL中锚信息将被写入，如果我们执行的是xss-attack，htm1#alert(1)请求，结果就不一样了，这里会alert一个对话框，因为JavaScript在被浏览器解析并且执行时，最终获取到的是eval(*alert(1))。显示情况中，攻击者能修改alert(1)这样的脚本代码为真正有破坏能力的脚本内容，用这种方法轻轻松松就可以将XSS攻击代码放在www.attack.com上的xss.js文件中，攻击者用一些手段诱导用户点击该链接，我们的浏览设备访问这个链接后就会加载并执行攻击者构造的恶意代码。
2.2.3 XSS攻击的防御
XSS的防御十分复杂。当前市场上流通的浏览器中基本内置了一些防御XSS攻击的程序，如Firefox浏览器的CSP和Noscript扩展、IE8以上版本的IE浏览器内置的XSS Filter等[6]。但是对于网站的开发设计从业者来说来说，我们必须设计合理的防御攻击方案，保护用户不被XSS攻击。下面介绍的是一些现有的防御策略：
（1）HttpOnly
HttpOnly最早产生于微软公司，在IE6中应用，到现在已经被开发人员默认成为了一个标准，它的工作原理是浏览器将禁止页面的JavaScript 读取带有HttpOnly属性的Cookie[7]。实际上HttpOnly不是完全为了防御XSS攻击，它的主要作用是为了预防XSS攻击之后的Cookie劫持攻击的，在我们学习的过程中，经常会看到黑客使用XSS攻击获取用户的浏览器Cookie的攻击案例，如果我们把浏览器的Cookie提前设置HttpOnly这个策略，就可以保障Cookie数据的安全，这种方法是限制了JavaScript，不能读取Cookie的值。
（2）输入检查
攻击者使用XSS攻击时，必须产生一些特殊字符，这些特殊字符我们平时接触不到，所以输入检查就很有作用了，输入检查的使用案例中，我们通常是检查使用者输入的数据，通过对比字符串，判定有没有包含特殊字符，一旦发现存在特殊字符，防御程序就起作用了，就执行字符再编码程序。通过在服务器端编辑相关的输入检查代码可以实现输入检查这个功能，如果仅仅在客户端用JavaScript做输入检查，攻击者可以有意识避让。当下Web前端开发最为普遍的方式是在客户端JavaScript中和服务器代码中使用配套的输入检查和其他代码。客户端JavaScript的输入检查是最有效的方法，这种方式能拦截大部分特殊输入，从根本上降低了服务器资源的使用量。
（3）输出检查
通常情况下，在HTML页面中的数据，可以使用编码或转义的方式来防御XSS攻击。编码分为很多种，对Web前端来说，XSS攻击的实质就是“HTML注入”，用户的数据被当成了HTML代码一部分来执行，从而混淆了原本的语义，产生了新的语义[8]。
2.3界面操作劫持攻击
界面操作劫持攻击是这几年Web前端安全领域发展起来的一种新型的攻击方式，它的作用范围很广，很多较为完备的网站都先后受到了这种攻击的青睐[6]。2012年，软件测试公司对市场上大部分的应用进行了检测，仅仅有不到30%的网站或者应用对界面劫持攻击有一定的防御措施，虽然较2010年增长了不少，但是还是存在较大风险。
2.3.1界面操作劫持简介
界面操作劫持攻击最早出现于2008年，界面操作劫持攻击是一种基于视觉欺骗的攻击方式，这种方式通过在web网页的用户交互内容上添加一个不可见的层，误导用户[9]。即使我们认为自己操作的应用不存在风险，但是事实上我们操作了自己看不到的程序，进而执行了黑客植入在覆盖层中的恶意代码，我们在不知情的情况下输入了自己的关键信息，授权了一些自己不知道的应用。随着技术的进步，Web前端的功能得到了很大的发展，但是各种攻击方式也在不断的改进，如果我们按照技术发展阶段划分，可以把界面劫持这种入侵方式分为以下点击劫持（Clickjacking）、拖放劫持（Drag&Drop jacking）、触屏劫持（Tapjacking）这3类。
2.3.2界面操作劫持的防御
界面操作劫持的攻击模式最主要的方式是运用视觉欺骗，通过模拟界面的虚假场景进行会话劫持从而进行攻击，我们基于这种攻击模式和当前的技术做好防御的策略是：不允许iframe嵌入有重要会话或者运用适合的保护策略或者加密模式隔离当前正在使用的交互页面，最好的方法是只允许同域的识别为安全的iframe 嵌入。当前应对界面操作劫持防御的方法有如下几种：
（1）X-Frame-Options防御
X-Frame-Options是由微软首先研究出来的防御方法，Web前端开发人员可以在HTTP响应头中植入一个X-Frame-Options头，浏览器会依据X-Frame-Options字段的参数来判断页面是否具备嵌入iframe的条件[11]。在实际开发中，X-Frame-Options有3个参数：DENY。SAMEORIGIN和ALLOW-FROM。DENY 表示当前不被许可，浏览器会阻止当前页面加载所有的frame；若值为SAMEORIGIN，表示frame页面的URL只限定同源域名下的访问；若值为ALLOW-FROM，则可以允许所有的frame加载的页面地址[10]。当前支持X-Frame-Options 的浏览器如表所示。
（2）Frame Busting 脚本防御
Frame Busting 脚本防御是防御操作劫持的第2种方法。开发者可以运用JavaScript脚本阻止页面被iframe嵌入，这样的防御脚本被称为Frame Busting 脚本，如下示例:
其中 top表示主体窗口，self表示当前窗口，这两项的地址不一样，就将地址设置为相同的，这样可以很大程度上减免用户操作实际发生窗口与所见窗口不相同的情况，进而从脚本层面杜绝了利用透明层完成操作劫持的攻击方法[11]。
3.Web前端防御模型的设计思路
当下web前端的攻击方法得到了进一步的发展，为了保障我们的网络安全，根据各种网络攻击方式的特点，研究并构建作用效果好、耗能低的防御模型及其重要，由于所学有限，在这里仅仅探究一下动态拦截的实现。
3.1动态拦截的实现
动态拦截是前端维护最常用的方法，它最简单的使用方式是使用黑名单模式，黑名单模式最简单的配置方法是：黑名单的正则表达式保存为把文件命名为.json，当我们使用这种文件格式来保存黑名单配置的时候，方便我们修改配置，利用json的跨语言的良好特性，更加方便了我们对该防御方案的移植。把数据保存于服务器端，设置为客户端拦截和服务器拦截共同使用，在这里我们详细探究一下拦截script类的正则表达式，为了保证有效的拦截，script属性必须保存在同一个数组中。
3.2客户端动态拦截
客户端动态拦截也是一种有效的拦截方法，它的原理也是一样，基于黑名单的拦截。它是通过jQuery插件这种前端开发模式来完成的。插件命名为jQuery.js，插件使用方式如下：
在页面中引入外部插件jQuery.XSSDefense.js（文章以html的形式体现），同时给需要设置动态拦截保护的表单域绑定monitor函数。使用jQuery插件的形式可以提高代码的复用性，提高编程效率。然后通过绑定submit事件并获取事件，当我们设置监听表单后，只要用户的表单提交，回调函数就在设置的时间间隔内执行，回调函数中我们预设的toLowCase()就可以很快把输入内容转化成小写，然后根据黑名单正则表达式对转化出来的内容进行匹配，如果匹配度达到我们预先定下的标准，就表示这个输入的内容存在有害信息，马上启动防御程序，从后台立即阻止表单的提交，同时设置弹窗提醒用户，如下所示：
4.总结与展望
由于专业知识的限制，对于本文所阐述的各种攻击手段和预防策略都不够完整，随着Web前端技术的快速发展，新的安全问题也会不断产生，当前我们也不能完整的介绍，但是我们对Web 前端安全的研究会持续进行下去，争取针对网络安全风险的不同场景，基于当前技术设计实现比较全面的抵抗黑客的防御模型，并通过优化算法提高模型的通用性和实用性，使其能够进一步防御CSRF攻击和界面劫持攻击等新型的攻击方式。