Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cesium doesn't work over the file:// protocol #5326

Closed
bgradin opened this issue May 15, 2017 · 5 comments
Closed

Cesium doesn't work over the file:// protocol #5326

bgradin opened this issue May 15, 2017 · 5 comments

Comments

@bgradin
Copy link

bgradin commented May 15, 2017 •
edited
Loading 

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <script src="cesium/Build/CesiumUnminified/Cesium.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <style>
    @import url(cesium/Build/CesiumUnminified/Widgets/widgets.css);
    html, body, #cesiumContainer {
        width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script>
    Cesium.BingMapsApi.defaultKey = 'I am not going to post my key here, but pretend this is valid';
    const viewer = new Cesium.Viewer('container');

    const mapData = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom"><Document><name>MaineScubaDiving.kml</name><Style id="sh_water"><IconStyle><scale>1.4</scale><Icon><href>http://maps.google.com/mapfiles/kml/shapes/water.png</href></Icon><hotSpot x="0.5" y="0" xunits="fraction" yunits="fraction"/></IconStyle><ListStyle></ListStyle></Style><Style id="sn_water"><IconStyle><scale>1.2</scale><Icon><href>http://maps.google.com/mapfiles/kml/shapes/water.png</href></Icon><hotSpot x="0.5" y="0" xunits="fraction" yunits="fraction"/></IconStyle><ListStyle></ListStyle></Style><StyleMap id="msn_water"><Pair><key>normal</key><styleUrl>#sn_water</styleUrl></Pair><Pair><key>highlight</key><styleUrl>#sh_water</styleUrl></Pair></StyleMap><Folder><name>Portland Area Scuba Diving</name><open>1</open><Style><ListStyle><listItemType>check</listItemType><ItemIcon><state>open</state><href>:/mysavedplaces_open.png</href></ItemIcon><ItemIcon><state>closed</state><href>:/mysavedplaces_closed.png</href></ItemIcon><bgColor>00ffffff</bgColor><maxSnippetLines>2</maxSnippetLines></ListStyle></Style><Placemark><name>Two Lights (Dyer Cove)</name><LookAt><longitude>-70.19614327088985</longitude><latitude>43.56407610092381</latitude><altitude>0</altitude><heading>0.005721901271317009</heading><tilt>0</tilt><range>1032.924643200811</range><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_water</styleUrl><Point><gx:drawOrder>1</gx:drawOrder><coordinates>-70.19851561266309,43.56518137538722,0</coordinates></Point></Placemark><Placemark><name>Ft Williams</name><description>30-65 Ft Free parking</description><LookAt><longitude>-70.21224393621128</longitude><latitude>43.62602634978145</latitude><altitude>0</altitude><heading>-0.005023411931936011</heading><tilt>22.47331455228214</tilt><range>404.3217940943707</range><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_water</styleUrl><Point><gx:drawOrder>1</gx:drawOrder><coordinates>-70.21297525869396,43.6254352929708,0</coordinates></Point></Placemark><Placemark><name>Biddeford Pool</name><LookAt><longitude>-70.33905163232077</longitude><latitude>43.44545067410524</latitude><altitude>0</altitude><heading>0.2827201332560385</heading><tilt>0</tilt><range>259.679407890024</range><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_water</styleUrl><Point><gx:drawOrder>1</gx:drawOrder><coordinates>-70.33967757616416,43.44522220360595,0</coordinates></Point></Placemark></Folder></Document></kml>';

    Cesium.KmlDataSource.load($.parseXml(mapData),
    {
      camera: viewer.camera,
      canvas: viewer.canvas,
    }).then((dataSource) => {
      viewer.dataSources.add(dataSource);
      viewer.flyTo(dataSource.entities);
    });
  </script>
</body>

In the above minimal example, based on the KML example page, several coordinates, loaded as KML, are plotted with labels on the globe.

Everything works great when the example is loaded through the http:// or https:// protocols. However, if you try to view the example locally by opening the document in chrome (ie loading it via the file:// protocol), the viewer does not render or fly to the added entities.

My guess is that this might be caused by XHR failing to access URLs specified in styles or xmlnss. In any case, it might be nice to fail a bit more gracefully; at least print out a warning if the library is loaded via the file:// protocol.
@bgradin bgradin changed the title Cesium doesn't work over the file:// protocol Cesium doesn't work over the file:// protocol May 15, 2017
@ateshuseyin
Copy link
Contributor

Its about cross origin resource sharing. You can disable security in your browser. And you are right. It is not graceful but most of libraries do same thing. file:// protocol is out of scope for web projects.

@denverpierce
Copy link
Contributor

You can load other offline resources such as in #4773

@emackey
Copy link
Contributor

emackey commented May 18, 2017

Issue #4773 is about loading Cesium over HTTP on a disconnected network (for example, giving a presentation at a conference where the WiFi is down). You still need to run server.js in Cesium's root folder to get a local server for Cesium, even if there is no network connection.

Cesium does not support operating over the file:// protocol because Cesium needs to XHR a bunch of resources like textures, EOP data, web worker scripts, and other stuff that's in the Assets folder.

By default, browsers don't support XHR over the file protocol because it would allow unfettered access to local files. Some browsers offer an option to turn off this security, but it is of course quite dangerous to your local file security to turn this off. The recommended solution is to just run node server.js instead.

@emackey emackey closed this as completed May 18, 2017
@mramato
Copy link
Contributor

mramato commented May 18, 2017

Cesium does not support operating over the file:// protocol because Cesium needs to XHR a bunch of resources like textures, EOP data, web worker scripts, and other stuff that's in the Assets folder.

Just to clarify, Cesium absolutely works with file:// protocols, just not inside of a default sandboxed browser environment for the security reasons you stated. If you use inside Electron, WebView, or any other platform that allows for file access, everything works perfectly fine.

@ggetz ggetz mentioned this issue Sep 15, 2017
Closed
@filipdns
Copy link

filipdns commented Dec 3, 2018

Hello, I'm using WebView with Qt and file:// protocols is not accepted... How can I use it?
WebEngineView in Qt has localContentCanAccessFileUrls :true in default, when I don't know how solve my problem...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@emackey @mramato @denverpierce @bgradin @ateshuseyin @filipdns