是否有任何解决方法可以在iframe中为Safari设置第三方cookie？ [英] Is there any workaround to set third party cookie in Iframe for safari?

问题描述

我需要从我的应用程序导航到第三方站点（SSO），这适用于chrome，IE9和Firefox，但不适用于Safari。有一个解决方法是在页面上隐藏iframe来设置cookie然后导航到实际的iframe，但这个技巧现在不再有用了。我还尝试打开一个新窗口，其中action为第三方URL，用于在浏览器中设置cookie，然后在iframe中打开它，但这样做的缺点是打开的小窗口看起来像是一些黑客。是否有任何解决方法在iframe中为safari浏览器设置cookie？

I am having requirement to navigate to third party site (SSO) from my application, this works well in chrome, IE9 and Firefox but not in safari. There was a workaround to have hidden iframe on page to set the cookie and then navigate to actual iframe, but this trick no longer works now. I also tried to open a new window with action as the third party URL to set cookie in the browser and then open the same in the iframe, but this has a disadvantage of that small window that is opened which looks like some hack. Is there any workaround to set the cookie in iframe for safari browser ??

推荐答案

跟踪Cookie简介

跟踪cookie是在线广告生态系统中非常重要的一部分。他们有大量的使用场景。以下是一个名为重定向的例子。

"Tracking cookies" is a very important part of online advertising ecosystem. They tons of usage scenarios. Here's one example called retargeting.

众所周知，很多网络购物者在电子商务网站上看到了很好的交易之后才进行购买。他们首先选择一个好的，离开网站并在几小时或几天内返回以进行实际订购。

It's known that a lot of internet shoppers doesn't make purchase right after they saw a good deal on e-commerce website. They first choose a good, leave website and return in couple of hours or days to make an actual order.

为刺激这些用户，网站利用所谓的重定向技术。基本上，他们想要记住在没有下订单的情况下离开他们网站并在其他网站上向他们展示相关广告的用户。通常，电子商务网站将此类作品委托给在线广告平台，如AdExchanges，DSP等。

To stimulate those users, websites utilize so-called retargeting technology. Basically, they want to remember users who left their website without making an order and show them a relevant advertisement on other websites. Typically e-commerce websites delegates such work to online advertisement platforms, like AdExchanges, DSPs and so on.

从技术角度来看，它的工作原理如下：

From, technical point of view it works as follows:

• 网站所有者提供一小段HTML代码。这段代码称为跟踪像素。让我们考虑跟踪像素是透明GIF图像的简单情况：

• Website owner puts a small piece of HTML code. The piece of code is called "tracking pixel". Let's consider a simple case when the tracking pixel is a transparent GIF image:

... < img src =http：// pixel .sample-ad-exchange.com / pixel.gif> ..

http： //pixel.sample-ad-exchange.com/pixel.gif 为域名'.sample-ad-exchange.com'删除名称为user_id的cookie。在此cookie中存储生成的唯一用户ID（如果cookie已存在，服务器只是跳过此部分）

http://pixel.sample-ad-exchange.com/pixel.gif drops a cookie for domain '.sample-ad-exchange.com' with name user_id. In this cookie a generated unique user id is stored (If the cookie already exists, server just skips this part)

sample-ad-exchange.com内部记住具有此ID的用户访问了电子商务网站

sample-ad-exchange.com remembers internally that user with this id visited e-commerce site

当请求sample-ad-exchange.com在其他地方展示广告时（通过调用tag.sample）例如-ad-exchange.com/show_ad.js）它接收user_id cookie以及http请求

When sample-ad-exchange.com is requested to show an ad somewhere else (by calling tag.sample-ad-exchange.com/show_ad.js for example) it receives user_id cookie along with http request

sample-ad-exchange.com在内部检查是否用户之前访问过任何电子商务网站。如果有，可以向他展示一个非常相关的广告

sample-ad-exchange.com checks internally if this user visited any e -commerce sites before. If he has, it could show a very relevant ad to him

问题

正如您所看到的，丢弃cookie的能力是重定向方案的可行部分。这种cookie被称为第三方cookie，因为像素代码位于广告商域（例如my-cool-store.com），而像素本身位于第三方广告交换域（.sample-ad-exchange） .COM）。默认情况下，不同的浏览器对第三方Cookie有不同的政策。

As you can see, ability to drop cookie is the viable part of retargeting scheme. This kind of cookies is called "3rd party cookies" because pixel code is sitting on advertiser domain (e.g. my-cool-store.com), and pixel itself is located on 3rd-party ad-exchange domain (.sample-ad-exchange.com). By default, different browsers have different policy about 3rd party cookies.

Chrome之前的Chrome，Firefox，IE - 始终接受第三方Cookie

Chrome, Firefox, IE before 8.0 - always accept 3rd party cookies

IE 8.0及以上版本 - 仅当网站明确声明如何使用cookie时才接受第三方cookie。声明通过P3P协议完成。正如W3C的每一个规格一样，这个也非常神秘。但实质上是名为P3P的HTTP标头，您需要与包含cookie的http响应一起发送。这个标题内容工作得很好，虽然我不知道究竟是什么声明：'P3P：CP =NOI DSP COR NID CURA ADMa DEVa PSAa PSDa我们的公共汽车COM INT OTC PUR STA'

IE 8.0 and above - accept 3rd-party cookie only if website explicitly declared how it will use the cookies. The declaration is done via P3P protocol. As every spec from W3C, this one is also very cryptic. But the essence is the HTTP header called "P3P" that you need to send along with http response containing cookie. This header content works fine though I have no idea what's exactly it's declaring: 'P3P: CP="NOI DSP COR NID CURa ADMa DEVa PSAa PSDa OUR BUS COM INT OTC PUR STA"'

