资讯专栏INFORMATION COLUMN

项目填坑记-cookie

Lyux / 2183人阅读

摘要:好啦,再次大功告成。由万维网协会研制,它为用户提供了对自己公开信息的更多的控制。支持的站点可以为浏览者声明他们的隐私策略。果然在浏览器中打开设置隐私阻止永不,打开上述设置之后,跨域种瞬间成功。

前段时间开发了一个用户登录的模块,需求很简单,用户输入手机号和验证码,我们就会返回给用户一套身份信息并保存在cookie里面。so easy,于是就有以下代码:

// 大致意思如下,并非真实模块中的代码
document.cookie = "token=xxxxxxxx;domain=xxx.com;path=/;expires=xxxx";

大功告成!但是,问题也来了,这样做并不安全,用户的信息可以轻易的通过JS获取,XSSCSRF变的轻而易举。于是,我们将种cookie的操作交给了服务端,并给其中一个cookie加上了httponly属性,这个属性仅仅保证我们的cookie不能通过document.cookie来获取,减小了用户cookie被窃取的概率。

Set-Cookie:token1=xxxxx; expires=GMT Date; Max-Age=xxx; path=/; domain=xxx.com
Set-Cookie:token2=xxxxx; expires=GMT Date; Max-Age=xxx; path=/; domain=xxx.com; httponly

好啦,再次大功告成。但是,过了一段时间,我们的网站多啦,同时存在了几个域名,我们需要在用户登录的时,同时给多个域种cookie。OK,很简单,我们只需要调用多个域名下的种cookie的接口,不就行啦?

事情没有这么简单,经过测试之后发现我们的cookie在某些特定的浏览器下有可能跨域种cookie失败。为什么呢?经过一番google之后,发现其实是一些浏览器对于跨域种cookie做了一些限制,我们需要用一些方法来解决限制。

P3P由万维网协会研制,它为Web用户提供了对自己公开信息的更多的控制。支持P3P的Web站点可以为浏览者声明他们的隐私策略。

其实上面都是废话,大概意思就是说你要在你的http header里面加入一个P3P协议的说明,详细信息可以看这个歪果仁写的文章"P3P, Cookies and IE6.0: A Case Study"

P3P:CP="NOI ADM DEV PSAi COM NAV OUR OTRo STP IND DEM"

很开心,再次大功告成。BUT,现实总是这么残酷,safari上仍然不能跨域种cookie。这又是为什么呢?根据苹果爸爸的尿性来推测,肯定又是他做了什么安全性的限制。果然!在safari浏览器中打开设置 > 隐私 > 阻止cookie > 永不,打开上述设置之后,跨域种cookie瞬间成功。但是,我们总不能要求用户一个个去打开这个设置吧?所以还要另寻解决办法。

后来我们发现其实对于safari来说所谓的第三方需要满足两个条件:

用户从来没有主动访问该域名

该域名并没有作为第一方种过cookie

基于以上两点我们做了2个操作:

通过http 302的方式来跨域种cookie

在用户访问我们的域名之后,默认在访问域名下种下一个记录性的cookie,减小我们的域名种Cookie失败的概率

好啦,这次真的大功告成啦,写一篇流水账记录一下这个坑。

博客地址:ssh.today,欢迎关注

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82078.html

相关文章

  • 坑记:Uncaught RangeError: Maximum call stack size e

    摘要:今天遇到了一个错误,翻译一下就是堆栈溢出,很好奇就是一个简单请求怎么会报这个错误,研究了一下,发现犯了一个很低级的错误,的参数错误了是未定义的变量,值为空,然后导致了这个问题,但是为什么,暂时还没有搞明白,如果哪位对源代码比较熟悉,知道是怎 今天遇到了一个错误, showImg(https://segmentfault.com/img/bVHYYa?w=1424&h=233);翻译一下...

    import. 评论0 收藏0
  • 支付开发坑记之微信支付

    摘要:前者集成在中,后者主要是为微信用户提供了另一种支付方式需要在微信的内置浏览器中打开页面,再调起微信支付。步骤商户后台收到用户支付单,调用微信支付统一下单接口。拿到所有参数后,就可以在页面中发起微信支付的请求了。 微信支付,支持的支付方式比较多:有扫码支付,刷卡支付,APP支付和公众号支付。其中,APP和网站上最常用的就是APP支付和公众号支付。前者集成在APP中,后者主要是为微信用户提...

    zhunjiee 评论0 收藏0
  • 支付开发坑记之支付宝

    摘要:原文地址支付支付步骤为获取支付宝的配置信息。将得到的数据请求支付宝客户端进行支付。端将拼接好的字符串拿去请求支付宝客户端即可调起支付宝进行支付。向支付宝申请新订单,获取支付。成功请求回来后,就可以向支付宝发出一次支付请求。 支付宝在所有支付方式中最好开发的了,因为文档比较清晰,而且开发起来也比较简单。因此,支付宝的坑是相对较少的。原文地址 APP支付 APP支付步骤为: 获取支付宝的...

    chanjarster 评论0 收藏0
  • React和React-native踩坑记

    摘要:坑请求跨域问题使用时,其中的已经默默帮你做了很多事,都帮你配置好了所以你发现你找不到相关的配置文件。放到服务器上仍然是空白的无法访问。原来是因为路径问题,简单配置一下即可。上文提到过已经帮我们做好了很多事,方便在此,麻烦也在此。 react坑: 1、fetch请求cookie跨域问题使用creat-react-app时,其中的react-script已经默默帮你做了很多事,都帮你配置好...

    yck 评论0 收藏0

发表评论

0条评论

Lyux

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<