PAIR-code/facets

facets-overview crashed!

youw3 opened this issue · 14 comments

youw3 commented

image
it cant display the result because "https://raw.githubusercontent.com/PAIR-code/facets/1.0.0/facets-dist/facets-jupyter.html" cant open

i knew the jupyter extension ,but open html file is more convenient for me,

can you tell me how to import an online url like "https://raw.githubusercontent.com/PAIR-code/facets/1.0.0/facets-dist/facets-jupyter.html" rather than use "href="/nbextensions/facets-dist/facets-jupyter.html" "

youw3 commented

i uploaded the file "facets-jupyter.html" on my github project and use the raw url but it doesnt work

jameswex commented

What error do you see in the browser's developers console when you attempt to link import the github-hosted facets-jupyter.html from your own html page?

youw3 commented

What error do you see in the browser's developers console when you attempt to link import the github-hosted facets-jupyter.html from your own html page?

i m in China ,it seems that the site https://raw.githubusercontent.com cant open, i add "199.232.68.133 raw.githubusercontent.com" in my pc hosts and the facets can show

youw3 commented

What error do you see in the browser's developers console when you attempt to link import the github-hosted facets-jupyter.html from your own html page?

when I attempt to link import the github-hosted facets-jupyter.html from your own html page,
it cant show anything,just whole blank

image

jameswex commented

So if you copy that file to your machine or another local one and link it from there, does it work as expected?

youw3 commented

So if you copy that file to your machine or another local one and link it from there, does it work as expected?

i seems find the reason why it doesnt work, maybe my link needs gitlab account verified,
i plan to use tomcat to build a local web service and try, wait please, thank you!

youw3 commented

So if you copy that file to your machine or another local one and link it from there, does it work as expected?

image
from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

jameswex commented

@jimbojw any advice for getting access to this file without CORS issues?

jimbojw commented

OK thanks, I think I understand the problem. To use the <facets-overview> tag in a page, the code that implements that tag has to load and run. The code is in the file called facets-jupyter.html. The problem is that loading data from different origins (different domains) is prohibited by the browser. There are good security reasons why this the case.

If a given server wants to allow its content to be accessible across domains, the server can supply an Access-Control-Allow-Origin HTTP header. The domain raw.githubusercontent.com does not set this header. I suspect that gitlab.vmic.xyz does not either.

If you control the server gitlab.vmic.xyz, you could possibly configure it to supply an Access-Control-Allow-Origin value that includes the host where you're trying to show <facets-overview>. Exactly how to set this header depends on what kind of software is doing the hosting. You mentioned Tomcat. I know there's a way to configure that. This page describes what the header needs to look like https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#The_HTTP_response_headers

You could also host the facets-jupyter.html from the same domain as where your containing page runs. If the two files have the same origin, then you don't need to set up an access control origin header.

youw3 commented

The domain raw.githubusercontent.com does not set this header.
thank you for your reply. you said "The domain raw.githubusercontent.com does not set this header.", however,
image
the link can work well without CORS issues, why?

jimbojw commented

Yeah, it's a subtle distinction. If you open a link directly, your browser will have no trouble downloading and displaying the content. This is normal.

It's even possible to load code and images across domains in some cases. For example, your code fragment loads webcomponents-lite.js from the domain cdnjs.cloudflare.com in a <script> tag. Browsers allow script tags and <img> tags to load content from different domains.

But the problem is when you want load content from a different domain AND access that data programmatically in JavaScript. To load data dynamically, pages often use XMLHttpRequest. If the data is coming from the same domain, everything works fine. But if the data comes from another domain, by default the browser will reject the attempt.

This is a security precaution for your safety. It helps to prevent cross-site scripting (XSS) attacks. If XMLHttpRequest allowed arbitrary requests across domains, it would be trivial to steal visitors' credentials and other data from other sites they were logged into.

But rather than always preventing all cross-origin requests, the browser will allow such requests IF the server specifically allows those requests. The server signals that it's willing to serve to another domain by supplying the Access-Control-Allow-Origin HTTP header.

youw3 commented

Yeah, it's a subtle distinction. If you open a link directly, your browser will have no trouble downloading and displaying the content. This is normal.

It's even possible to load code and images across domains in some cases. For example, your code fragment loads webcomponents-lite.js from the domain cdnjs.cloudflare.com in a <script> tag. Browsers allow script tags and <img> tags to load content from different domains.

But the problem is when you want load content from a different domain AND access that data programmatically in JavaScript. To load data dynamically, pages often use XMLHttpRequest. If the data is coming from the same domain, everything works fine. But if the data comes from another domain, by default the browser will reject the attempt.

This is a security precaution for your safety. It helps to prevent cross-site scripting (XSS) attacks. If XMLHttpRequest allowed arbitrary requests across domains, it would be trivial to steal visitors' credentials and other data from other sites they were logged into.

But rather than always preventing all cross-origin requests, the browser will allow such requests IF the server specifically allows those requests. The server signals that it's willing to serve to another domain by supplying the Access-Control-Allow-Origin HTTP header.

Can you provided an offline mode that i save the "facets-jupyter.html" in my PC folder path, for example "D:/facets/facets-dist/facets-jupyter.html" and add a line such as
<link rel="import" href="D:/facets/facets-dist/facets-jupyter.html" >
in an offline HTML file, when i double click it, it can show the result.
I knew the facets support jupyter extension , but open html file is more convenient for me, please, thank you!

jameswex commented

You can save that file locally from our github repo on your own machine and point your jupyter notebook's code to load it from your local copy, or have your own html file point to that local version. But in that case you will need to write the html code to correctly load the visualization and set the data on it, much in the way that our homepage code does (https://pair-code.github.io/facets/ is the homepage, with the code to get it work being https://github.com/PAIR-code/facets/blob/gh-pages/index.html