用tornado做網(wǎng)站(5)

2018-02-24 15:48 更新

模板繼承

用前面的方法,已經(jīng)能夠很順利地編寫模板了。讀者如果留心一下,會覺得每個模板都有相同的部分內容。在python中,有一種被稱之為“繼承”的機制(請閱讀本教程第貳季第肆章中的[類(4)(./209.md)中有關“繼承”講述]),它的作用之一就是能夠讓代碼重用。

在tornado的模板中,也能這樣。

先建立一個文件,命名為base.html,代碼如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Learning Python</title>
</head>
<body>
    <header>
        {% block header %}{% end %}
    </header>
    <content>
        {% block body %}{% end %}
    </content>
    <footer>
        {% set website = "<a >welcome to my website</a>" %}
        {% raw website %}
    </footer>
    <script src="https://atts.w3cschool.cn/attachments/image/cimg/jquery.min.js")}}"></script>
    <script src="https://atts.w3cschool.cn/attachments/image/cimg/script.js")}}"></script>
</body>
</html>

接下來就以base.html為父模板,依次改寫已經(jīng)有的index.html和user.html模板。

index.html代碼如下:

{% extends "base.html" %}

{% block header %}
    <h2>登錄頁面</h2>
    <p>用用戶名為:{{user}}登錄</p> 
{% end %}
{% block body %}
    <form method="POST">
        <p><span>UserName:</span><input type="text" id="username"/></p>
        <p><span>Password:</span><input type="password" id="password" /></p>
        <p><input type="BUTTON" value="登錄" id="login" /></p>
    </form>
{% end %}

user.html的代碼如下:

{% extends "base.html" %}

{% block header %}
    <h2>Your informations are:</h2>
{% end %}

{% block body %}
    <ul>
        {% for one in users %}
            <li>username:{{one[1]}}</li>
            <li>password:{{one[2]}}</li>
            <li>email:{{one[3]}}</li>
        {% end %}
    </ul>
{% end %}

看以上代碼,已經(jīng)沒有以前重復的部分了。{% extends "base.html" %}意味著以base.html為父模板。在base.html中規(guī)定了形式如同{% block header %}{% end %}這樣的塊語句。在index.html和user.html中,分別對塊語句中的內容進行了重寫(或者說填充)。這就相當于在base.html中做了一個結構,在子模板中按照這個結構填內容。

CSS

基本上的流程已經(jīng)差不多了,如果要美化前端,還需要使用css,它的使用方法跟js類似,也是在靜態(tài)目錄中建立文件即可。然后把下面這句加入到base.html的<head></head>中:

 <link rel="stylesheet" type="text/css" href="{{static_url("css/style.css")}}">

當然,要在style.css中寫一個樣式,比如:

body {
    color:red;
}

然后看看前端顯示什么樣子了,我這里是這樣的:

關注字體顏色。

至于其它關于CSS方面的內容,本教程就不重點講解了。讀者可以參考關于CSS的資料。

至此,一個簡單的基于tornado的網(wǎng)站就做好了,雖然它很丑,但是它很有前途。因為讀者只要按照上述的討論,可以在里面增加各種自己認為可以增加的內容。

建議讀者在上述學習基礎上,可以繼續(xù)完成下面的幾個功能:

  • 用戶注冊
  • 用戶發(fā)表文章
  • 用戶文章列表,并根據(jù)文章標題查看文章內容
  • 用戶重新編輯文章

在后續(xù)教程內容中,也會涉及到上述功能。

cookie和安全

cookie是現(xiàn)在網(wǎng)站重要的內容,特別是當有用戶登錄的時候。所以,要了解cookie。維基百科如是說:

Cookie(復數(shù)形態(tài)Cookies),中文名稱為小型文字檔案或小甜餅,指某些網(wǎng)站為了辨別用戶身份而儲存在用戶本地終端(Client Side)上的數(shù)據(jù)(通常經(jīng)過加密)。定義於RFC2109。是網(wǎng)景公司的前雇員Lou Montulli在1993年3月的發(fā)明。

關于cookie的作用,維基百科已經(jīng)說的非常詳細了(讀者還能正常訪問這么偉大的網(wǎng)站嗎?):

