Several Widgets Not Rendered (?)

[thomas-gt]

Hello,

After fresh install I'm unable to get display for a few widgets. Among those tested :

• IFrame (provided out of the box)
• dashing-map (additional widget)
• dashing-trafficmap (additional widget)

For them I do not get anything on screen, just background.

On the other hand all widgets from dashboards examples (sample and sampletv) are working fine...

I searched during hours and I tested many things without result. Initially I was thinking that Google Maps API calls were the culprits but I finally discovered that IFrame has same issue.

The only success I had was with a NodeJS fork of Dashing which allowed me to get a map displayed, but I'd like to use the Ruby version.

I can see some demos on the web so I guess it should work.

Does anyone has same issue ?
Any clue on how to fix this ?

I'm using :

$ lsb_release -a
No LSB modules are available.
Distributor ID: Debian
Description:    Debian GNU/Linux 8.6 (jessie)
Release:    8.6
Codename:   jessie

and :

$ ruby -v
ruby 2.1.5p273 (2014-11-13) [x86_64-linux-gnu]

Thanks
Tom

[MakAlt]

I have the same problem. Does anyone have any suggestions?

[kinow]

Hi @thbg , @MakAlt

I've just tried to reproduce this issue for the IFrame, as it is provided with the default installation. Here's my settings:

$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 16.04.1 LTS
Release:    16.04
Codename:   xenial

$ ruby -v
ruby 2.3.1p112 (2016-04-26) [x86_64-linux-gnu]

• gem install smashing
• cd /tmp/ && smashing new test && cd test
• create a test.erb dashboard, with the following content

<% content_for :title do %>My super sweet dashboard<% end %>
<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div id="iframe1" data-view="Iframe" data-url="https://google.co.nz"></div>
    </li>
  </ul>
</div>

• No further changes, just smashing start and then go to http://localhost:3030/test

I see an empty dashboard, but in the console I can see that there was an error trying to embed Google, since it prevents it via X-Frame-Options header.

But replacing https://google.co.nz by another web site, such as https://www.usp.br, it works with no issues. Maybe you have the same issue with that X-Frame-Option header? You can inspect the DOM in the browser developer tools too, to see if there is an iframe there, or also see if there is something in the JavaScript console.

Hope that helps,
Bruno

[thomas-gt]

Hi @kinow,

Thanks for your inputs.

Since my post I performed further searches as well and actually X-Frame-Options header appears as very possible root cause (I will test with https://www.usp.br too).

However I cannot explain why it seems to work fine for many people I've seen using it (blogs, tutorials, etc...) and with NodeJS fork as well.

Don't know if any workaround or even solution is available.

Thanks again,
Tom

[kinow]

Not a problem @thbg . Let us know if that works for you. FWIW, I was using the NodeJS fork some months ago in a company, but they had a project to migrate to this project, as the NodeJS is not being maintained anymore.

[thomas-gt]

Hi,

Some news... By using Firefox Ignore X-Frame-Options add-on I've been able to display a simple google maps page into an Iframe :

However no more luck with dashing-trafficmap. Still blank page...

Tom

[kinow]

This one https://github.com/wolfspyre/dashing-trafficmap Tom?

Have you contacted the author to check if he's aware of any recent incompatible changes? Anything in the JS console, or Network console in your browser?

[thomas-gt]

Yes this is the widget I'm testing.

Initially I wanted to open issue against it until I discovered that problem was more generic (iframe...). And it seems there is no issue menu like here on his page (?).

However I asked question against dashing-map the original project from which dashing-trafficmap has been forked (and which has of course same problem for me). No answer yet.

No obvious message in console (from my knowledge) except :

X-Frame-Options  SAMEORIGIN
X-XSS-Protection  1; mode=block

Despite this I'm still progressing on pure iframe workaround (ie without above widgets mentioned). I'm now able to display traffic map. Now trying to remove the top boring search box :

Tom

[kinow]

I'll have some spare time this weekend, and can try to reproduce the issue and see if I can help. Do you have some code snippets (from job/dashboard/widget/etc) that you could share and would help me reproduce it locally in a fresh installation?

[thomas-gt]

I uploaded a simple dashboard containing 4 parts :

• 1 - Top Left Hand Corner : Iframe to duckduckgo.com website -> always working
• 2 - Top Right Hand Corner : Iframe to maps.google.com -> only works if Firefox Add-On (Ignore X-Frame-Options) is enabled
• 3 - Bottom Left Hand Corner : Iframe to google.fr/maps with coordinates and traffic layer -> -> only works if Firefox Add-On (Ignore X-Frame-Options) is enabled
• 4 - Bottom Right Hand Corner : trafficmap widget -> never worked for me, with or without Add-On enabled

dashboard_test.erb.txt

Of course for 2, 3 and 4 parts you need to install trafficmap widget and grab a free Google Maps API key.

Part 3 would be more or less interesting as workaround if I could manage some options (hide search box, prevent dragging and zooming...).

I also discovered that subject has been more or less discussed in original project : Shopify/dashing#467
Seems mainly impact Google website.

Still unable to explain why it works/ed for many people... Moreover there are tons of tutorials on the web explainng how to easily embed google maps into iframe. Despite review of widget code which is quite simple I cannot understand why it fails.

I'm reviewing https://developers.google.com/maps/documentation/javascript/examples/layer-traffic as well...

Don't mess up your whole week-end or spare time on that. It's not so important ;-)
Anyway thanks again for your help.

