【前端】使用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。