Cross site embedding cookies do not work reliably in Safari

[Artur-]

If you go to https://artur.app.fi/chat.html you will see a "Cookies disabled" message.
If you open https://labs.vaadin.com and then go back to https://artur.app.fi/chat.html, it suddenly works.

Seems that cookies cannot be used relibaly in cross site embedding for Safari.

[denis-anisimov]

If you go to https://artur.app.fi/chat.html

I'm getting 404.

Could you please describe the functionality which doesn't work as expected ?
I cannot get anything from the description based on URLs.

[mehdi-vaadin]

The chat app is up now. No 404 at the moment and the issue can be reproduced in Safari as explained.

[denis-anisimov]

Steps to reproduce locally:

• Use local Flow tests sources.
• Go to test-embedding/embedding-test-assets and find WebComponentVaadinServlet.
• Put the following code into it :

    @Override
    protected void service(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        response.setHeader("Access-Control-Allow-Origin",
                "http://127.0.0.1:8888");
        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        super.service(request, response);
    }

• find AbstractPlainServlet and add a prefix to all src attributes http://localhost:8888 (that requests all embedding resources from the dedicated localhost domain regardless of the URL/domain of the original page)
• build test-embedding/embedding-test-assets
• go to test-embedding/test-embedding-generic
• create src/main/webapp/WEB-INF/web.xml file
• put the following content to it :

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
         http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
         
<filter>
    <filter-name>cross-origin</filter-name>
    <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
    <init-param>
        <param-name>allowedOrigins</param-name>
        <param-value>*</param-value>
    </init-param>
    <init-param>
        <param-name>allowedMethods</param-name>
        <param-value>GET,POST,HEAD</param-value>
    </init-param>
    <init-param>
        <param-name>allowedHeaders</param-name>
        <param-value>X-Requested-With,Content-Type,Accept,Origin</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>cross-origin</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

</web-app>

• open pom.xml in the module and add a dependency

       <dependency>
            <groupId>org.eclipse.jetty</groupId>
            <artifactId>jetty-servlets</artifactId>
            <version>9.4.27.v20200227</version>
        </dependency>

• Now you can build and run test-embedding/test-embedding-generic project: run mvn jetty:run.
• open browser using this URL : http://127.0.0.1:8888 .

I had some issues with that even on Chrome because of SameSite. But it's possible to switch it off: https://www.chromium.org/updates/same-site/test-debug.
Though I reverted this change now back and it works without issues.

Safari shows the error page:

Web Component
Cookies disabled
This application requires cookies to function.
Please enable cookies in your browser and click here or press ESC to try again.

If you open ("the same page") using the original domain localhost http://localhost:8888 then it works without problems.

Some preliminary investigation has shown that the cookie JSESSIONID is set by the web-component-bootstrap.js page (from the server).
But it's apparently is ignored by the browser.

[denis-anisimov]

Apparently, it's not possible to fix this without changes in the way how session id is stored/transferred in Vaadin web app.

I've been trying to apply this workaround for Safari : https://www.milestre.nl/blog/blogitem/milestre-blog/2019/11/18/safari-using-cookies-in-an-iframe
What it does is:

• redirects to the embedding site to be able to accept (and store) cookie from it directly
• immediately after that it redirects back to the main site which should uses cookies from the embedded page.

This workaround doesn't help: If I remove all cookies and visit the main page in the first time: the same error message is shown.
Then behavior differs from time to time:
-sometimes refresh page helps and everything is shown fine

• sometimes nothing happens: the error page is still shown instead of the expected content.

I've been trying also to call reload after the returning back (from the embedded page) but it also didn't help.
The mentioned workaround can be found in the comments here as well: https://gist.github.com/iansltx/18caf551baaa60b79206
But what's more important : https://gist.github.com/iansltx/18caf551baaa60b79206#gistcomment-3234183
The workaround won't work in Safari 13.1 (though it doesn't work for me even in older version).

There is a recent comment about it :https://gist.github.com/iansltx/18caf551baaa60b79206#gistcomment-3251085.

[denis-anisimov]

document.requestStorageAccess doesn't help me to fix the cookie issue as well.

So I think the fix should be based on something like this: vaadin/framework#814

I will make a ticket for Flow.

[denis-anisimov]

My current suggestion is to fix this issue: #8039
I don't see any other way at the moment how to deal with Safari in embedding case.

[denis-anisimov]

So as decided : this is a limitation in current implementation.
You may not use embedded applications from different domains ( external ) unfortunaltely.
To be able to do this we have to fix this : #8039.
It should provide a way to configure embedded app to avoid using cookies and this issue will be fixed automatically.