Make the iframe dialog host my website in Google Sheets add-on

149 views Asked by At

I'm making a Google Sheets add-on. The core of the Google Sheets add-on is a website hosted in a dialog. I'm trying to use this method to host the website in the dialog and ensure the communication with the google sheet and the backend.

Here is modal.html in Google Apps Script:

<script>
window.addEventListener('message',e =>{
  if(e.origin !== "https://v10.10studio.tech") return;
  const frontEndWindow = e.source;
  const data = JSON.parse(e.data);
  const {funcToRun, args} = data;

  console.log("document.referrer", document.referrer);
  //TODO: SECURITY: 
  // Check syntax of funcToRun, args
  // Check funcToRun against list of available functions 
  // Check args are as expected 

  //TODO Add failureHandler
  google.script.run.withSuccessHandler(res => {
    console.log(res);
    const iframeWindow = document.querySelector('#myFrame').contentWindow;
    iframeWindow.postMessage(({type:'success',response:res}),"https://v10.10studio.tech")
  })[funcToRun](...args)
  },false)
</script>
<iframe 
  id="myFrame"
  src="https://v10.10studio.tech/#/message-sender"
  style="width: 100%; height: 800px; border: none">
</iframe>

modal.gs:

var htmlOutput = HtmlService
    .createHtmlOutputFromFile('modal.html'
    .setWidth(600)
    .setHeight(800);
SpreadsheetApp.getUi().showModelessDialog(htmlOutput, 'My add-on');

When I test in and open the dialog, it shows an error: Firefox Can’t Open This Page and To protect your security, v10.10studio.tech will not allow Firefox to display the page if another site has embedded it. To see this page, you need to open it in a new window.

Here is the nginx configuration of v10.10studio.tech in the production server:

gzip on;
gzip_proxied any;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_min_length 256;
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml >

upstream backend {
   server 178.62.87.71:443;
}

server {
    listen              443 ssl;
    ssl_certificate     /etc/letsencrypt/live/v10.10studio.tech/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/v10.10studio.tech/privkey.pem;
    server_name v10.10studio.tech;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_session_timeout 1d;
    ssl_stapling on;
    ssl_stapling_verify on;
    add_header Strict-Transport-Security max-age=15768000;
    add_header X-Frame-Options "ALLOW-FROM https://n-5fydpzckmar5yncflnjytuyfcusdcfogmgc2eti-0lu-script.g>
    add_header Content-Security-Policy "frame-ancestors https://n-5fydpzckmar5yncflnjytuyfcusdcfogmgc2eti>
    proxy_ssl_name "www.backend.io";
    proxy_ssl_server_name on;

    location ~ /socialLoginSuccess {
        rewrite ^ '/#/socialLoginSuccess' redirect;
    }

    location ~ /auth/(.*) {
        proxy_pass  https://backend/10studio/auth/$1?$query_string;
        proxy_set_header Host v10.10studio.tech;
    }

    location ~ ^/stripe_checkout/(.*)$ {
        return 302 https://checkout.stripe.com/pay/$1;
    }

    location ~ ^/stripe_billing/(.*)$ {
        return 302 https://billing.stripe.com/p/session/$1;
    }

    location / {
        proxy_set_header    Host                $host;
        proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
        proxy_set_header    X-Forwarded-Proto   $scheme;
        proxy_set_header    Accept-Encoding     "";
        proxy_set_header    Proxy               "";
        proxy_pass          http://v10:8080/;

        # These three lines added as per https://github.com/socketio/socket.io/issues/1942 to remove sock>
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection "upgrade";

        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Content-Type';
    }
}

And here are the screenshots of the NS_ERROR_XFO_VIOLATION:

enter image description here

enter image description here

Additionally, I notice that the domain of Google Sheets can be https://n-5fydpzckmar5yncflnjytuyfcusdcfogmgc2eti-0lu-script.googleusercontent.com or https://n-5fydpzckmar5yncflnjytuyfcusdcfogmgc2eti-1lu-script.googleusercontent.com, etc. So we need to have a more general solution.

Does anyone know how to make the iframe open the website?

0

There are 0 answers