跨域post 及使用token防止csrf 攻击_通过token解决cors安全性问题-程序员宅基地

技术标签： angular python 安全 csrf flask 跨域post

环境：
后台使用的python - flask
前台使用angular框架

1.一个跨域post的例子：

跨域post有多种实现方式：

1.CORS：http://blog.csdn.net/hfahe/article/details/7730944
2.利用iframe
3.server proxy：https://en.wikipedia.org/wiki/Proxy_server

例子使用的为iframe，想要证明，在没有进行csrf防御时，任意攻击者可以利用javascript发送 post 请求，从而简单的提交或获取数据资料；

1.本地test.html页面

<html>
<head>
<title>POST</title>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
</head>
<body>
<input type="button" onclick="test();" value="test"/>
<script type="text/javascript">
    function test() {
     
        crossDomainPost({
            url: 'http://localhost:5000/test',
            param: {a: '1', b: '2'},
            onSubmit: function (e) {
     
                console.log(e);
            }
        })
    }
    function crossDomainPost(config) {
     
        var def = {
            url         : '',                   //提交的地址
            param       : {},                   //提交的参数
            delay       : 1000,                 //延迟获取参数的时间，单位为毫秒
            onSubmit    : function (i) {
     }       //提交成功后的回调函数，参数为跳转的IFRAME
        };
        config  = $.extend({}, def, config);
        if (!config.url) {
            config.onSubmit({error: 'URL is Empty!'});
            return;
        }
        /****baseMethod****/
        /**
         * 生成随机的10位字符，且唯一
         * @returns {string}
         */
        var createGuid    = function () {
     
            var guid = "";
            for (var i = 1; i <= 10; i++) {
                guid += Math.floor(Math.random() * 16.0).toString(16);
            }
            return guid;
        },
        /**
         * 删除指定的节点
         * @param _element 要删除的节点
         */
        removeElement = function (_element) {
     
            var _parentElement = _element.parentNode;
            if (_parentElement) {
                _parentElement.removeChild(_element);
            }
        }

        // Add the iframe with a unique name
        var iframe                = document.createElement("iframe");
        var uniqueString          = createGuid();
        document.body.appendChild(iframe);
        iframe.style.display      = "none";
        iframe.contentWindow.name = uniqueString;

        // construct a form with hidden inputs, targeting the iframe
        var form    = document.createElement("form");
        form.target = uniqueString;
        form.action = config.url;
        form.method = "POST";

        // repeat for each parameter
        for (var item in config.param) {
            var input   = document.createElement("input");
            input.type  = "hidden";
            input.name  = item;
            input.value = config.param[ item ];
            form.appendChild(input);
        }

        document.body.appendChild(form);
        try{
            form.submit();
        }catch(e){
            console.log('error');
            consoel.log(e);
        }


        setTimeout(function () {
     
            config.onSubmit(iframe);
            removeElement(form);    //移除form
        }, config.delay);
    }
    </script>
</body>
</html>

2.后台接收代码

这里仅接收POST的请求

@app.route('/test' ,methods=['POST'])
def test():
    print 'param is :';
    print request.form
    return jsonify(data='2222')

3.控制台输出：

服务端处理了非站内的请求

这里写图片描述

4.浏览器输出：

本地test.html获取到返回信息

这里写图片描述

2.CSRF

跨站请求攻击，简单地说，是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并执行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。由于浏览器曾经认证过，所以被访问的网站会认为是真正的用户操作而去执行。这利用了web中用户身份验证的一个漏洞：简单的身份验证只能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。

你这可以这么理解CSRF攻击：攻击者盗用了你的身份，以你的名义发送恶意请求。CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账……造成的问题包括：个人隐私泄露以及财产安全。

1.原理

这里写图片描述

从上图可以看出，要完成一次CSRF攻击，受害者必须依次完成两个步骤：

登录受信任网站A，并在本地生成Cookie。
在不登出A的情况下，访问危险网站B。

看到这里，你也许会说：“如果我不满足以上两个条件中的一个，我就不会受到CSRF的攻击”。是的，确实如此，但你不能保证以下情况不会发生：

