Embedding a streamlit iframe in a vue component

Deployment
1

I am trying to embed my streamlit app (analytics.hydraship.com) into a component in my vue app.

I want a token to be sent as a header from vue to the iframe so that users are logged automatically.

This is my attempt, however javascripts seems to be disabled when fetching the iframe like that which avoids my streamlit app to load.:

<template>
  <div>
    <iframe :src="iframeSrc" frameborder="0" width="100%" height="100%" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;"></iframe>
  </div>
</template>

<script>
import RestClient from '@/client/rest-client';

export default {
  computed: {
    username() {
      // Retrieve the username from the RestClient
      return RestClient.email;
    },
    token() {
      // Retrieve the token from the RestClient
      return RestClient.accessToken;
    },
    APIurl() {
      // Retrieve the APIurl from the RestClient
      return RestClient.apiUrl;
    },
    iframeSrc() {
      // Build the URL with the username, token, and APIurl
      const baseUrl = "https://analytics.hydraship.com";
      const queryParams = new URLSearchParams();
      queryParams.append('username', this.username);
      queryParams.append('app', this.APIurl);

      // Create an XMLHttpRequest to load the data
      const xhr = new XMLHttpRequest();

      xhr.open('GET', baseUrl + '/?' + queryParams.toString());
      xhr.responseType = 'blob';
      xhr.setRequestHeader('X-Access-Token', this.token);

      xhr.onreadystatechange = () => {
        if (xhr.readyState === XMLHttpRequest.DONE) {
          if (xhr.status === 200) {
            const data_url = URL.createObjectURL(xhr.response);
            document.querySelector('iframe').src = data_url;
          } else {
            console.error('No streamlit app');
          }
        }
      };

      xhr.send();
    }
  }
}
</script>

Any solutions?

2

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.