Edge, IE11, Safari browser support

[ryanbaumann]

PowerBI custom visuals support Edge, IE11, and Safari. In order to launch on the Office Store, the custom visual has to work in all of these scenarios. The custom visual works great on Chrome and Firefox, leading me to believe that Edge, IE11, and Safari enforce different security policies for iframe sandboxes.

Filed issue in PowerBI Custom Viz repo: https://github.com/Microsoft/PowerBI-visuals/issues/299

@szilardhuber @petispaespea

In IE11:

• Added a startsWith js workaround modifier to get past a basic string manipulation here: 06403df#diff-2d05d529f687bddee587310550a7b0d0
• Get error when loading tiles in a map:
  

In Edge

DOMException: Code: 18, Security Error when trying to load tiles for map.

Safari

Unable to load blob from the worker. Map tiles do not load.

Next Steps

• @anandthakker any ideas if this could be related to the remaining CSP's we require?

child-src blob: ;
img-src data: blob: ;

For the examples above I'm using the latest master build of mapbox-gl-js on 1/22.

Here's a minimal example to try: https://app.powerbi.com/view?r=eyJrIjoiOWEyMDJmOWQtOTgwMC00ZmYwLWI4NzYtYzQxMDBmNGJiZmUzIiwidCI6IjYyOWE3MGIyLTMyYjktNDEyNi05NTFlLTE3NjA0Y2Y0NTZlYyIsImMiOjF9

cc @lucaswoj

[ryanbaumann]

Narrowing this down, it looks like this is the iframe sandbox enforcing different security restrictions on different browsers. Working with the PowerBI team on enabling allow-same-origin for this visual to start here: https://github.com/Microsoft/PowerBI-visuals/issues/299#issuecomment-359848789

[ryanbaumann]

Added a check to ensure WebGL is enabled - may solve some corner cases, but not the root cause of issues here. #49

[ryanbaumann]

Narrowing this down, this is the top priority issue to resolve to get the plugin to the Microsoft Office Store.

[ryanbaumann]

Update on why Web Workers won't work in IE11:

Web workers can work in Chrome or Firefox, but they don't work in Internet Explorer without allow-same-origin attribute. Here is a link: https://connect.microsoft.com/IE/feedback/details/801810/web-workers-from-blob-urls-in-ie-10-and-11

Next Steps

• @ryanbaumann Test if disabling the allow-same-origin iframe sandbox attribute fixes MapboxGL worker blob retrieval on IE11, Safari.
• If disabling allow-same-origin enables the custom visual to work, determine approach to support Mapbox GL custom visual (custom build of Mapbox GL or remove allow-same-origin sandbox attribute for MapboxGL custom visual)

cc @uve

[ryanbaumann]

Minimal test case for Mapbox GL JS allow-same-origin iframe sandbox:

https://bl.ocks.org/ryanbaumann/c28a57618ecd60d23f59d24d91d016fd

If the map in the example above does not load tiles in a browser, that means that allow-same-origin permissions are required for the browser iframe sandbox.

I confirmed that the minimal Mapbox GL iframe sandbox does not load on IE11 and Edge. It does load for me on Firefox and Chrome. This means we still need the allow-same-origin flag set in the PowerBI custom visual iframe to proceed with IE11 and Edge browser support.

Next Steps

• Test adding the allow-same-origin sandbox flag to the PowerBI custom visual iframe.

[ryanbaumann]

I upgraded the GL JS library to the latest 0.44.0 build, which fixes IE11 support for startsWith() and improves scroll performance in the latest master branch. Allowing the iframe sandbox allow-same-origin is still required from the PowerBI custom visualization iframe in order to get MapboxGL to work.

[ryanbaumann]

Cut a Mapbox GL JS issue that may help address IE11, Safari, and Edge support for this custom visual here -> mapbox/mapbox-gl-js#6056

Edit - this issue will not help with IE11/Edge support.

[ryanbaumann]

Update on testing removing the worker:src blob CSP mapbox/mapbox-gl-js#6056:

Remove this CSP will not solve the Mapbox GL + PowerBI custom viz compatibility on IE11 and Edge browsers. It does enable support for Safari browsers.

To support web workers at all on IE11 and Edge without the iframe sandbox allow-same-origin flag, we would need to remove web workers entirely from the Mapbox GL JS library. This would both be a large amount of development work (weeks), and neuter performance - especially for geojson sources, which is one of the major performance benefits of the Mapbox GL custom visual in the first place - it's easy to visualize and understand big, dynamic data.

Next Steps

• The only option to support to support IE11 and Edge browsers is to add the allow-same-origin flag.
  • Since IE11 support is required, this issue is a hard blocker to put this custom visual on the Office Store

cc @uve @cmtoomey @yuletide

[ryanbaumann]

Safari browser support is blocked by this bug in Safari - https://bugs.webkit.org/show_bug.cgi?id=170075 Can not read blobs in sandboxed iframes.

We're working on a workaround for this bug in GL JS here since it hasn't been addressed by Safari mapbox/mapbox-gl-js#6058 (comment)

[ryanbaumann]

We launched on the Office Store in preview mode. Tracking this issue still for Safari in particular, but no longer a hard blocker to Office Store preview launch.

[ryanbaumann]

If you're running into this Safari browser support bug with the Mapbox Visual for Power BI, please submit a bug report referencing this detailed Safari bug report https://bugs.webkit.org/show_bug.cgi?id=170075 to Apple support at http://bugreport.apple.com/

[ryanbaumann]

We identified a browser bug that blocks web workers from functioning in sandboxed iframes in Edge. Tracking with the Microsoft Edge support team and will drop updates here.

[ryanbaumann]

We've confirmed that the next version of the Mapbox Visual will ship with support for Edge, Opera, and Safari in addition to Chrome and Firefox.

We're still working to see if we can get IE11 included in the supported browser list. Stay tuned.

[samgehret]

@ryanbaumann closing this issue as we now support Edge Safari and IE11

[prathmj]

Just checking to see if this was shipped in the 1.2 version. We still get the same error message on Edge and Safari.