1.你不能保证你登录了一个网站后，不再打开一个tab页面并访问另外的网站。
2.你不能保证你关闭浏览器了后，你本地的Cookie立刻过期，你上次的会话已经结束。
3.上图中所谓的攻击网站，可能是一个存在其他漏洞的可信任的经常被人访问的网站。

原理详细：http://www.80sec.com/csrf-securit.html

2.常见的攻击类型：

1.GET类型的CSRF
只需要一个HTTP请求，就可以构造一次简单的CSRF。
例子：
银行网站A：它以GET请求来完成银行转账的操作，如：http://www.mybank.com/Transfer.php?toBankId=11&money=1000
危险网站B：它里面有一段HTML的代码如下：

<img src=http://www.mybank.com/Transfer.php?toBankId=11&money=1000>

首先，你登录了银行网站A，然后访问危险网站B，噢，这时你会发现你的银行账户少了1000块

为什么会这样呢？原因是银行网站A违反了HTTP规范，使用GET请求更新资源。在访问危险网站B的之前，你已经登录了银行网站A，而B中的以GET的方式请求第三方资源（这里的第三方就是指银行网站了，原本这是一个合法的请求，但这里被不法分子利用了），所以你的浏览器会带上你的银行网站A的Cookie发出Get请求，去获取资源http://www.mybank.com/Transfer.php?toBankId=11&money=1000 ，结果银行网站服务器收到请求后，认为这是一个更新资源操作（转账操作），所以就立刻进行转账操作

2.POST类型的CSRF
如上边的跨域POST例子

3.如何防御CSRF

1.提交验证码
在表单中增加一个随机的数字或字母验证码，通过强制用户和应用进行交互，来有效地遏制CSRF攻击。

2.Referer Check
检查如果是非正常页面过来的请求，则极有可能是CSRF攻击。

3.token验证

在 HTTP 请求中以参数的形式加入一个随机产生的 token，并在服务器端建立一个拦截器来验证这个 token，如果请求中没有
token 或者 token 内容不正确，则认为可能是 CSRF 攻击而拒绝该请求。
token需要足够随机
敏感的操作应该使用POST，而不是GET，以form表单的形式提交，可以避免token泄露。

4.在 HTTP 头中自定义属性并验证
这种方法也是使用 token 并进行验证，这里并不是把 token 以参数的形式置于 HTTP 请求之中，而是把它放到 HTTP 头中自定义的属性里。通过 XMLHttpRequest 这个类，可以一次性给所有该类请求加上 csrftoken 这个 HTTP 头属性，并把 token 值放入其中。这样解决了上种方法在请求中加入 token 的不便，同时，通过 XMLHttpRequest 请求的地址不会被记录到浏览器的地址栏，也不用担心 token 会透过 Referer 泄露到其他网站中去。

4.关于token

Token 应该被保存起来（放到 local / session stograge 或者 cookies）
Tokens 除了像 cookie 一样有有效期，而且你可以有更多的操作方法。一旦 token 过期，只需要重新获取一个。你可以使用一个接口去刷新 token；你甚至可以把 token 原来的发布时间也保存起来，并且强制在两星期后重新登录什么的；如果你需要撤回 tokens（当 token 的生存期比较长的时候这很有必要）那么你需要一个 token 的生成管理器去作检查。
Local / session storage 不会跨域工作，请使用一个标记 cookie
有需要的话，要加密并且签名 token
将 JSON Web Tokens 应用到 OAuth 2

使用Token

1.引入csrf

from flask_wtf.csrf import CsrfProtect
csrf = CsrfProtect()

app = Flask(__name__)

csrf.init_app(app)
app.config['SECRET_KEY']='myblog'

2.在站内页面上head中，增加token

<meta name="csrf-token" content="{
    { csrf_token() }}">

3.配置angular提交表头

app.config(function ($httpProvider) {
    
    $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');
});

4.再次测试跨域post
后台输出：
这里写图片描述
前台输出：

关于webapp跨域Post使用token思路：

移动端登录时，服务端验证表单信息，登陆成功，生成token，返回给客户端；
客户端将token存在localstorage/sessionstorage中，每次提交表单，都需要携带token；
服务端获取请求，如果没有token，则忽略请求；

