小虾虎鱼

小虾虎鱼

在Safari浏览器中iframe中的网页无法创建cookie

作者 禾惠 发表于 2017/09/19 22:05 ,最后修改于 2017/09/19 22:57

昨天遇到在MacOS中Safari浏览器中的iframe引用第三方网站(跨域)无法创建cookie,在Chrome和FireFox中都正常,需要将Safari的偏好设置中的隐私 - Cookie和网站数据 - 始终允许 的选项勾上即可。但这作为浏览器的默认配置(默认为允许来自我访问的网站)我们不可能让用户去改变这个设置,所以此方法不可行。

假如:主站域名为a.com,iframe中的网站为b.com。

通过设置中的“允许来自我访问的网站”的字面意思理解:只有用户访问过的网站才允许创建cookie。iframe中打开的页面也算是用户访问的页面,但经过不断的尝试得出结论iframe中打开的页面浏览器不认为用户访问的网站(这或许是Safari认为的安全吧)。

然后又经过测试发现,只要用户手动打开过一次b.com这个网站,下次在a.com中的iframe打开b.com是可以创建cookie的。

根据上面寻找的问题得出一个结论:在iframe中的网站创建cookie前先让用户打开一次b.com的网站。

于是我就想到了在打开iframe前先通过open方法打开一次b.com,打开后再关闭open打开的窗口再加载iframe中的网站。实现的思路:

第一次打开b.com的时候需要用户手动点击一个按钮进行跳转(之后就不需要了) 在b.com网站添加一个页面jump.html,然后iframe的src设置为http://b.com/jump.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        /// 设置cookie
        function setcookie() {
            /// ...
        }

        /// 获取cookie
        function getcookie() {
            /// ...
        }

        function show() {
            var w = window.open("http://b.com", "", "width=1,height=1");
            setTimeout(function () {
                setcookie("test", 1, 365, "/"); /// 创建cookie
                w.close();
                location.href = "http://b.com";
            }, 500);
        }

        /// 如果不是苹果系统下的Safari浏览器 或者 cookie中存在test值 都直接跳转到b.com
        if (!/mac os.+version\/\d+/i.test(navigator.userAgent) || getcookie("test")) {
            return location.href = "http://b.com";
        }
    </script>
</head>

<body>
    <a href="javascript:;" onclick="show()">点击跳转</a>
</body>

</html>

由于跨域,所以无法监听到打开的新窗口是否加载完毕,所以用了定时器,但使用定时器也会存在问题,因为如果b.com的响应时间超过了500ms此方法就无效了。

另外 第一次打开b.com的时候都需要用户点击跳转按钮;

所以此方法也是不够完美的,慎用!

我欣赏你的好品味~

打开支付宝扫一扫