Embedded pole not storing cookies

[beowulf11]

Expected behavior: I voted on statements and refresh the website, I should only see statements which I didn't already vote on.

Actual behavior: I can vote again on all statements (with no history on which statements I already voted on).

To Reproduce: I created a public repo and hosted the site it to see bug.

Screenshots: N/A

Device information: N/A

Additional context: We discussed this on Conversa: Polis User Group, and came to the conclusion that the bug is not in our implementation.

[patcon]

Thanks for filing, @beowulf11! Confirmed I could reproduce same issue with dead-simple embed of prod polis convo on localhost and *.xip.io domains. Could submit anon votes, but then when refreshed page, all prior votes were forgotten.

Doesn't seem to affect embeds on pol.is domain, so likely an allow-list issue? re: https://pol.is/embed.html works fine

[metasoarous]

Thanks for raising this issue @beowulf11.

~~Please make sure that the website is properly configured for cookies to be used from the embedded iframe: https://medium.com/trabe/cookies-and-iframes-f7cca58b3b9e~~

~~@patcon Would you please also verify these settings with your embed test? This issue has come up quite a few times, and it would be great if we could point to a fully-functional example, and in general better document this.~~

Thanks folks!

[metasoarous]

Hi folks.

After reviewing this issue more carefully, I'm pretty sure that what is going on here is that over the years all of our browsers have begun to default towards disabling third party cookies. The reason the embed works for https://pol.is/embed.html is that both the container page and the iframe which gets loaded by the embed script are running on the same domain (pol.is), and so the cookies that get set in the iframe aren't considered "third party" by the browser, and are thus allowed. However, when you try to embed on another domain (such as polis-bug.vercel.app, localhost or *.xip.io), it ends up not working. I think you'll find that if you enable third party cookies in the browser, the cookies will work as with our pol.is/embed.html example.

Short term, the only way around this is for sites/apps which embed pol.is to use a unique data-xid attribute per use in the embed code. The embedding site could potentially use regular first-party cookies (or localStorage, which has pretty good support, and is much easier) to store some random identifier (ideally a uuid) per browser, and pass that along to the data-xid in the embed script in order to maintain identity.

Longer term, it's possible that we could modify the embed code to default to this behavior if a data-xid code is not explicitly set on the embed container. Some preliminary experiments suggests that this is at least technically feasible. However, there are some system-wide (as well as security and privacy) implications to consider with this, so don't expect this right away.

Again; For now, we just have to recommend that embeds manually use the data-xid setting if they want separate sessions to remember the user.

Thanks again!

Chris

[patcon]

Thanks Chris! Another option, maybe medium term compared to other two, is to offer a minimal template for a lightweight wrapper app that handles auth on some social services with data-xid management. My experience is that, lacking a template for how this works, more than a few people who were self-described as "interested" just kinda drifted away. (e.g. people who's audience/country didn't popularly use Twitter/Facebook, people who wanted to collect other data, etc)

[patcon]

And thanks for the detailed explanation :)

[metasoarous]

Thanks for suggesting this Pat.

Yes, I think a good example would be very helpful, and will likely get us quite a bit of the way towards the change in default embed script behavior described above. Here's my initial stab at this: https://github.com/compdemocracy/polis-embed-example.

I don't think that basing this example off social login is the right way to go for now, mainly because this will be quite a bit more complicated, and less useful long term given that the app already has social login (obviously, facebook login is broken; but all the more reason, since my attention towards social login related things should just go towards fixing that up in the actual app (basically getting new creds and going through the app certification process)). Of course, if you or someone else wants to put together an example like this for illustrative purposes, we're more than happy for that to happen.

[dvagala]

Thanks @metasoarous for explanation. I confirm it's now working with custom cookie and data-xid attribute :)

[metasoarous]

Great. Thanks for reporting back @dvagala.

I'm going to go ahead and leave this issue open till we fix up the embed script to automate some of this.

Thanks again!

[michrome]

For anyone looking for a quick workaround…

Instead of this:

      <div class="polis" data-conversation_id="YOUR_CONVERSATION_ID_HERE"></div>
      <script async src="https://YOUR_DOMAIN_HERE/embed.js"></script>

Use this:

      <div id="polis" class="polis" data-conversation_id="YOUR_CONVERSATION_ID_HERE"></div>
      <script>
        function uuidv4() {
          return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
            (
              c ^
              (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
            ).toString(16)
          );
        }
        let xid = localStorage.getItem("xid");
        if (!xid) {
          xid = uuidv4();
          localStorage.setItem("xid", xid);
        }
        const polis = document.getElementById("polis");
        polis.dataset.xid = xid;
      </script>
      <script async src="https://YOUR_DOMAIN_HERE/embed.js"></script>

Make sure you replace both YOUR_CONVERSATION_ID_HERE and YOUR_DOMAIN_HERE.