2. 程式人生 > >跨域post 及 使用token防止csrf 攻擊

跨域post 及 使用token防止csrf 攻擊

阿新 • • 發佈：2017-06-17
發生 guid form eba 代碼 host fault 而不是 發送郵件

環境：
後臺使用的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請求，去獲取資源

toBankId=11&money=1000">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

  1. Token 應該被保存起來（放到 local / session stograge 或者 cookies）
  2. Tokens 除了像 cookie 一樣有有效期。而且你能夠有很多其它的操作方法。一旦 token 過期，僅僅須要又一次獲取一個。你能夠使用一個接口去刷新 token。你甚至能夠把 token 原來的公布時間也保存起來。而且強制在兩星期後又一次登錄什麽的。假設你須要撤回 tokens（當 token 的生存期比較長的時候這非常有必要）那麽你須要一個 token 的生成管理器去作檢查。
  3. Local / session storage 不會跨域工作，請使用一個標記 cookie
  4. 有須要的話，要加密而且簽名 token
  5. 將 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思路：

  1. 移動端登錄時，服務端驗證表單信息。登陸成功，生成token，返回給client；
  2. client將token存在localstorage/sessionstorage中。每次提交表單。都須要攜帶token；
  3. 服務端獲取請求。假設沒有token，則忽略請求；

出現的問題：

  1. 服務端須要限制登陸次數
    解決方法：
    client添加登陸間隔。請求一次後，等待x秒才幹再次請求
    服務端做cas驗證

  2. 服務端須要保存用戶的token，及過期時間；
    解決方法：
    能夠將token 保存在Memcache，數據庫中，redis

  3. client存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/

跨域post 及 使用token防止csrf 攻擊

相關推薦

跨域post 及 使用token防止csrf 攻擊

發生 guid form eba 代碼 host fault 而不是 發送郵件 環境： 後臺使用的python - flask 前臺使用angular框架 1.一個跨域post的樣例： 跨域post有多種實現方式：

前後端分離，解決跨域問題及django的csrf跨站請求保護 ajax 跨域 headers JavaScript ajax 跨域請求 +設定headers 實踐

1. 前後端分離解決跨域問題 解決跨域呼叫服務並設定headers 主要的解決方法需要通過伺服器端設定響應頭、正確響應options請求，正確設定 JavaScript端需要設定的headers資訊 方能實現； 關於跨域，前端會先發送OPTIONS請求，進行預檢，檢查後端是否允許前端設定的相應的請求頭，請

fetch跨域實現及post傳參問題

