前端安全须知

一、网络安全

机密性(加密)、完整性(防伪造)、来源可靠性(签名)

程序漏洞

二、web前端安全

XSS:Cross Site Script(跨站攻击脚本)

往Web页面里插入恶意html代码,当用户浏览该页之时,嵌入其中Web里面的html代码会被执行。

XSS的种类:

1.XSS-基于DOM的XSS

产生原因:当web page含有一些不受服务器端控制的DOM的时候发生,通过form、referer、location修改页面DOM。

解决方法:避免客户端的脚本对DOM的重写、重定向及其它敏感的操作,需要在客户端对form输入进行过滤。

可被攻击者利用的脚本:

URL相关操作

document.location=…
document.location.hostname=…
document.location.replace(…)
document.location.assign(…)
document.URL=…
document.referrer
document.URLUnencoded
window.navigate(…)
window.location

直接运行脚本

eval(…)
window.execScript(…)
window.setInterval(…)
window.setTimeout(…)

直接写入html代码

document.write(…)
document.writeln(…)
document.body.innerHtml=…

直接修改DOM

document.forms[0].action=…
document.attachEvent(…)
document.create…(…)
document.execCommand(…)
document.body
window.attachEvent(…)

打开或修改窗口

document.open(…)
window.open(…)
window.location.href=…

2.XSS-非持久性跨站

产生原因:直接将form或者query(cookie)中的字符带入到页面中,危险query字符参与html的构成(query字符并不被存储)。

解决方法:对输入进行过滤,对输出进行编码。

3.XSS-持久性跨站

产生原因:其破坏页面html结构的原理和非持久XSS一样,只是危险脚本来源不是query字符,而是数据库数据。

解决办法:对输入进行过滤,对输出进行编码。

4.XSS-基于字符集的跨站

产生原因:页面字符集不固定,用户输入非期望字符集的字符,有时会绕过前端的过滤。

解决办法:Web页面一定要指定字符集(GBK),XML中不仅要指定字符集,而且标签要闭合。

5.XSS-基于flash的跨站

产生原因:As脚本可以接受用户输入并操作cookie,攻击者可以配合其他XSS方法将恶意swf文件嵌入页面中。

解决办法:严格管理cookie的读写权限,对flash能接受的用户输入进行过滤和限定。

6.XSS- Self-inflicted XSS

产生原因:攻击者先把页面搞出漏洞,让其他用户再浏览这个有漏洞的页面的时候遭受攻击。这里已经不是严格意义上的XSS了。

解决方法:页面登录超时。

7.XSS-未经验证的跳转构成的跨站

产生原因:如果服务器端做302跳转,跳转的地址来自用户的输入,攻击者可以输入一个恶意的跳转地址来执行脚本。
解决方法:在后端来限定所接收的URL来自淘宝并做过滤。

8.XSS-Cookie构成的跨站

产生原因:破坏页面结构的原理和非持久跨站一致,Js或as可操作cookie,通过cookies提交query。

解决办法:一切来自客户端的cookie是不可信的,后端必须对客户端cookie做验证。

9.XSS- Escape-based XSS

产生原因:其破坏页面语义构成的原理和非持久XSS一致,使用畸形的UTF8字符串拼成URL。

解决方法:对输入进行过滤,对输出进行编码。

CSRF:Cross Site Request Forgery(通过肉鸡)(跨站伪造请求)

CSRF的发生:所有需要登录页面中的交互、表单提交、AJAX

CSRF的防范:临时签名(验证码、时间戳)、crumb

淘宝对CSRF的防范:在表单中指定token;

<input type=”hidden” value=”{$token}” name=”_tb_token_”>

类似

