Embedder error on iPhone browsers

Thanks for the report. For reference, can you let me know:

Do you have the "Prevent Cross-Site Tracking" setting in Settings.app > Safari enabled?
Are you placing the Embedder inside an iframe?

Prevent Cross-Site Tracking was enabled by default. I tried disabling it, clearing the data, and closing safari then trying it again. The result was the same.

No, I am not using an iframe. Below is my relevant code:

<html>
<head runat="server">
    <script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="myKey"></script>
</head>
<body>
    <form runat="server">
        <div class="row-container">
            <a id="theFrame" class="row" style="height: 100%"></a>
        </div>
    </form>
</body>
</html>
<script type="text/javascript">
    let urlParams = new URLSearchParams(window.location.search);

    if (urlParams.has('Link')) {
        let element = document.getElementById('theFrame');

        Dropbox.embed({
            link: link
        }, element);
    }
</script>

Thanks for the additional information. I just tried reproducing this with that code, and it only reproduces for me with "Prevent Cross-Site Tracking" enabled (and works fine with it disabled).

Please try this sample I just put up with this code (though I had to add a missing "link" definition): https://zealous-beaver-5f8cdb.netlify.app/?Link=https://www.dropbox.com/s/u0bdwmkjmqld9l2/dbx-supporting-distributed-work.gif?dl=0

Let me know if you see the same behavior with that, where it fails both with and without "Prevent Cross-Site Tracking" enabled.

Thanks for the reply. I disabled "Prevent Cross=Site Tracking" and can confirm that it works in Safari. However, it does not work in the Chrome app, even with Prevent Corss-Site Tracking disabled.

It seems like there should be a better solution than having to tell every user that they need to change their settings and only use Safari?

Yes, ideally we'll be able to resolve this on our side, but we just want to make sure we're reproducing exactly the issue you're reporting.

So, to be clear, if I understand your messages correctly, the issue does not appear on my sample site for you when you have "Prevent Cross-Site Tracking" disabled, but does still appear on your site for you even with "Prevent Cross-Site Tracking" disabled. Is that correct? If so, can you share a sample page that reproduces the issue even with "Prevent Cross-Site Tracking" disabled?

(Also, interestingly, the issue does not reproduce for me in Chrome on iOS, with or without "Prevent Cross-Site Tracking" disabled.)

Thanks, I am glad to hear that. I don't think we're on the same page, so let me clarify.

Safari: works with PCST disabled, but not when it is enabled.

Chrome: does not work either way.

This is true for both your site and my internal website.

Got it, thanks! This is open with engineering for the case where "Prevent cross-site tracking" affects this. I'll follow up here once I have an update on that.

I still can't reproduce the behavior you're seeing in Chrome though. Can you let me know what version of iOS and Chrome you're seeing that with?

Last week I was using a friend's device, so I'm not sure what versions he had. I just tried it on a different iPhone, and it does not work on that device with Chrome or Safari. This iPhone is using iOS 14.2 and Chrome version 87.0.4280.77

Thanks! I was on an older version where it does work in Chrome, for whatever reason. I'll ask the team to look into that variant as well.

Any update on this? We have begun using the Embedder with the following code (keys/link changed) and it gives the cookies message on both iPhone and iPad, but cookies are already enabled, so those users never get to the Dropbox content:

@thesongcompany I don't have an update on this yet. I'll follow up here once I do.

Antony P.3

Thanks! It's annoying, as there's no obvious workaround.

