Lots of Embeds Not Working [Lack of iFrame Support]

1

Examples:

[Spaces added to links and embedded medium removed because of forum rules. Ironic given the topic.]

1 - Coingecko supports embedding via an iFrame. Please see the documentation on their website. They provide the following code:

<coingecko-coin-ticker-widget  coin-id="bitcoin" currency="usd" locale="en"></coingecko-coin-ticker-widget>

Desired result:
![image|690x228](upload://mZPSZpzJ9LQK6jhtS52JlI9SbnM . png)

If you try to put this in a Coda doc using just the link (https://widgets.coingecko.com/coingecko-coin-ticker-widget.js), it does not work.

Actual result with compatability mode off:
![image|690x98](upload://805cyyp0nkvnPLaY39GaPkhX2US . png)

Actual result with compatability mode on:
![image|690x423](upload://5hhsrZnb6JD8RhTkyuaRqAB3ORR . png)

2 - [TradingView](tradingview . com/) supports embedding via an iFrame. Please see [the documentation](tradingview . com/widget/advanced-chart/) on their website. They provide the following code:

<div class="tradingview-widget-container" style="height:100%;width:100%">
  <div class="tradingview-widget-container__widget" style="height:calc(100% - 32px);width:100%"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js" async>
  {
  "autosize": true,
  "symbol": "NASDAQ:AAPL",
  "interval": "D",
  "timezone": "Etc/UTC",
  "theme": "dark",
  "style": "1",
  "locale": "en",
  "enable_publishing": false,
  "allow_symbol_change": true,
  "calendar": false,
  "support_host": "https://www.tradingview.com"
}
  </script>
</div>
<!-- TradingView Widget END -->

Desired result:
![image|690x407](upload://AlwWGzvxbtYlUT2V4HWtRXZ1zlt . png)

If you try to embed this using just the link (https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js, it clearly will not work.

Actual result with compatibility mode off:
![image|690x81](upload://anUEdzPciqgoAfZyqKWtMdLzKQ3 . png)

Actual result with compatibility mode on:
![image|690x422](upload://bDcV9f7TPYPy1GJQuSv2WVpKm19 . png)

3 - x . com supports embedding via an iFrame as per [their official “Twitter Publish” page](publish . twitter . com/#). Similarly to the above, the embed does not work just via link (it doesn’t fail quite as hard but it does fail).

I think I could find a nearly infinite list of websites that officially support embedding via iFrame, but cannot be embedded in Coda. I am happy to find more examples, but I assume this will suffice for now. I have seen other topics on this forum related to this issue, but some of them are years old and I would like to resurface this as an ongoing issue.

It feels like I am missing something, because the majority of websites that I would like to embed officially support embedding, but are, to my knowledge, impossible to embed in Coda for this fairly simple reason - Coda only supports embedding via link, and most (?) embeds these days do not work that way.

Thank you for your attention and I would appreciate any support on this matter.

2

Reposting the exact same content but with links and embeds. The moderators were kind enough to lift the restrictions on my account.

Would really appreciate any attention on this matter- solving it would be a huge unlock for me in my Coda usage.

3

Hey @Rafael_Cosman! I have a fix that may work for you. I only tried this out with your second example, so you’d need to explore it on your other examples, but here’s what I found:

(a) I get the same results you describe when I use the url you provide ( https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js)
(b) I think the problem is that this url is not intended to be an iframe source. If you open a new browser page with this link, you’ll see it is just some javascript code. In the full TradingView example, this code likely rewrites some of the html to dynamically replace it with an iframe. But this code by itself is not the iframe content you want.
(c) Since you linked to the TradingView documentation page, I took a look and saw their embedded iframe example. If you inspect the html behind this element (Cmd-C on a mac, then click on the iframe container element), you’ll see that the <iframe> element has a src tag with a long url in it. This url actually loads the TradingView widget.
(d) I used this url in a Coda Embed with compatibility mode On and got a TradingView widget just like the documentation shows. You can view my doc here: https://coda.io/d/_d1HA2u-p1FH/Untitled-page_suTG4

Screenshot 2024-03-20 at 08.02.58
Screenshot 2024-03-20 at 08.02.581102Ă—1354 190 KB

I don’t know how resilient this solution will be. Since TradingView is dynamically loading the actual iframe source, the source might change frequently, in which case this embed might not work in the future. You could follow up with TradingView to ask them to provide a raw iframe source url that they commit to maintaining.

While it’s possible Coda has a solution for embedding arbitrary HTML as content the way Trading View wants you to, I assume Coda does not and should not support this. The whole point of an iframe is to isolate potentially untrusted 3rd-party content, and a block of html that runs a 3rd-party script (which happens to insert an iframe) completely violates this security model. To use TraderView’s html approach while respecting Coda’s security model for 3rd-party embeds, you’d need to serve the TraderView html as an iframe-able URL, and provide that URL to Coda’s Embed, resulting in nested iframes. Maybe it would work? But it’s clearly not a good solution. I don’t know how well nested iframes work, and you’re definitely deep in the hackery by that point.

Perhaps someone who works at Coda or knows the web well can comment on how common it is for 3rd party iframe providers to provide stable iframe source URLs vs. insecure dynamic loading crap like Trading View is providing. The cynic in my head suspects it’s quite common, because web programmers traditionally value ease of use over security. Usually someone who wants an iframe is looking to insert it as html into their own website source code instead of provide user content for someone else’s web application (e.g. Coda) to load, in which case Trading View’s approach wins on ease of use.

1 Like
4

Thank you @Daniel_Windham1, this fix worked for me as well! Thank you very much for your help, I will plan on using this going forward.

5

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