Service Workerでオフラインでもhostnameは取得できるか?

Service Workerを使うとオフライン環境でもキャッシュからJavaScriptなどのリソースを読み込んで実行することができるようになります。

気になったのはキャッシュからリソースを取得したときに正しい「ホスト名」が取得できるのかどうか?

例えばWebアプリケーションの不正利用を防止するために、JavaScriptが返すホスト名がホワイトリストに含まれるかをチェックすることがあります。これによりホスト名が正しくなければ起動しないなどの措置をとることができます。しかしホスト名が正しく取得できなければ、このチェック機能は働きません。

そこでServiceWorkerを使ってキャッシュから取得したJavaScriptの場合、location.hostnameで取得されるホスト名がどうなるのかを検証してみました。

Service Workerの準備

Service Workerの使い方についてはこちらを参考にしました。

https://developers.google.com/web/fundamentals/primers/service-workers?hl=ja

以下のindex.htmlはlocation.hostnameで取得したホスト名を表示する単純なページです。

Service Workerによってキャッシュに登録されて、オフラインでも動作するようになっています。

index.html

<p id="hostname"></p>

<script type="text/javascript">
  //Service Workerの登録
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
      navigator.serviceWorker.register('./worker.js').then(function(registration){
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
      }, function(err) {
        console.log('ServiceWorker registration failed: ', err);
      });
    });
  }

  //ホスト名の取得と表示
  document.getElementById("hostname").textContent = location.hostname;
</script>

worker.js

const CACHE_NAME = 'get_hostname';
const urlsToCache = [
  './index.html',
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(urlsToCache);
    })
  );
});

self.addEventListener('fetch', (event) => {
  if(!(event.request.url.indexOf('http') === 0)) return;
  event.respondWith(
    caches.match(event.request).then((response) => {
      if (response) {
        return response;
      }
      
      let fetchRequest = event.request.clone();

      return fetch(fetchRequest).then((response) => {
        if (!response || response.status !== 200 || response.type !== 'basic') {
          return response;
        }

        let responseToCache = response.clone();

        caches.open(CACHE_NAME).then((cache) => {
          cache.put(event.request, responseToCache);
        });

        return response;
      });
    })
  );
});

Service Workerでhostnameは取得できるのか?

実際に試してみます。デモページ:https://apps.webtechdays.com/demos/00862/

  • 左がWebページ画面(オフライン状態)、右がChromeのデベロッパーコンソールです。

Service Workeによってオフライン状態になってもページにアクセスできます。

またキャッシュからでも「ホスト名は取得可能」であることがわかりました。

 

 

 

Related Posts