因為HTTP協(xié)議是無狀態(tài)的,即服務器不知道用戶上一次做了什么,這嚴重阻礙了交互式Web應用程序的實現(xiàn)。在典型的網(wǎng)上購物場景中,用戶瀏覽了幾個頁面,買了一盒餅干和兩瓶飲料。最后結帳時,由于HTTP的無狀態(tài)性,不通過額外的手段,服務器并不知道用戶到底買了什么。 所以Cookie就是用來繞開HTTP的無狀態(tài)性的“額外手段”之一。服務器可以設置或讀取Cookies中包含信息,借此維護用戶跟服務器會話中的狀態(tài)。

在剛才的購物場景中,當用戶選購了第一項商品,服務器在向用戶發(fā)送網(wǎng)頁的同時,還發(fā)送了一段Cookie,記錄著那項商品的信息。當用戶訪問另一個頁面,瀏覽器會把Cookie發(fā)送給服務器,于是服務器知道他之前選購了什么。用戶繼續(xù)選購飲料,服務器就在原來那段Cookie里追加新的商品信息。結帳時,服務器讀取發(fā)送來的Cookie就行了。

Cookie另一個典型的應用是當?shù)卿浺粋€網(wǎng)站時,網(wǎng)站往往會請求用戶輸入用戶名和密碼,并且用戶可以勾選“下次自動登錄”。如果勾選了,那么下次訪問同一網(wǎng)站時,用戶會發(fā)現(xiàn)沒輸入用戶名和密碼就已經(jīng)登錄了。這正是因為前一次登錄時,服務器發(fā)送了包含登錄憑據(jù)(用戶名加密碼的某種加密形式)的Cookie到用戶的硬盤上。第二次登錄時,(如果該Cookie尚未到期)瀏覽器會發(fā)送該Cookie,服務器驗證憑據(jù),于是不必輸入用戶名和密碼就讓用戶登錄了。

和任何別的事物一樣,cookie也有缺陷,比如來自偉大的維基百科也列出了三條:

  1. cookie會被附加在每個HTTP請求中,所以無形中增加了流量。
  2. 由于在HTTP請求中的cookie是明文傳遞的,所以安全性成問題。(除非用HTTPS)
  3. Cookie的大小限制在4KB左右。對于復雜的存儲需求來說是不夠用的。

對于用戶來講,可以通過改變?yōu)g覽器設置,來禁用cookie,也可以刪除歷史的cookie。但就目前而言,禁用cookie的可能不多了,因為她總要在網(wǎng)上買點東西吧。

Cookie最讓人擔心的還是由于它存儲了用戶的個人信息,并且最終這些信息要發(fā)給服務器,那么它就會成為某些人的目標或者工具,比如有cookie盜賊,就是搜集用戶cookie,然后利用這些信息進入用戶賬號,達到個人的某種不可告人之目的;還有被稱之為cookie投毒的說法,是利用客戶端的cookie傳給服務器的機會,修改傳回去的值。這些行為常常是通過一種被稱為“跨站指令腳本(Cross site scripting)”(或者跨站指令碼)的行為方式實現(xiàn)的。偉大的維基百科這樣解釋了跨站腳本:

跨網(wǎng)站腳本(Cross-site scripting,通常簡稱為XSS或跨站腳本或跨站腳本攻擊)是一種網(wǎng)站應用程序的安全漏洞攻擊,是代碼注入的一種。它允許惡意用戶將代碼注入到網(wǎng)頁上,其他用戶在觀看網(wǎng)頁時就會受到影響。這類攻擊通常包含了HTML以及用戶端腳本語言。

XSS攻擊通常指的是通過利用網(wǎng)頁開發(fā)時留下的漏洞,通過巧妙的方法注入惡意指令代碼到網(wǎng)頁,使用戶加載并執(zhí)行攻擊者惡意制造的網(wǎng)頁程序。這些惡意網(wǎng)頁程序通常是JavaScript,但實際上也可以包括Java, VBScript, ActiveX, Flash 或者甚至是普通的HTML。攻擊成功后,攻擊者可能得到更高的權限(如執(zhí)行一些操作)、私密網(wǎng)頁內容、會話和cookie等各種內容。

