Cannot make data-href work

[gwebster]

I would be grateful for some help.

I have no problem embedding the viewer in a web page and using the 'data-pdb' tag to get it to load a pdb id of my choice direct from the rscb. I am unable however, to get the 'data-href' tag to work with any url. I have tried placing the files on my web site, on DropBox and on Google Drive, but the viewer just displays a blank white canvas and no structure. I have also tried using the urlencode form directly in a browser, but the only url I can get to work is the example benzene structure in the tutorial.

Any ideas?

Many Thanks,

Gordon

[dkoes]

Are you seeing any errors in the browser console? Unfortunately (or fortunately from a security standpoint) browsers have started to block any cross-site resource requests unless the server is explicitly configured to support them.

However, this would not explain why a file hosted on the same site as the webpage would have a problem. I would need to see the site to understand what is happening.

[gwebster]

Hi dkoes.

Take a look at http://www.amberbiology.com/molecule

I have created a test page with two viewers. The top one uses the 'data-pdb' tag and works just fine. The lower one uses 'data-href' pointing to a local url for an uploaded pdb file and just displays a blank canvas. I've tried other urls lie DropBox and Google Drive as well, with the same result. Am I missing something essential?

Thanks

Gordon

[dkoes]

Hmm, yeah, this is the error in the console: XMLHttpRequest cannot load https://amberbiology.squarespace.com/s/4kw4.pdb. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.amberbiology.com' is therefore not allowed access. I suspect the issue is that amberbiology.com != squarespace.com.

You could also use data-element.

[gwebster]

Hi David,

No, I don't think that this is the problem, I already thought of this.

The static URL to the PDB file is: http://static1.squarespace.com/static/55cea27ce4b0e9aecb833866/t/574d9779d51cd43e7b8abb32/1464702841482/4kw4.pdb

and I have already tried including this as the 'data-href' URL, but it still did not work.

I have updated the amberbiology/molecule test page with the static URL, so that you can see that it is still not working correctly, even with the fully declared Squarespace static URL.

Any ideas?

Best,

Gordon

On Sat, Jun 4, 2016 at 6:38 PM, David Koes notifications@github.com wrote:

Hmm, yeah, this is the error in the console: XMLHttpRequest cannot load https://amberbiology.squarespace.com/s/4kw4.pdb. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.amberbiology.com' is therefore not allowed access. I suspect the issue is that amberbiology.com != squarespace.com.

You could also use data-element.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/3dmol/3Dmol.js/issues/184#issuecomment-223782107, or mute the thread https://github.com/notifications/unsubscribe/ABY-GF5ZwM1CVfSUUIGW7wPOE5ybImueks5qIf5agaJpZM4Itlbm .

[dkoes]

This issue is that static1.squarespace.com != amberbiology.squarespace.com which means they are not the "same origin": https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy Cross origin resource requests are disabled in all modern browsers by default for security reasons (allowing this enables all sorts of phishing attacks). The server has to be explicitly configured to enable cross origin resource sharing (CORS): https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

You may be able to get this working by editing the .htaccess file on square space: https://answers.squarespace.com/questions/134294/cross-domain-access-control.html but this is a really a question for squarespace support.

The alternatives are to embed the data in the webpage and use data-element, or to setup a cgi script (on the same domain) that does the resource fetch for you (this is what we do with viewer.html).

[gwebster]

Thanks David.

On Sun, Jun 5, 2016 at 11:44 AM, David Koes notifications@github.com wrote:

This issue is that static1.squarespace.com != amberbiology.squarespace.com which means they are not the "same origin": https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy Cross origin resource requests are disabled in all modern browsers by default for security reasons (allowing this enables all sorts of phishing attacks). The server has to be explicitly configured to enable cross origin resource sharing (CORS): https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

You may be able to get this working by editing the .htaccess file on square space:

https://answers.squarespace.com/questions/134294/cross-domain-access-control.html but this is a really a question for squarespace support.

The alternatives are to embed the data in the webpage and use data-element, or to setup a cgi script (on the same domain) that does the resource fetch for you (this is what we do with viewer.html).

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/3dmol/3Dmol.js/issues/184#issuecomment-223820315, or mute the thread https://github.com/notifications/unsubscribe/ABY-GD_KmJLVME66NJ_5SEhCXQz0svINks5qIu7pgaJpZM4Itlbm .