Safari - 从不接受第三方cookie

Safari - never accepts 3rd party cookies

在iPad出现之前，Safari对于行业来说并不是一个大问题，并且获得了巨大的普及。研究表明，iPad用户倾向于在线购物甚至超过平常的PC用户。

Safari wasn't a huge problem for industry before iPad appeared and gained huge popularity. Studies shows that iPad users tend to shop online even more than usual PC guys.

Trick 1.0（不再工作）

事实上，Safari有时不拒绝第三方cookie。它发生的比用户做了一些与第三方域相关的动作。 Google Analytics（以及其他平台）也利用了此功能：他们在其中插入了iframe和模拟形式的sumbit。我不会在这里停止技术细节。首先，这个黑客花费2250万美元，第二个技巧在最新版本的Safari中不再有效

In fact Safari sometimes doesn't reject 3rdparty cookies. It happens than user did some action related to 3rdparty domain. Google Analytics (and other platforms too) took advantage of this feature: they inserted an iframe and simulated form sumbit inside it. I won't stop on technical details here. First, this hack cost google $22.5 millions and second the trick isn't working anymore in last versions of Safari

技巧2.0（HTML5 localStorage）

这个技巧的想法是使用HTML5 localStorage API。此API与cookie非常相似 - 它允许从javascript管理用户的首选项并将其本地存储在用户的盒子中。为什么不在localStorage中存储用户ID？我提出的第一个代码版本：

The idea of this trick is use HTML5 localStorage API. This API is very similar to cookies - it allows managing user’s preferences from javascript and storing it locally on user's box. Why not store user id in localStorage? The first version of code I came up with:

  <script type="text/javascript">
if (typeof navigator != "undefined" && typeof navigator.vendor != "undefined" &&                               navigator.vendor.indexOf("Apple") >= 0 && typeof localStorage != "undefined") {
    //Check if browser is made by Apple (means it's Safari) and local storage is available
    var userId = localStorage.getItem("user_id");
    if (userId == null) {
        //set user is if user is unknown
        userId = Math.random();
        localStorage.setItem("user_id", userId);
    }
    var img = document.createElement('img');
    img.src = "http://pixel.sample-ad-exchange.com/pixel.gif?user_id=" + user_id;
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(img);
}

想法非常简单：在本地存储中查找user_id键（如果不存在则创建一个）并将user_id作为GET参数传递给像素服务器。然后服务器将记录此ID而不是激活cookie。

The idea is pretty straightforward: look for user_id key in local storage (create one if it doesn't exist) and pass user_id to pixel server as GET parameter. Then server will record this id instead firing the cookie.

但是这段代码运行不正常。每个域都有自己的本地存储。如果您在my-cool-store.com上触发跟踪像素，则user_id将存储在my-cool-store.com本地存储中。如果同一个用户稍后会使用跟踪代码访问other-domain.com，则会将其视为新的。

But this code isn't working well. Each domain has it's own local storage. And if you tracking pixel was fired at my-cool-store.com user_id will be stored in my-cool-store.com local storage. If the same user would visit other-domain.com with tracking code later on it will be treated as new one.

使用iframe修复旧的好技巧将起作用。我们将在pixel.sample-ad-exchange.com内的某处插入iframe标签，而不是img标签。并将用户检测代码放在iframe中。当iframe在insidepixel.sample-ad-exchange.com中执行时，所有被跟踪站点的本地存储将是相同的。以下是一个完整的示例：

To fix that old good trick with iframe will work. Instead of img tag we will insert iframe tag with source somewhere inside pixel.sample-ad-exchange.com. And place user detection code inside iframe. As iframe is executed "inside" pixel.sample-ad-exchange.com local storage will be the same for all tracked sites. Here's a complete example:

跟踪代码：

<script type="text/javascript">
if (typeof navigator != "undefined" && typeof navigator.vendor != "undefined" &&       `navigator.vendor.indexOf("Apple") >= 0 && typeof localStorage != "undefined") {`
    var iframe = document.createElement('iframe');
    img.src = "http://pixel.sample-ad-exchange.com/iframe.html";
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(img);
}
</script>

iframe代码（ http：//pixel.sample-ad-exchange。 com / iframe.html ）

Iframe code (http://pixel.sample-ad-exchange.com/iframe.html)

<html>
<head></head>
  <body>
  <script type="text/javascript">
var userId = localStorage.getItem("user_id");
if (userId == null) {
    //set user is if user is unknown
    userId = Math.random();
    localStorage.setItem("user_id", userId);
}
var img = document.createElement('img');
img.src = "http://pixel.sample-ad-exchange.com/pixel.gif?user_id=" + user_id;
var body = document.getElementsByTagName('body')[0];
body.appendChild(img);
</script>
</body>
</html>

法律问题

有趣的问题是如果这种方法合法。如果下一家公司使用它将获得2250万美元罚款。我不是律师，但从我的常识角度来看，Safari设置明确表示阻止来自第三方和广告商的第三方cookie，而localStorage不是cookie，上述方法似乎是合法的。

The interesting question is if this method is legal. Znd if next company using it will get $22.5 million fine. I'm not a lawyer, but from my common sense perspective as Safari settings explicitly says "Block thirdparty cookies from third parties and advertisers" and localStorage isn't a "cookie" the approach above seems legit.

这篇关于是否有任何解决方法可以在iframe中为Safari设置第三方cookie？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！