cookie是好的,被普遍使用。在tornado中,也提供對cookie的讀寫函數(shù)。

set_cookie()get_cookie()是默認提供的兩個方法,但是它是明文不加密傳輸?shù)摹?/p>

在index.py文件的IndexHandler類的post()方法中,當用戶登錄,驗證用戶名和密碼后,將用戶名和密碼存入cookie,代碼如下: def post(self): username = self.get_argument("username") password = self.get_argument("password") user_infos = mrd.select_table(table="users",column="*",condition="username",value=username) if user_infos: db_pwd = user_infos[0][2] if db_pwd == password: self.set_cookie(username,db_pwd) #設置cookie self.write(username) else: self.write("your password was not right.") else: self.write("There is no thi user.")

上面代碼中,較以前只增加了一句self.set_cookie(username,db_pwd),在回到登錄頁面,等候之后就成為:

看圖中箭頭所指,從左開始的第一個是用戶名,第二個是存儲的該用戶密碼。將我在登錄是的密碼就以明文的方式存儲在cookie里面了。

明文存儲,顯然不安全。

tornado提供另外一種安全的方法:set_secure_cookie()和get_secure_cookie(),稱其為安全cookie,是因為它以明文加密方式傳輸。此外,跟set_cookie()的區(qū)別還在于, set_secure_cookie()執(zhí)行后的cookie保存在磁盤中,直到它過期為止。也是因為這個原因,即使關閉瀏覽器,在失效時間之間,cookie都一直存在。

要是用set_secure_cookie()方法設置cookie,要先在application.py文件的setting中進行如下配置:

setting = dict(
    template_path = os.path.join(os.path.dirname(__file__), "templates"),
    static_path = os.path.join(os.path.dirname(__file__), "statics"),
    cookie_secret = "bZJc2sWbQLKos6GkHn/VB9oXwQt8S0R0kRvJ5/xJ89E=",
    )

其中cookie_secret = "bZJc2sWbQLKos6GkHn/VB9oXwQt8S0R0kRvJ5/xJ89E="是為此增加的,但是,它并不是這正的加密,僅僅是一個障眼法罷了。

因為tornado會將cookie值編碼為Base-64字符串,并增加一個時間戳和一個cookie內容的HMAC簽名。所以,cookie_secret的值,常常用下面的方式生成(這是一個隨機的字符串):

>>> import base64, uuid
>>> base64.b64encode(uuid.uuid4().bytes)
'w8yZud+kRHiP9uABEXaQiA=='

如果嫌棄上面的簽名短,可以用base64.b64encode(uuid.uuid4().bytes + uuid.uuid4().bytes)獲取。這里得到的是一個隨機字符串,用它作為 cookie_secret值。

然后修改index.py中設置cookie那句話,變成:

self.set_secure_cookie(username,db_pwd)

從新跑一個,看看效果。

啊哈,果然“密”了很多。

如果要獲取此cookie,用self.get_secure_cookie(username)即可。

這是不是就安全了。如果這樣就安全了,你太低估黑客們的技術實力了,甚至于用戶自己也會修改cookie值。所以,還不安全。所以,又有了httponly和secure屬性,用來防范cookie投毒。設置方法是:

self.set_secure_cookie(username, db_pwd, httponly=True, secure=True)

要獲取cookie,可以使用self.set_secure_cookie(username)方法,將這句放在user.py中某個適合的位置,并且可以用print語句打印出結果,就能看到變量username對應的cookie了。這時候已經(jīng)不是那個“密”過的,是明文顯示。

用這樣的方法,瀏覽器通過SSL連接傳遞cookie,能夠在一定程度上防范跨站腳本攻擊。

XSRF

XSRF的含義是Cross-site request forgery,即跨站請求偽造,也稱之為"one click attack",通??s寫成CSRF或者XSRF,可以讀作"sea surf"。這種對網(wǎng)站的攻擊方式跟上面的跨站腳本(XSS)似乎相像,但攻擊方式不一樣。XSS利用站點內的信任用戶,而XSRF則通過偽裝來自受信任用戶的請求來利用受信任的網(wǎng)站。與XSS攻擊相比,XSRF攻擊往往不大流行(因此對其 進行防范的資源也相當稀少)和難以防范,所以被認為比XSS更具危險性。

