Vaadin 7 embedded on page with CORS/Cross-Site Plugin?

Hi,

I wish to use Vaadin for an intranet application at my company. Ideally I’d like to use the latest version of Vaadin (7). However one thing I must be able to do is embed the Vaadin application (running under Tomcat on port 8080) on another page, running on Apache port 80.

This cannot currently be done due to the same origin policy.

Therefore I wondered if anyone had been able to achieve this with Vaadin 7 using either CORS or a Cross-Site plugin?

I note that the
Vaadin XS Add-on
does not yet support Vaadin 7.
I do have control of both the Apache and Tomcat instances, so I could enable CORS on them.

Any help will be much appreciated.

Thanks,

John

Sorry for the bump, but I wondered if anyone has managed this?

Vaadin XS uses JsonP which is a work around older than CORS which nowadays is supported by most browser vendors.

The easier way I see is to add some code to your customized vaadin servlet:

public class MyAppServlet extends VaadinServlet {

  @Override
  protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    // For security reasons set this regex to an appropriate value
    // example: ".*example\\.com"
    private static final String ALLOWED_DOMAINS_REGEXP = ".*";

    String origin = req.getHeader("Origin");
    if (origin != null && origin.matches(ALLOWED_DOMAINS_REGEXP) {
      resp.addHeader("Access-Control-Allow-Origin", origin);
      if ("options".equalsIgnoreCase(req.getMethod())) {
        resp.setHeader("Allow", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS");
        if (origin != null) {
          String headers = req.getHeader("Access-Control-Request-Headers");
          String method = req.getHeader("Access-Control-Request-Method");
          resp.addHeader("Access-Control-Allow-Methods", method);
          resp.addHeader("Access-Control-Allow-Headers", headers);
          // optional, only needed if you want to allow cookies.
          // but you have to enable the credentials flag in client RequestBuilder
          // resp.addHeader("Access-Control-Allow-Credentials", "true");
          resp.setContentType("text/plain");
        }
      resp.getWriter().flush();
      return;
    }
    super.service(req, resp);
  }
...  

Also you have to set these bootstrap parameters in order to change the RequestBuilder url

"serviceUrl": "http://mydomain:8080",
"browserDetailsUrl": "http://mydomain:8080",

Following the
embedding instructions
in the Book of Vaadin, and working my way around some of the limitations, I got a prototype up and running here:
sami.virtuallypreinstalled.com/remote-charts/

This is a HTML that embeds a Vaadin UI (two times in this case) from another domain (charts.app.fi). Completely working this way, it still has some limitations - more of which I will write later.

Thanks for the replies guys.

Manual - that’s a good example, allows locking down of which domains to allow too!

Sami - looks great, is the code OSS?

Hi,

Published the code along with a blog post:
vaadin.com/blog/-/blogs/using-cors-with-vaadin

The code presented in the blog post is meant for example. You probably want to tune at least the allowed origins.
You can find the code also in GitHub:
https://gist.github.com/samie/9dcf26a6fbc034294e40

Excellent stuff - thanks Sami.

Hi Sami,

thanks for your blog article, unfortunately I’m not able to get it running. I created a demo application
https://github.com/flexguse/vaadin-html-embedding
.

Would you be so kind and have a look what I am doing wrong?

Thank you in advance,
Christoph

Hi Christoph,

See the fix here:
https://vaadin.com/forum#!/thread/13449342

Hi Alejandro,

please have a look at my comment in the linked thread.

Cheers,
Christoph