var token = {igame_token: ‘194c93bf571ee6246c591b16911d92e6‘};
    $("#signup_form").validate({
        rules: {
            "invite_code": {
                rangelength: [6,6],
                remote:{
                      url: "/action/validInviteCode",
                    type: "POSt",
                    data: token,
                    beforeSend: function(){
                        $(‘label‘, $(‘#invite_code‘).parent().next()).html("邀请码正在验证");
                    }
                }
            },
            "email": {
                email: true,
                maxlength: 30,
                remote:{
                    url: "/action/isEmailAvailable",
                    type: "POST",
                    dataType: ‘json‘,
                    data: token,
                    beforeSend: function(){
                        $(‘label‘, $(‘#email‘).parent().next()).html("邮箱正在验证");
                    }
                }
            },

在cookie中指定_tb_token_;尽量使用POST方法;Ajax时附带token。

 三、Javascript安全须知

  1. 禁止使用外部引用的js,外链应当完全使用a.tbcdn.cn上的资源文件
  2. 慎用eval,setTimeout,setInterval和从不可信站点获取的字符串操作的函数。
  3. cookies操作一定要征询后端工程师的意见,避免撑破cookies的大小限制了。
  4. 前端代码禁止获取referer,所有referer的操作由后端工程师处理。
  5. 禁止发送页面相关信息到第三方站点
  6. 如果JSON返回的信息里含有用户的私密信息,需要加_tb_token_
  7. 禁止使用script标签来达到跨域访问的目的,应当使用flash实现跨域访问,可信域之间的跨域可以使用iframe
  8. 所有使用的数据必须经过服务端的验证。
  9. js代码需要经过jslint的测试

我们还需要安全规范

页面级的html规范/标准

  • 统一的编码标准(URL/GBK/js unicode)
  • 标签完整性

代码级的coding规范

  • 统一的ajax接口规格
  • 页面中php/jsp和js代码的参数传递
  • 规范的javascript编写习惯

代码review制度

时间: 2024-11-09 21:29:08

前端安全须知的相关文章

段焱--web前端开发须知规范

文件规范 1. html, css, js, images文件均归档至<系统开发规范>约定的目录中;2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加 功能时查找对应页面;3. css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css, 其他页面依实际模块需求命名.;4. Js文件命名: 英文命名, 后缀.js. 共用common.js, 其他依实际模块需求

前端工程师须知pc电脑端分辨率

PC端 按屏幕宽度大小排序(主流的用橙色标明) 分辨率   比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3  | 10.4寸.12.1寸.14.1寸.15寸; ) 1280*800(16:10  |15.4寸) 1280*1024(比例:5:4  | 14.1寸.15.0寸) 1280*854(比例:15:10 | 15.2) 1366*768 (比例:16:9 | 不常见) 1440*900 (16:10  17寸 仅苹果用) 1440*1050(比例:5:

前端开发必须知道的JS之闭包及应用

本文讲的是函数闭包,不涉及对象闭包(如用with实现).如果你觉得我说的有偏差,欢迎拍砖,欢迎指教. 在前端开发必须知道的JS之原型和继承一文中说过下面写篇闭包,加之最近越来越发现需要加强我的闭包应用能力,所以此文不能再拖了.本文讲的是函数闭包,不涉及对象闭包(如用with实现).如果你觉得我说的有偏差,欢迎拍砖,欢迎指教. 一. 闭包的理论 首先必须了解以下几个概念: 执行环境 每调用一个函数时(执行函数时),系统会为该函数创建一个封闭的局部的运行环境,即该函数的执行环境.函数总是在自己的执行

WEB前端开发人员须知的常见浏览器兼容问题及解决技巧

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题.在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都是浏览器的

【移动前端开发实践】从无到有(统计、请求、MVC、模块化)H5开发须知

前言 不知不觉来百度已有半年之久,这半年是996的半年,是孤军奋战的半年,是跌跌撞撞的半年,一个字:真的是累死人啦! 我所进入的团队相当于公司内部创业团队,人员基本全部是新招的,最初开发时连数据库都没设计,当时评审需求的时候居然有一个产品经理拿了一份他设计的数据库,当时我作为一个前端就惊呆了...... 最初的前端只有我1人,这事实上与我想来学习学习的愿望是背道而驰的,但既然来都来了也只能独挑大梁,马上投入开发,当时涉及的项目有: ① H5站点 ② PC站点 ③ Mis后台管理系统 ④ 各种百度

初级前端须知

1 网页的基本结构(HTML + CSS) HTML是一种标记语言,而不是编程语言,最基本是标签是<html>和<body>,CSS是用来定义如何显示HTML元素的.对HTML+CSS很容易入门,但很多人不够深入,举几个例子:<meta> 标签是作什么用的?margin-left与left有什么区别,应该在什么情况下使用?再出个DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度.如果

web前端工程师入门须知

先说下web前端工程师的价值,目前web产品交互越来越复杂,用户使用体验和网站前端性能优化这些都得靠web前端工程师去做web前端工程师是 设计加开发的综合体,web前端工程师是在开发人员中最直接面向产品,面向用户的设计人员,一个开发团队的成果是要靠web前端工程师去展现,因为用户不 会去关心后台的处理有多么强大 :在设计人员中web前端工程师是直接面向开发人员的设计人员,向开发人员以一种计算机语言的方式传递其设计理念,web前端工程师在整个团队中是很关键 的. 在我眼中一名合格的web前端工程

前端进击的巨人(六):知否知否,须知this

常见this的误解 指向函数自身(源于this英文意思的误解) 指向函数的词法作用域(部分情况) this的应用环境 全局环境 无论是否在严格模式下,全局执行环境中(任何函数体外部)this都指向全局对象 var name = '以乐之名'; this.name; // 以乐之名 函数(运行内)环境 函数内部,this的值取决于函数被调用的方式(被谁调用) var name = '无名氏'; function getName() { console.log(this.name); } getNa

前端工程师必须知道的vue前端面试题目汇总

①:说说Vue和Angular.ReactJS的相同点和不同点 ②:简单描述一下Vue中的MVVM模型③:v-if和v-show指令有什么区别?④:如何阻止Vue中的绑定事件不发生冒泡⑤:父.子组件间是如何通信的?⑥:非父子层级的组件如何实现通信?⑦:什么是动态组件?他的作用是什么?⑧:为什么组件中的data属性的值必须是一个函数?答案与详解Q说说Vue和Angular.ReactJS的相同点和不同点与React的相同:●都使用了Virtual DOM●提供了响应式和组件化的视图组件●将注意力集