Tom

[kinow]

Hi Tom,

Thanks a ton for uploading an example dashboard, and for instructions on how to reproduce. I'll take a look next time I have some spare time for sure :-) if anyone else feels like trying to reproducing, feel free to chime in as well.

On "Still unable to explain why it works/ed for many people... ", I think I have an explanation, but wouldn't be able to confirm whether it's 100% correct. My understanding is that some tutorials were written before browsers started enforcing the behavior.

Or by people who were using an older version of browsers. Here you can have a look at the list of browser support. Mixed content warninigs, forms without HTTPS, and a few other changes that affect users have been more widely disseminated after some recent attacks, so that's my guess ;-)

HTH,
Bruno

[kinow]

Oh, and of course, maybe the web sites were not sending that header before...

[kinow]

Waiting for Jenkins to restart and install plug-ins, so had 15 minutes to play with it.

1 - Top Left Hand Corner : Iframe to duckduckgo.com website -> always working

Yup, as long as they don't change the X-Frame-Options.... there are sites that always allow iframes, such as billing/login services as Zuora/Stormpath that have specific URL's, more permissive sites like USP or Duckduckgo, and normally some traffic/weather/news also have URL's that allow. But all it takes is a sysadmin reviewing server roles to get a URL blocked... use with care iframes

2 - Top Right Hand Corner : Iframe to maps.google.com -> only works if Firefox Add-On (Ignore X-Frame-Options) is enabled
3 - Bottom Left Hand Corner : Iframe to google.fr/maps with coordinates and traffic layer -> -> only works if Firefox Add-On (Ignore X-Frame-Options) is enabled

Yup, or keep the add-on always enabled :-)

4 - Bottom Right Hand Corner : trafficmap widget -> never worked for me, with or without Add-On enabled

There's something wrong with the trafficmap widget indeed. Adding Google Maps to the top of the script, with an API key, also synchronously, will definitely creates a Google Maps object in the DOM. But as the widget removes the CSS widget class, the component is not rendered correctly.

The wolfspyre/dashing-trafficmap#1 is not necessary. But you do have to remove this line locally, or the component is never rendered.

https://github.com/wolfspyre/dashing-trafficmap/blob/dfb7e4f1b9fedcc57631a2648a91a9ee10c9f6ae/trafficmap/trafficmap.coffee#L4

Attached screen shot.

@thbg I believe this issue can be closed. WDYT?

[thomas-gt]

Hi Bruno,

Thanks a lot for this. However I'm unsure about the solution.
Here are things with which I'm still confused :

1. I reverted to not using this : updated the center parameter to use the new style wolfspyre/dashing-trafficmap#1
   Anyway it seems still be a pull request then not included yet into widget, right ?
2. Do you mean that following line into trafficmap.coffee file has to be deleted ?
   $(@node).removeClass('widget')
   I tested but it was still failing.
3. Firefox Add-On has be te enabled, even with widget, right ?

Thx
Tom

[kinow]

Firefox Add-On has be te enabled, even with widget, right ?

