ベクトルタイルは HTTPS で CORS しよう

タイルは自分のドメインのサイトで消費するだけではなく、他のドメインのサイトでも消費してもらった方が面白いです。他のドメインのサイトでも消費してもらえるベクトルタイルを提供するためには、次の２点をクリアしておくことがとても望ましいです。

ベクトルタイルを消費するサイトが HTTPS で提供されているときに mixed content になって問題が生じないよう、ベクトルタイルは HTTP ではなくて HTTPS で提供されていることが望ましいです。
ベクトルタイルを他のドメインで消費してもらうようにするためには、クロスオリジンリソース共有（Cross-Origin Resource Sharing; CORS）を有効にする必要があります。

上記のうち、1. を実現する方法はほぼ自明ですが、2.を実現するとはどういうことか、それほど知られているわけではないので、簡単にご紹介します。

CORS されているとはどういうことか

CORS されているということは、ウェブブラウザがウェブの安全性のためにしかるべき手続きを取った時に、データを提供するサーバ側が、提供するコンテンツをドメインを超えて使用しても良いということを表明するということです。

プロトコルのレベルでの実際の手続きについては、例えば https://en.wikipedia.org/wiki/Cross-origin_resource_sharing が参考になると思います。

具体的な挙動の大雑把な理解の仕方は「サーバから access-control-allow-origin: * 」というレスポンスヘッダが戻る、というものです。地理院タイルのサーバに対して、http://www.example.com からのアクセスに対して CORS を許すか問い合わせる例を示すと次の通りです。

$ curl -X OPTIONS -H "Origin: http://www.example.com" -H "Access-Control-Request-Method: GET" -D - -o - https://cyberjapandata.gsi.go.jp/
HTTP/2 204 
date: Sat, 09 Dec 2017 21:07:52 GMT
access-control-allow-origin: *
access-control-allow-methods: GET, HEAD
server: AmazonS3
vary: Origin,Access-Control-Request-Headers,Access-Control-Request-Method
age: 23
x-cache: Hit from cloudfront
via: 1.1 489b8983b91eb29fd0875b6f862935c2.cloudfront.net (CloudFront)
x-amz-cf-id: vKXd9x7vJOwqgqHm0RURTAJdJlFsK5QqWbb_5zecwjias3vfH3_pFg==

「access-control-allow-origin: * / access-control-allow-methods: GET, HEAD」というレスポンスヘッダが戻っていることから、地理院タイルのサーバは、GET と HEAD に対しては、CORS していることがわかります。

gh-pages はこの要件をデフォルトでクリア

GitHub の gh-pages は「HTTPS で CORS」という要件をデフォルトでクリアしています。静的なコンテンツに限り、アクセス制限をかけることなく共有するというユースケースに特化するという gh-pages の思想からすると、このデフォルトは非常にセンスが良いと思います。gh-pages のプロダクトマネージャのこだわりがわかります。

GitLab Pages でも、https://gitlab.com/gitlab-org/gitlab-pages/issues/66 にあるように、CORS できるようにしているようですが、実際に CORS されているかについては、確認してみる必要があると思っています。