【前端】使用Flask框架探讨HttpOnly

前言

在学习Web安全中发现一些感觉比较常见又重要的知识，这里就做下笔记。这一片是讲解关于HttpOnly的知识。

测试环境

• Python 3.5.1
• Flask 0.11
• 谷歌浏览器

什么是HttpOnly?

HttpOnly是Cookie的一个属性，让浏览器禁止页面JavaScript访问带有该属性的Cookie。

HttpOnly解决的是XSS后的Cookie劫持攻击。如果Cookie设置了HttpOnly，JavaScript将读取不到Cookie值。

Flask中设置带有HttpOnly的Cookie

下面就使用Python的Flask框架探讨HttpOnly的效果

from flask import Flask, request, make_response, jsonify

app = Flask(__name__)

app.config["SESSION_COOKIE_HTTPONLY"] = True

@app.route("/")
def index():
    response=make_response('OK')
    response.set_cookie('key', 'value', httponly=False) # 设置httponly
    return response

@app.route('/get/')
def get():
    res = {"key": request.cookies.get("key")}
    return jsonify(res)

@app.route('/js/')
def js():
    js_test = """
    <script>
        alert(document.cookie);
    </script>
    """
    return js_test

if __name__ == '__main__':
    app.run()

运行上面的代码后，首先访问http://127.0.0.1:5000/，再进入「Cookie和网站数据」查看一下Cookie的参数。下面以谷歌浏览器为例。

第一步：进入谷歌浏览器的「设置」，找「隐私设置」的「内容设置」；

第二步：找到「内容设置」中的「所有Cookie和网站数据」按钮；

第三步：查看Cookie。

可以看到，我们的代码response.set_cookie('key', 'value', httponly=False)已经成功设置了Cookie，并且下面的「脚本可访问」的选项是：「是」。也就是说访问http://127.0.0.1:5000/js/页面是可以看到相关值的。

下面开始测试httponly的效果。

把有注释「设置httponly」那一行的代码httponly参数改为True。

重启Flask，刷新http://127.0.0.1:5000/，重新进入「所有Cookie和网站数据」页面。可以看到脚本可访问」的选项改变了。

刷新http://127.0.0.1:5000/js/，发现不能看到之前的值了。

最后访问一下http://127.0.0.1:5000/get/，可以正常看到：

{
  "key": "value"
}

这是因为浏览器把Cookie提交上去，由服务器端返回回来的结果。

结语

经过上面的步骤，我们可以知道了设置Cookie的HttpOnly属性可以防止浏览器的JS访问相关Cookie。