fetch跨域有兩種方法: 1.前端jsonp跨域 2.後端設定cors跨域 首先,嘗試了jsonp跨域,可以輕鬆成功連線上豆瓣API 引入包 fetch-jsonp try{ const url = `https://api.douban.

.net webapi項目跨域問題及解決方案

prot net 方案 ted access 節點 跨域訪問 架構師資料 eth 問題： 1.項目完成，部署到不同的iis版本上，跨域訪問有的通有的不通 解決辦法： 1.將復雜請求改為簡單請求 2.代碼中去掉所有跨域設置，配置中添加或修改節點 <system

Ajax跨域原理及解決方案

一次 變化 mes iframe 實現 type .ajax 一個 min 跨域請求的產生 跨域請求歸根結底是由於瀏覽器的“同源策略”引起的，同源策略指的是域名相同、協議相同、端口相同， 假設有http://www.a.com/test.html，下面的示例 域名不同 h

MVC防止CSRF攻擊

防範 bmi date tex 阻止 出現 人做 簡單 image 可能我們大多數人做web的時候不會太註意這個問題，但是這是一個很重要的一個點。我們寫代碼寫業務的時候也應該從各方面多思考。 首先就是先簡單介紹下什麽是CSRF CSRF 全程是 Cross-site r

利用django中間件django.middleware.csrf.CsrfViewMiddleware防止csrf攻擊

com ajax 反序 復雜 auth name 中間件 深度 The 一、在django後臺處理 1、將django的setting中的加入django.contrib.messages.middleware.MessageMiddleware，一般新建的django項目

利用django中間件CsrfViewMiddleware防止csrf攻擊

() 返回 data 序列 傳遞 一次 項目 tps 網絡 一、在django後臺處理 1、將django的setting中的加入django.contrib.messages.middleware.MessageMiddleware，一般新建的django項目中會自帶的。

.Net 站點跨域問題及解決方法

1、什麼是站點跨域 瞭解跨域之前, 先了解下什麼同源策略?百度百科：同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。同源:同一個協

angularjs跨域post解決方案

前端同學李雷和後臺同學韓梅梅分別在自己電腦上進行開發，後臺介面寫好的時候，李雷改動完就把前端程式碼上傳到gitlab，然後在測試機上從gitlab上拉下來，然後在測試機上移動最新程式碼，最後回到本機重新整理頁面。有時候碰到網速不好的情況傳個git傳了半天，或者李雷剛上傳完發現少寫了一個單詞，加上再傳

vue-resource 跨域 post請求詳解

vue-resource 跨域 post請求時，需要後端工程師配合設定 Access-Control-Allow-Origin 為 * 在使用之前要下載和引入：cnpm install vue-resource --save  //這裡我使用的是淘寶的cn

Flask專案實現防止CSRF攻擊的流程

Flask專案實現防止CSRF攻擊的流程 a) 使用 flask_wtf 中 CSRFProtect類，初始化該類並傳入app b) 使用 flask_wtf.csrf模組中的generate_csrf方法生成csrf_token c) 使用請求勾子 after_req

ajax跨域post請求

為什麼會出現跨域問題？ 首先我們要先了解一個概念--同源策略。同源策略，它是由Netscape提出的一個著名的安全策略。現在所有支援JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協議，埠相同。目的是出於安全考慮，防止js指令碼隨意呼叫其他網站的資源。

Web學習之跨域問題及解決方案

在做前端開發時，我們時常使用ajax與伺服器通訊獲取資源，享受ajax便利的同時，也知道它有限制：跨域安全限制，即同源策略。 同源策略（SOP）,核心是確保不同源提供的檔案之間是相互獨立的 預設情況下，XHR物件只能訪問與包含它的頁面處於同一域中的資源，這種限制可以預防某些惡意攻擊，但同

利用django中介軟體django.middleware.csrf.CsrfViewMiddleware防止csrf攻擊

一、在django後臺處理 1、將django的setting中的加入django.contrib.messages.middleware.MessageMiddleware，一般新建的django專案中會自帶的。 MIDDLEWARE_CLASSES = [ 'django.middleware.se

利用django中介軟體CsrfViewMiddleware防止csrf攻擊

一、在django後臺處理 1、將django的setting中的加入django.contrib.messages.middleware.MessageMiddleware，一般新建的django專案中會自帶的。 MIDDLEWARE_CLASSES = [ 'django.middleware.se

前端安全系列之二：如何防止CSRF攻擊？

背景 隨著網際網路的高速發展，資訊保安問題已經成為企業最為關注的焦點之一，而前端又是引發企業安全問題的高危據點。在移動網際網路時代，前端人員除了傳統的 XSS、CSRF 等安全問題之外，又時常遭遇網路劫持、非法呼叫 Hybrid API 等新型安全問題。當然，

laravel 解決跨域問題及新laravel包載入更新

1.在框架下目錄（laravel\app\Http\Kernel.php）下新增 protected $middleware = [ \Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class

JSONP跨域原理及示例

同源策略下，伺服器不能請求該伺服器以外的資源，及不能跨域請求。何為跨域，簡單說就是協議+主機名+埠號（存在的話）三者之一不同就可稱之為跨域。如： 1.http: //www.test.com 和 https: //www.test.com 之間協議不同，

js常見跨域問題及解決方法

什麼是跨域？ 概念：只要協議、域名、埠有任何一個不同，都被當作是不同的域。 URL 說明 是否允許通訊 http://www.a.com/a.js http://www.a.com/b.js 同一域名下