Cookies and IFrames Don't Mix

Javascript

I’m not a fan of IFrames. Let’s just get that out on the table to start with. Every time I use one, it’s against my will and I always feel like it’s a kludge. There - I said it.

Why am I upset with IFrames today? I was trying to set some cookies in a IFrame, where the IFrame was loaded from a different domain from the main page, and the cookies refused to set. I was using the jQuery Cookie plugin, and my code looked like this:

1
2
$.cookie('myCookie', 'Chocolate Chip');
alert($.cookie('myCookie');

And this is what I saw:

I was expecting to have ‘Chocolate Chip’ be shown in the alert. No such luck - my cookie was eaten by the browser.

What’s going on?

This is the Platform for Privacy Preferences (P3P) at work. In short, it was an attempt to help improve privacy on the web by requiring websites to encode their Privacy Policy via a special HTTP header. Here is how the P3P site describes it:

The Platform for Privacy Preferences Project (P3P) enables Websites to express their privacy practices in a standard format that can be retrieved automatically and interpreted easily by user agents.
I was using Internet Explorer, and IE looked for the P3P header. It failed to find the P3P header, so IE killed the cookies in the IFrame (cookies in the main page worked just fine without a P3P header).

To enable cookies again, you have to get your web server to send a P3P header with the responses that it sends. Here is how you can do it with IIS

1
2
3
4
5
6
7
<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="p3p" value="CP=&quot;policy string goes here&quot;"/>
    </customHeaders>
  </httpProtocol>
</system.webServer>

Note that the quotation marks inside the p3p value are URL encoded

I went into IIS and added this to our web.config file (for the site serving the IFrame) and the cookies in the IFrame started working.

What’s your P3P?

So does it matter what’s in your P3P header? From a technical perspective, you definitely need the CP= at the beginning, but you can put a random string after that, and IE will allow the cookies. That’s how to get it to work - but what should you do?

Ideally, you would generate a proper P3P string. But P3P is an outdated standard - the W3C suspended work on P3P several years ago, and many browsers don’t support it. Even the instructions provided by the W3C are over a decade old and many of the links therein are broken.

Nonetheless, I would recommend not putting specific policy statements into a P3P Compact Policy (in the P3P header) unless you have and adhere to the Privacy Practices specified by the statement. For example, if you have NID in your P3P policy, which is shorthand for NON-IDENTIFIABLE, then you are making a statement that you do not collect personally identifiable information. If you are, however, collecting personally identifiable information, someone may have grounds for a lawsuit against you.

One option to consider is linking to your site’s privacy policy in the P3P header. Here is Facebook’s P3P header:

1
CP="Facebook does not have a P3P policy. Learn why here: http://fb.me/p3p"

But it would be good to check with your legal counsel to determine the best way to define your P3P Policy.

References

P3P - W3C, Wikipedia
Stack Overflow - Cookies Blocked in IFrame for IE
Stack Overflow - Configuring P3P in Azure