Documentation versions (currently viewingVaadin 14)

You are viewing documentation for an older Vaadin version. View latest documentation

Securing Embedded Applications

You can prevent the host (embedding) application accessing the embedded application using the properties of the embedded application.

Keep in mind that the embedded application is instantiated, regardless of of whether access is restricted or not. The reason is that property values are only checked when the server-side listener detects an update on the client side. Always avoid including sensitive data in the embedded web component’s constructor.

Example: Setting a property from the host (embedding) page and checking it inside an embedded application.

<!doctype html>

  <link rel="import" href="web-component/my-comp.js">
  <script type="text/javascript">
        function login(){
            // request token for the current user
            // somehow
            var token =
            var comp = document.querySelector(
            comp.token = token;

    Web components implemented using server side Java

  <button onclick="login()">Login</button>

  <my-comp id="embedded-web-component"></my-comp>

  • The my-comp element is embedded in a static page.

  • The token property is set from a JavaScript function that retrieves it within the login function (that is invoked on the login button click).

Example: Associated web component and its exporter class.

public class EmbeddedComponentExporter
       extends WebComponentExporter<EmbeddedComponent> {

    public EmbeddedComponentExporter() {

        addProperty("token", "")

    protected void configureInstance(
           WebComponent<EmbeddedComponent> webComponent,
           EmbeddedComponent component) {

    private void authorize(EmbeddedComponent component,
                           String token) {
        // check the token
        if (isValidToken(token)) {

    private boolean isValidToken(String token) {
        return true;


public class EmbeddedComponent extends Div {

    public EmbeddedComponent() {
        // Don't retrieve any sensitive data here
        // without granted access (via security token)

    public void init() {
        // Initialize your secured component here
  • The embedded web component is instantiated before the exporter instance receives the token value. For this reason, avoid retrieving or initializing components with sensitive date in the constructor. Do your initialization only after the valid token value is received.

If you cannot prevent the initialization of the web component in the constructor, you can wrap it in a container, like Div. Create a Div subclass (instead of using EmbeddedComponent), and add an EmbeddedComponent instance into the Div subclass when the token is validated.
If you use a Dependency Injection (DI) framework, keep in mind that EmbeddedComponentExporter is instantiated directly without DI, and you may not use this instance to inject anything from DI context. As a workaround, you can create a a wrapper component that is instantiated within the DI context, and then use the wrapper instance to access the DI context.