We've updated the Embedder implementation to better handle these cases and improve the error reporting when needed. Unfortunately, due to some of the new cross-site behaviors in some modern browsers we can't always display the content directly (depending on the user's browsers settings and behaviors), but the Embedder should now work more reliably when dealing with these restrictions, including showing some error messaging and a link to the content when it can't be displayed directly. Please give it a try and let us know if you're still seeing anything not working as expected. Thanks!

Hi there,

We still have the same issue. On an iPhone we get this message, even though cookies are enabled.

@thesongcompany Are you putting the Embedder inside an iframe in this case, and do you have "Prevent Cross-Site Tracking" enabled?

No, we're using the js embed.

@thesongcompany To clarify, I'm not referring to which method of using the Embedder (anchor or JavaScript) you're using, but rather if you're putting the Embedder inside an iframe on your page. (That could be done via either method.)

Also, please let me know if you have "Prevent Cross-Site Tracking" enabled. Thanks!

Hi Greg,

This is the only code I can find on the page which refers to cross-site tracking. We are using the GoodBarber platform to create a PWA and this page as we build it is (from our perspective) a pure (and very simple) HTML page with the DB embed, but clearly the platform injects all kinds of codes.

define(["require", "exports", "tslib", "react", "modules/clean/react/css", "dropbox/proto/js_init_data/dropins/embeds", "modules/clean/react/dropins_v3/embeds/error/callback_error", "modules/clean/react/dropins_v3/embeds/error/generic_error", "modules/clean/react/dropins_v3/embeds/error/password_error", "modules/clean/react/dropins_v3/embeds/error/login", "modules/core/i18n", "modules/clean/react/dropins_v3/embeds/tti", "modules/clean/react/dropins_v3/embeds/error/storage_access"], (function(e, r, t, s, a, o, n, c, d, i, l, u, m) {
"use strict";
Object.defineProperty(r, "__esModule", {
value: !0
}),
r.EmbedError = void 0,
s = t.__importDefault(s);
r.EmbedError = a.requireCssWithComponent((function(e) {
var r = s.default.useState(!1)
, t = r[0]
, a = r[1]
, f = s.default.useState(m.getStorageAccessState())
, g = f[0]
, b = f[1];
if (g === m.StorageAccessState.NoAccessCanRequest)
return s.default.createElement(n.CallbackErrorComponent, {
callback: m.attemptStorageAccessThenReload(b),
messageText: l.intl.formatMessage({
id: "dQ+g2n",
defaultMessage: "Cookies are required to view this Dropbox content."
}),
ctaText: l.intl.formatMessage({
id: "WqYWha",
defaultMessage: "Allow cookies"
})
});
if (g === m.StorageAccessState.NoAccess)
return s.default.createElement(c.GenericErrorComponent, {
errorText: l.intl.formatMessage({
id: "CwuFw8",
defaultMessage: "Cookies are required to view this Dropbox content. You may need to enable them in your browser."
})
});
if (g === m.StorageAccessState.AccessDenied)
return s.default.createElement(c.GenericErrorComponent, {
errorText: l.intl.formatMessage({
id: "BHiVSS",
defaultMessage: "Can’t show content because of your privacy settings around cross-site tracking."
}),
link: e.link
});
switch (e.error) {
case o.embeds.LinkError.NONE:
return s.default.createElement(s.default.Fragment, null, s.default.Children.only(e.children));
case o.embeds.LinkError.LOGIN:
return u.markTTIIfNeeded(t, a),
s.default.createElement(n.CallbackErrorComponent, {
callback: i.loginWithPopup,
messageText: l.intl.formatMessage({
id: "4zpQ9B",
defaultMessage: "Can’t show content because you’re not signed in to Dropbox."
}),
ctaText: l.intl.formatMessage({
id: "Hjykd1",
defaultMessage: "Sign In"
})
});
case o.embeds.LinkError.NO_ACCESS:
return u.markTTIIfNeeded(t, a),
s.default.createElement(c.GenericErrorComponent, {
errorText: l.intl.formatMessage({
id: "xOodvS",
defaultMessage: "Can’t show content because the owner hasn’t granted you access."
}),
link: e.link
});
case o.embeds.LinkError.EXPIRED:
return u.markTTIIfNeeded(t, a),
s.default.createElement(c.GenericErrorComponent, {
errorText: l.intl.formatMessage({
id: "ucqLru",
defaultMessage: "Can’t show content because the link has expired."
})
});
case o.embeds.LinkError.PASSWORD:
return u.markTTIIfNeeded(t, a),
s.default.createElement(d.PasswordError, {
link: e.link
});
case o.embeds.LinkError.TAKEDOWN:
return u.markTTIIfNeeded(t, a),
s.default.createElement(c.GenericErrorComponent, {
errorText: l.intl.formatMessage({
id: "VPeXVB",
defaultMessage: "Can’t show content because it has been taken down."
})
});
case o.embeds.LinkError.INVALID_LINK:
default:
return u.markTTIIfNeeded(t, a),
s.default.createElement(c.GenericErrorComponent, {
errorText: l.intl.formatMessage({
id: "5r7/Jv",
defaultMessage: "Can’t show content because something went wrong."
})
})
}
}
), ["/static/css/dropins_v3/embeds/index-vflvkFyFQ.css", "/static/css/dig-components/index.web-vflGJghcb.css", "/static/css/spectrum/index.web-vflmHVRF-.css"])
}
));
//# sourceMappingURL=embed_error.min.js-vfljKn5wQ.map

Hope that sheds some light on how to fix it.