You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

1

Saturday, June 29th 2013, 11:00pm

HTML5 CORS implementation

Hi

I've upgraded to the latest version of krpano from the 1.0.8.15 version ... imagine my shock when nothing was loading in HTML5 because all the files i use (tiles and images) are on Amazon.
Ok so after a few hours of cursing and trial and error my conclusion is HTML5 cors option only works with OFF

As you might already know the buckets on amazon have the option to set up "CORS Configuration" as they call it ... it uses an xml that defines the response headers .... here are my settings:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>

as you might expected it does not work. so how should the krpano security tag look like to only allow GET requests to my bucket?

thanks,
Rares

2

Tuesday, July 2nd 2013, 10:32am

some updates ....

http://www.360tourist.net/view-tour/4676

the xml for that url is here => http://www.360tourist.net/read-tour/4676
this is the link build be me ... the pb is i get an error only on HTML5 on Desktop browsers and on the default browser on Android 4.1.2
what works is IOS and Chrome for Android
so the error i get is this

Source code

1
2
3
4
5
6
7
8
Viewport target-densitydpi is not supported. 
Uncaught Error: SecurityError: DOM Exception 18
Sa.drawtileimage
d.drawcubestrip
a.checkloading
$a.handleloading
Ld
Ne


Rares

3

Tuesday, July 2nd 2013, 10:58am

Hi,

the problem in your example is that there is NO 'Access-Control-Allow-Origin: *' http header at your tiles!

Check the headers either with the Chrome/Firefox browser developers tools, so use sites like this:
http://web-sniffer.net/?url=http://360as…/l2_r_02_02.jpg

Here as comparions a tile from the Tokyo example: (hosted on Amazons Cloudfrount CDN servers)
http://web-sniffer.net/?url=http://d8d91…/4/l6_r_4_1.jpg

The 'Access-Control-Allow-Origin' header is very important for loading files from other servers in HTML5.

Some browser still allow loading images without that header, but then they require not setting the CORS flag on image on the client-side - this can be done in krpano with the cros="off" setting. Normally (=according to the CORS specification) the 'autonomy' CORS setting should also allow loading images without Access-Control-Allow-Origin header, but many browsers seems to ignore that.

So as conclusion - ALWAYS set the Access-Control-Allow-Origin on the server when loading images from other domain - then it should work without problems anywhere.

About the server setup itself - this depends on the server software and provider itself - please see also here:
http://enable-cors.org/server.html

And when using CDN servers keep in mind that they typically would cache the headers too, so that the cached files need to invalidated when changing the headers!

Best regards,
Klaus

4

Tuesday, July 2nd 2013, 2:57pm

any suggestions on what to do on the bucket to make it work?
i did exactly what they said :|

Thanks,
Rares

5

Tuesday, July 2nd 2013, 6:08pm

Hi,

sorry, but I have no experiences with Amazon S3 storage or how to setup it...

...but as long as the 'Access-Control-Allow-Origin: *' header isn't there here it is not correct:
http://web-sniffer.net/?url=http://360as…/l2_r_02_02.jpg

Best regards,
Klaus

6

Monday, November 24th 2014, 7:11pm

Amazon CORS works only when in the request, the header "Origin" is present. Simple example in curl:

curl -v -H "Origin: https://localhost" "http://assets.XXXX.com.s3.amazonaws.com/whatever.jpg"


< HTTP/1.1 200 OK

< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: GET
< Access-Control-Expose-Headers: x-amz-server-side-encryption, x-amz-request-id, x-amz-id-2
< Access-Control-Max-Age: 3000
< Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
< Last-Modified: Mon, 24 Nov 2014 11:06:13 GMT
< ETag: "16b05db1fc883a053cc5b60274ddca73"
< Accept-Ranges: bytes
< Content-Type: application/octet-stream
< Content-Length: 578256
< Server: AmazonS3

When this header is not present, Amazon bucket does not return the needed Access-Control-Allow-Origin. My question is then, how krpano has to be configured to send this header within the image fetch request? <security cors=""></security> is not helping...

7

Monday, November 24th 2014, 8:51pm

My question is then, how krpano has to be configured to send this header within the image fetch request?
See here:
http://krpano.com/docu/xml/#security.cors

Try using "anonymous" or "use-credentials" when "" doesn't work for you.

Sam Rohn

Trainee

Posts: 109

Location: Brooklyn, New York

Occupation: 360° VR Photographer

  • Send private message

8

Tuesday, November 25th 2014, 5:18am

amazon S3

i wrote up a tutorial for configuring AWS S3 for krpano and other panoramas here, CORS config info included -

http://www.panopress.org/forums/topic/ho…eb-services-s3/

just configure your bucket as shown in the tutorial and upload your panos, all permissions and cors etc will be set properly for all files automatically, no need to make any changes to krpanotools output files or set file permissions manually etc

sam
Sam Rohn :: 360° Panoramic Photography :: Location Scout :: New York City :: www.samrohn.com

PanoPress :: WordPress Plugin for 360° Panoramas in Flash & HTML5 :: www.panopress.org

This post has been edited 1 times, last edit by "Sam Rohn" (Nov 26th 2014, 2:59am)


9

Wednesday, November 26th 2014, 9:59am

The answer from Sam worked. You need both, to add CORS configuration and to add Policy bucket through the amazon S3 panel. Nothing else is required from the xml side.

Thanks !

10

Wednesday, December 10th 2014, 2:24pm

create virtual tours site . ?? PLEASE!!

hello,
I would like to know what I need to learn to use KRPANO ? would like to offer this service to future customers.
Thank you !

This post has been edited 1 times, last edit by "marciotrix" (Dec 12th 2014, 4:19pm)