Regarding the X-Frame-Options, we do not have much to do in order to get that working. The IFrame widget has this limitation, that it will simply add an iframe tag. The browser will handle the rest, and most browsers will respect the X-Frame-Options.

If you have a dashboard that needs to add an iframe to a server that is sending the X-Frame-Options, you will have to either have the add-on enabled, or create another solution (i.e. some sort of reverse proxy, that strips off that header...).

As for

I reverted to not using this : wolfspyre/dashing-trafficmap#1
Anyway it seems still be a pull request then not included yet into widget, right ?

You are correct. It is not included. Mentioned just in case you applied it locally. I tried it as that was the only pull request, and the reporter said something about not seeing the widget.

There is not really a solution for the trafficmap issue you have. This seems to be an issue in the widget, that would have to be fixed there. If you ping me in a pull request/issue to trafficmap repository, I'd be happy to chime in, try to reproduce issues, and comment.

But there's nothing we can do here in Smashing :)

[kinow]

Do you mean that following line into trafficmap.coffee file has to be deleted ?
$(@node).removeClass('widget')
I tested but it was still failing.

Before I got the widget working, I kept seeing JS errors in the browser console.

In case it's still not working for you, check that you have the <script> tag loading Google Maps. That it is not using async/defer attributes. And that you don't get any errors in the JS console that could indicate Google Maps is not being loaded.

When you have the dashboard open, you can open the JS console in your browser and type google.maps. It should print the current google.maps object, unless it was not loaded.

We are digressing from smashing on this too, as it seems to be related uniquely to the trafficmap widget. So it's better to move the conversation to the widget repository or somewhere else.

[thomas-gt]

Still no luck for me :-(
Will perform further tests as you showed it can work.
Thanks a lot Bruno for your help ! :-)
Tom

[thomas-gt]

Finally got the same result as you.
Was able to get something but like on your screenshot this is... half map ?! :-(
More surprisingly the widget "works" without Firefox Add-On...
I think will use iframe with google maps despite some flaws.
Tom

[kinow]

Looks like. The UI didn't change much, nor in Dashing (old project) nor after the fork as Smashing. So I suspect that widget worked some long time ago, but probably Google Maps changed its API, and maybe the layout too.

When you use a Google URL, normally they prevent you from adding it as iframes in other web sites. Except, when you have a valid API key. In this case you won't get the X-Frame-Options, as you are using the API. However, the number of calls per month is restricted, and you may have to buy a pro licence.

[thomas-gt]

Agree. Thanks.
Tom =)

[thomas-gt]

Finally I managed to get a very close to widget and acceptable (for me) solution !
For those who could be interested :

1. Create traffic map
Create an HTML file calling traffic map, eg traffic.html, as stated here and set your coordinates, default zoom, etc... Note the API key to enter at the bottom :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Traffic layer</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 12,
          center: {lat: 48.92, lng: 2.45},
          disableDefaultUI: true,
          scrollwheel: false,
          disableDoubleClickZoom: true,
          draggable: false
        });

        var trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(map);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap">
    </script>
  </body>
</html>

2. Make file accessible
Very important, place this file into Smashing public folder, eg : ~/Smashing/public/traffic.html), as discussed here.

3. Create a dashboard with iframe widget calling local HTML file
Here is a example. Note the "/" in front of traffic.html file :

<% content_for :title do %>Iframe and Widget Test<% end %>
<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="2" data-sizey="3">
       <div id="iframeId1" data-view="Iframe" data-url="/traffic.html"></div>     
    </li>
  </ul>
</div>

4. Refresh
Next step, to be done, will be to setup job for refresh...

This seems working with Firefox add-on disabled... The only drawback I found up to now is that zooming is still enabled despite values in HTML/Javascript.

Hope this helps !
Tom

[kitusmark]

Hi!

I've managed to get it working on dashing the way you explained. How can we do the job refresh?

[thomas-gt]

Hi,
Google Maps seems refresh by itself.
So except if you want to control the refresh interval there is finally no job to create.
Tom

[kitusmark]

ok. Thanks @thomas-gt !

[issamy]

@thomas-gt, Many thanks for the workaround!!
I have been trying to get the traffic-map widget working until I found your solution.
It works like a charm!

[gitrc]

thanks @thomas-gt