Running meteor app inside iframe on Samsung Smart TV

vsheyanov · June 28, 2019, 9:54am

Hello Meteor gurus.
We are trying to run Meteor app inside Tizen Browser on Samsung Smart TV (2017 year of production).
I’ve created a demo using some random app https://codepen.io/vsheyanov/pen/VJyaNm
Website with chat is running perfectly in the smart TV’s browser, but when ran in the iframe - it doesn’t start at all.

TizenBrowser 2.0.4.022xxx оr 3.0 (TV itself and User agent show 2 different versions).

To be honest, I have no ideas how to debug this issue…

alawi · June 28, 2019, 10:21am

It does work after accepting the security risk mentioned below. I think you need a valid SSL certificate for the iFrames to work.

Have you tried fixing the certificate for this URL? I think you can use cloudflare to get free SSL.

Edit: I guess this is not your site, but some third party you used, anyhow, I think that is the issue with this site.

This server could not prove that it is  **chat.pitchly.net** ; its security certificate expired 162 days ago. This may be caused by a misconfiguration or an attacker intercepting your connection. Your computer's clock is currently set to Friday, June 28, 2019. Does that look right? If not, you should correct your system's clock and then refresh this page.

[Proceed to chat.pitchly.net (unsafe)](chrome-error://chromewebdata/#)

vsheyanov · June 28, 2019, 10:33am

Hi @alawi,
It does work if you open chat link directly. On the TV I click Proceed anyway and it works.

This App is not developed by us, I found it for the testing purpose =)

Problem arises only when Codepen with IFrame is opened in the Samsung’s browser.

alawi · June 28, 2019, 10:39am

Like I said this site has no valid certificate and it could be that the TV browser is blocking it, chrome/safari block them as well.

vsheyanov · June 28, 2019, 10:47am

I’ve updated Codepen to use another app with proper certificate. It doesn’t work in Samsung’s browser as well.

alawi · June 28, 2019, 11:13am

Ah I see, I thought you said it doesn’t work in the Codepen, my bad. Well, I guess it’s browser specific now…

alawi · June 28, 2019, 12:12pm

Have you tried running it in a simulator and inspect the issue? It seems you can use web inspector to debug the app. I guess that where would I start…

vsheyanov · June 28, 2019, 12:15pm

That was my first guess to try simulator, I used all versions 2/3/4 and it worked in all simulators =)

alawi · June 28, 2019, 12:33pm

This app (remoteJS) was announced today on hacker news. Basically it claims to allow you to remote debug apps, perhaps it might help in your case to see what’s happening in the actual TV. But for that you’ll need to deploy a sample app and modify the head.

I guess the other option is to explore remote debugging on the hardware itself to see if you get any console errors…

vsheyanov · June 28, 2019, 12:58pm

Thanks for the tip with RemoteJS. We use Sentry.io for error handling, but it is initialised inside the app which is not loaded in case of SmartTV. It’s a good idea to place RemoteJS directly in html code, may be it would show something.

Thanks!

vsheyanov · June 28, 2019, 2:54pm

Success!

The core-js npm package could not be found in your node_modules directory. Please run the following command to install it: meteor npm install --save core-js

Browser
Mozilla/5.0 (SMART-TV; Linux; Tizen 3.0) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/2.0 Chrome/47.0.2526.69 TV safari/537.36 (Parsed)
Operating System
Tizen 3.0

n.node_modules.meteor.ecmascript-runtime-client.legacy.js @ 9b7c906c2e8347e3907d7a109b9986d339931647.js 27:1154 View Raw Source 
g @ 9b7c906c2e8347e3907d7a109b9986d339931647.js 5:1109 View Raw Source 
d.n [as require] @ 9b7c906c2e8347e3907d7a109b9986d339931647.js 5:3526 View Raw Source 
e @ 9b7c906c2e8347e3907d7a109b9986d339931647.js 5:730 View Raw Source 
{anonymous} @ 9b7c906c2e8347e3907d7a109b9986d339931647.js 27:77135 View Raw Source 
{anonymous} @ 9b7c906c2e8347e3907d7a109b9986d339931647.js 27:77266 View Raw Source

No ideas what to do next =)

alawi · June 28, 2019, 4:18pm

Nice, is this from remoteJS? I guess just install core-js and give it a try?

vsheyanov · July 1, 2019, 8:18am

Yep, this is RemoteJS. But as I mentioned, this app works everywhere except in IFrame in Tizen 2.0 browser. It even works in Tizen 2.0 when opened directly, without IFrame =) So it’s not the case of core-js missing in package.json (it’s not used directly, some other packages are using it).
However, as a long shot I can try installing it just for the purpose of testing.

alawi · July 1, 2019, 8:27am

Got it, yeah make sense, it’s kind strange though that it’s looking in the node_modules for this package and it’s only in the iFrame that this error pops up…

Perhaps you can try deploying a fresh meteor project and see if that actually works within Tizen IFrame or it would result in the same error.

xet7 · July 2, 2019, 12:20pm

Do you have iframing allowed with content-policy packages from atmospherejs?

github.com

wekan/wekan/blob/master/server/policy.js

import { BrowserPolicy } from 'meteor/browser-policy-common';

Meteor.startup(() => {

  if ( process.env.BROWSER_POLICY_ENABLED === 'true' ) {
    // Trusted URL that can embed Wekan in iFrame.
    const trusted = process.env.TRUSTED_URL;
    BrowserPolicy.framing.disallow();
    //Allow inline scripts, otherwise there is errors in browser/inspect/console
    //BrowserPolicy.content.disallowInlineScripts();
    //BrowserPolicy.content.disallowEval();
    //BrowserPolicy.content.allowInlineStyles();
    //BrowserPolicy.content.allowFontDataUrl();
    BrowserPolicy.framing.restrictToOrigin(trusted);
    //BrowserPolicy.content.allowScriptOrigin(trusted);
  }
  else {
    // Disable browser policy and allow all framing and including.
    // Use only at internal LAN, not at Internet.
    BrowserPolicy.framing.allowAll();

This file has been truncated. show original

matb33 · July 4, 2019, 2:25pm

One of our clients runs a Meteor app (client only, server is custom) on Tizens and WebOS (among others). We’ve had nothing but trouble getting Tizens to load an external URL. With WebOS, we were able to stuff a simple index.html that did a meta redirect to the target URL hosted elsewhere. Works great… With Tizen, we had to resort to having the entire front-end bundled in the wgt. We’ve tried to get it to load to another URL over the years and always ended up giving up. Makes debugging/development harder… With WebOS, we could build a simple ipk that redirected to localhost:3000. With Tizen, it just wouldn’t work, so we needed to create a fresh wgt each time with the client-side built and embedded.