出现的问题：

服务端需要限制登陆次数
解决方法：
客户端增加登陆间隔，请求一次后，等待x秒才能再次请求
服务端做cas验证
服务端需要保存用户的token，及过期时间；
解决方法：
可以将token 保存在Memcache，数据库中，redis
客户端存token时，需要对token加密
解决方法：
在存储的时候把token进行对称加密存储，用时解开
将请求URL、时间戳、token三者进行合并加盐签名，服务端校验有效性

当然，以上只防君子，不防小人

参考：
跨域post请求：http://blog.csdn.net/doraeimo/article/details/7329779
跨站请求伪造：http://www.jianshu.com/p/7f33f9c7997b
token:http://alvinzhu.me/blog/2014/08/26/10-things-you-should-know-about-tokens/

本文链接：https://blog.csdn.net/u013934914/article/details/50428869

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

什么是内部类？成员内部类、静态内部类、局部内部类和匿名内部类的区别及作用？_成员内部类和局部内部类的区别-程序员宅基地

文章浏览阅读3.4k次，点赞8次，收藏42次。一、什么是内部类？or 内部类的概念内部类是定义在另一个类中的类；下面类TestB是类TestA的内部类。即内部类对象引用了实例化该内部对象的外围类对象。public class TestA{ class TestB {}}二、为什么需要内部类？or 内部类有什么作用？1、内部类方法可以访问该类定义所在的作用域中的数据，包括私有数据。2、内部类可以对同一个包中的其他类隐藏起来。3、当想要定义一个回调函数且不想编写大量代码时，使用匿名内部类比较便捷。三、内部类的分类成员内部_成员内部类和局部内部类的区别

分布式系统_分布式系统运维工具-程序员宅基地

文章浏览阅读118次。分布式系统要求拆分分布式思想的实质搭配要求分布式系统要求按照某些特定的规则将项目进行拆分。如果将一个项目的所有模板功能都写到一起，当某个模块出现问题时将直接导致整个服务器出现问题。拆分按照业务拆分为不同的服务器，有效的降低系统架构的耦合性在业务拆分的基础上可按照代码层级进行拆分(view、controller、service、pojo)分布式思想的实质分布式思想的实质是为了系统的..._分布式系统运维工具

用Exce分析l数据极简入门_exce l趋势分析数据量-程序员宅基地

文章浏览阅读174次。1.数据源准备2.数据处理step1：数据表处理应用函数：①VLOOKUP函数; ② CONCATENATE函数终表：step2：数据透视表统计分析（1）透视表汇总不同渠道用户数, 金额（2）透视表汇总不同日期购买用户数，金额（3）透视表汇总不同用户购买订单数，金额step3：讲第二步结果可视化, 比如, 柱形图（1）不同渠道用户数, 金额（2）不同日期..._exce l趋势分析数据量

宁盾堡垒机双因素认证方案_horizon宁盾双因素配置-程序员宅基地

文章浏览阅读3.3k次。堡垒机可以为企业实现服务器、网络设备、数据库、安全设备等的集中管控和安全可靠运行，帮助IT运维人员提高工作效率。通俗来说，就是用来控制哪些人可以登录哪些资产（事先防范和事中控制），以及录像记录登录资产后做了什么事情（事后溯源）。由于堡垒机内部保存着企业所有的设备资产和权限关系，是企业内部信息安全的重要一环。但目前出现的以下问题产生了很大安全隐患：密码设置过于简单，容易被暴力破解；为方便记忆，设置统一的密码，一旦单点被破，极易引发全面危机。在单一的静态密码验证机制下，登录密码是堡垒机安全的唯一_horizon宁盾双因素配置

谷歌浏览器安装（Win、Linux、离线安装）_chrome linux debian离线安装依赖-程序员宅基地

文章浏览阅读7.7k次，点赞4次，收藏16次。Chrome作为一款挺不错的浏览器，其有着诸多的优良特性，并且支持跨平台。其支持（Windows、Linux、Mac OS X、BSD、Android），在绝大多数情况下，其的安装都很简单，但有时会由于网络原因，无法安装，所以在这里总结下Chrome的安装。Windows下的安装：在线安装：离线安装：Linux下的安装：在线安装：离线安装：..._chrome linux debian离线安装依赖