讀者要詳細了解XSRF,推薦閱讀:CSRF | XSRF 跨站請求偽造

對于防范XSRF的方法,上面推薦閱讀的文章中有明確的描述。還有一點需要提醒讀者,就是在開發(fā)應用時需要深謀遠慮。任何會產(chǎn)生副作用的HTTP請求,比如點擊購買按鈕、編輯賬戶設置、改變密碼或刪除文檔,都應該使用post()方法。這是良好的RESTful做法。

又一個新名詞:REST。這是一種web服務實現(xiàn)方案。偉大的維基百科中這樣描述:

表徵性狀態(tài)傳輸(英文:Representational State Transfer,簡稱REST)是Roy Fielding博士在2000年他的博士論文中提出來的一種軟件架構風格。目前在三種主流的Web服務實現(xiàn)方案中,因為REST模式與復雜的SOAP和XML-RPC相比更加簡潔,越來越多的web服務開始采用REST風格設計和實現(xiàn)。例如,Amazon.com提供接近REST風格的Web服務進行圖書查找;雅虎提供的Web服務也是REST風格的。

更詳細的內容,讀者可網(wǎng)上搜索來了解。

此外,在tornado中,還提供了XSRF保護的方法。

在application.py文件中,使用xsrf_cookies參數(shù)開啟XSRF保護。

setting = dict(
    template_path = os.path.join(os.path.dirname(__file__), "templates"),
    static_path = os.path.join(os.path.dirname(__file__), "statics"),
    cookie_secret = "bZJc2sWbQLKos6GkHn/VB9oXwQt8S0R0kRvJ5/xJ89E=",
    xsrf_cookies = True,
)

這樣設置之后,Tornado將拒絕請求參數(shù)中不包含正確的_xsrf值的post/put/delete請求。tornado會在后面悄悄地處理_xsrf?cookies,所以,在表單中也要包含XSRF令牌以卻表請求合法。比如index.html的表單,修改如下:

{% extends "base.html" %}

{% block header %}
    <h2>登錄頁面</h2>
    <p>用用戶名為:{{user}}登錄</p> 
{% end %}
{% block body %}
    <form method="POST">
        {% raw xsrf_form_html() %}
        <p><span>UserName:</span><input type="text" id="username"/></p>
        <p><span>Password:</span><input type="password" id="password" /></p>
        <p><input type="BUTTON" value="登錄" id="login" /></p>
    </form>
{% end %}

{% raw xsrf_form_html() %}是新增的,目的就在于實現(xiàn)上面所說的授權給前端以合法請求。

前端向后端發(fā)送的請求是通過ajax(),所以,在ajax請求中,需要一個_xsrf參數(shù)。

以下是script.js的代碼

 function getCookie(name){
    var x = document.cookie.match("\\b" + name + "=([^;]*)\\b");
    return x ? x[1]:undefined;
}

$(document).ready(function(){
    $("#login").click(function(){
        var user = $("#username").val();
        var pwd = $("#password").val();
        var pd = {"username":user, "password":pwd, "_xsrf":getCookie("_xsrf")};
        $.ajax({
            type:"post",
            url:"/",
            data:pd,
            cache:false,
            success:function(data){
                window.location.href = "/user?user="+data;
            },
            error:function(){
                alert("error!");
            },
        });
    });
});

函數(shù)getCookie()的作用是得到cookie值,然后將這個值放到向后端post的數(shù)據(jù)中var pd = {"username":user, "password":pwd, "_xsrf":getCookie("_xsrf")};。運行的結果:

這是tornado提供的XSRF防護方法。是不是這樣做就高枕無憂了呢?沒這么簡單。要做好一個網(wǎng)站,需要考慮的事情還很多。特別推薦閱讀WebAppSec/Secure Coding Guidelines

常常聽到人說做個網(wǎng)站怎么怎么簡單,客戶用這種說辭來壓低價格,老板用這種說辭來縮短工時成本,從上面的簡單敘述中,你覺得網(wǎng)站還是隨便幾個頁面就完事了嗎?除非那個網(wǎng)站不是給人看的,是在那里擺著的。

以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號