Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Not able to create cookies when Vaadin app loaded into Iframe in other webs by Martin Vyšný, 1 month ago
Recent Posts
Vaadin Forum4. Other

Vaadin cross-origin frame issue

App Keto
6 years ago Jun 18, 2015 7:11am

Hi

How do you solve the issue with cross-origin frame issue in Vaadin. I am trying to use BrowserFrame and I think this creates an iframe and does not allow to access the site. It says:

Blocked a frame with origin " " from accessing a cross-origin frame.

Is there any workaround for this?
 

Tapio Aali
6 years ago Jun 20, 2015 6:52pm

Same-origin policy is a security constraint of browsers. Without it there could be huge security problems. There isn't a direct workaround, the actual implementation depends on what you are actually trying to archieve. 

For more info, I recommend, for example, checking out either this, this or this StrackOverFlow thread.

App Keto
6 years ago Jun 21, 2015 5:57am

Hi Tapio,

Thanks for your response. I am trying to use Vaadin's BrowserFrame and display the content of the external site. However, I cannot do so, because of this "same-origin policy." 

Can we embed applications made in AngularJS, JS and others inside Vaadin application?  I don't think it is so trivial with the framework. 

Tapio Aali
6 years ago Jun 21, 2015 11:57pm

Well, you can embed anything inside a Vaadin app using an iFrame if you follow the security rules. But naturally you'll get problems if you want to communicate with the 'others'. And that depends on the case.

Do you have some kind of example, or even a project, that you could post here? It differs a lot from case-to-case how the embedding should actually be done.

App Keto
6 years ago Jun 22, 2015 6:49am

I am using new Vaadin Designer and trying to communicate with this 'other' site.

Here is the code of mydesign.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" name="design-properties" content="{&quot;RULERS_VISIBLE&quot;:true,&quot;GUIDELINES_VISIBLE&quot;:true,&quot;SNAP_TO_OBJECTS&quot;:true,&quot;SNAP_TO_GRID&quot;:true,&quot;SNAPPING_DISTANCE&quot;:10,&quot;PAPER_WIDTH&quot;:768,&quot;PAPER_HEIGHT&quot;:1015,&quot;PAPER_SCROLL_LEFT&quot;:2190,&quot;PAPER_SCROLL_TOP&quot;:1750,&quot;JAVA_SOURCES_ROOT&quot;:&quot;src&quot;,&quot;THEME&quot;:&quot;sampledatasetproject&quot;}">
 </head>
 <body>
  <v-css-layout size-full="true">
   <v-menu-bar responsive="true" width-full="true" plain-text=""></v-menu-bar>
   <v-horizontal-split-panel height="987px" split-position="19.791666%">
    <v-css-layout size-full="true">
     <v-button style-name="link" plain-text="" _id="ds123456">
       ds123456
     </v-button>
     <v-button style-name="link" plain-text="" _id="dss12345">
       dss12345
     </v-button>
     <v-button style-name="link" plain-text="" _id="testButton">
       test button
     </v-button>
    </v-css-layout>
    <v-panel size-full="true">
    <v-browser-frame source="https://dev.example.local/wwwwwcgi/wwwwwgui?html=/usr/lib/example/www/templates/custom_reports/fpf_database.wwwwwwgui&amp;gpdatabase=exampledemo&amp;gpreportfile=fpf_database.wwwwwwgui&amp;gppersonid=&amp;gpdbname=&amp;gpbcard=mother" width-full="true" height="98.99%"></v-browser-frame>  
    </v-panel>
   </v-horizontal-split-panel>
  </v-css-layout>  
 </body>
</html>

Here is the code for MyDesign.java

/**
 * !! DO NOT EDIT THIS FILE !!
 *
 * This class is generated by Vaadin Designer and will be overwritten.
 *
 * Please make a subclass with logic and additional interfaces as needed,
 * e.g class LoginView extends LoginDesign implements View { … }
 */
@DesignRoot
@AutoGenerated
@SuppressWarnings("serial")
public class MyDesign extends CssLayout {
    protected Button ds123456;
    protected Button dss12345;
    protected Button testButton;
    public MyDesign() {
        Design.read(this);
    }
}