烤仔TVの尚书房 | 逃离北上广？不如押宝越南“北上广”-程序员宅基地

文章浏览阅读153次。中国发达城市榜单每天都在刷新，但无非是北上广轮流坐庄。北京拥有最顶尖的文化资源，上海是“摩登”的国际化大都市，广州是活力四射的千年商都。GDP和发展潜力是衡量城市的数字指...

随便推点

java spark的使用和配置_使用java调用spark注册进去的程序-程序员宅基地

文章浏览阅读3.3k次。前言spark在java使用比较少，多是scala的用法，我这里介绍一下我在项目中使用的代码配置详细算法的使用请点击我主页列表查看版本jar版本说明spark3.0.1scala2.12这个版本注意和spark版本对应，只是为了引jar包springboot版本2.3.2.RELEASEmaven <dependency> <gro_使用java调用spark注册进去的程序

汽车零部件开发工具巨头V公司全套bootloader中UDS协议栈源代码，自己完成底层外设驱动开发后，集成即可使用_uds协议栈源代码-程序员宅基地

文章浏览阅读4.8k次。汽车零部件开发工具巨头V公司全套bootloader中UDS协议栈源代码，自己完成底层外设驱动开发后，集成即可使用，代码精简高效，大厂出品有量产保证。:139800617636213023darcy169_uds协议栈源代码

AUTOSAR基础篇之OS(下)_autosar 定义了 5 种多核支持类型-程序员宅基地

文章浏览阅读4.6k次，点赞20次，收藏148次。AUTOSAR基础篇之OS(下)前言首先，请问大家几个小小的问题，你清楚：你知道多核OS在什么场景下使用吗？多核系统OS又是如何协同启动或者关闭的呢？AUTOSAR OS存在哪些功能安全等方面的要求呢？多核OS之间的启动关闭与单核相比又存在哪些异同呢？。。。。。。今天，我们来一起探索并回答这些问题。为了便于大家理解，以下是本文的主题大纲：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JCXrdI0k-1636287756923)(https://gite_autosar 定义了 5 种多核支持类型

VS报错无法打开自己写的头文件_vs2013打不开自己定义的头文件-程序员宅基地

文章浏览阅读2.2k次，点赞6次，收藏14次。原因：自己写的头文件没有被加入到方案的包含目录中去，无法被检索到，也就无法打开。将自己写的头文件都放入header files。然后在VS界面上，右键方案名，点击属性。将自己头文件夹的目录添加进去。_vs2013打不开自己定义的头文件

【Redis】Redis基础命令集详解_redis命令-程序员宅基地

文章浏览阅读3.3w次，点赞80次，收藏342次。此时，可以将系统中所有用户的 Session 数据全部保存到 Redis 中，用户在提交新的请求后，系统先从Redis 中查找相应的Session 数据，如果存在，则再进行相关操作，否则跳转到登录页面。此时，可以将系统中所有用户的 Session 数据全部保存到 Redis 中，用户在提交新的请求后，系统先从Redis 中查找相应的Session 数据，如果存在，则再进行相关操作，否则跳转到登录页面。当数据量很大时，count 的数量的指定可能会不起作用，Redis 会自动调整每次的遍历数目。_redis命令

URP渲染管线简介-程序员宅基地

文章浏览阅读449次，点赞3次，收藏3次。URP的设计目标是在保持高性能的同时，提供更多的渲染功能和自定义选项。与普通项目相比，会多出Presets文件夹，里面包含着一些设置，包括本色，声音，法线，贴图等设置。全局只有主光源和附加光源，主光源只支持平行光，附加光源数量有限制，主光源和附加光源在一次Pass中可以一起着色。URP：全局只有主光源和附加光源，主光源只支持平行光，附加光源数量有限制，一次Pass可以计算多个光源。可编程渲染管线：渲染策略是可以供程序员定制的，可以定制的有：光照计算和光源，深度测试，摄像机光照烘焙，后期处理策略等等。_urp渲染管线