Проблемы с использованием Cloud IAP Special URL после входа в SPA

Question

Я использую Google Cloud IAP для защиты своих веб-приложений под https://some -доменом . Однако я обнаружил проблему при обращении к специальным URL-адресам Cloud IAP с помощью nginx + static SPA. Я обнаружил, что если я не вошел в систему, я мог получить доступ к специальным URL-адресам, указанным в: https://cloud.google.com/iap/docs/special-urls-howto. Таким образом, у меня нет проблем с доступом к конечным точкам, таким как https://some-domain/_gcp_iap/identity и таким, если я не вошел в систему.

Однако после того, как я вошел в систему, я больше не мог получить доступ к специальным URL-адресам (/_gcp_iap/*) и вместо этого был перенаправлен на страницу ошибки SPA. Я заметил, что у меня есть это в моей конфигурации nginx:

location / {
    root    /usr/share/nginx/html;
    try_files  $uri $uri/ /index.html?/$request_uri;
}

Является ли эта конфигурация nginx причиной проблемы? Как мне решить это?

Обновление: Основная причина связана с поведением работника службы с перенаправлениями 3xx (обычно это происходит во время входа в систему / аутентификации). Возможно ли, чтобы работники службы работали вместе с IAP?

Спасибо.

Answer 1

Мы действительно можем использовать эту опцию:

1. отключите сервисного работника, если нам действительно не нужно прогрессивное веб-приложение
2. с использованием конфигурации nginx, в моем случае я использую kubernetes для развертывания моего бэкэнда и внешнего интерфейса, поэтому http://foo.bar will представляет мой foo deployment, расположенный в bar namespace. Переменная $domain будет заменена во время выполнения развертывания с помощью подстановки:

    server {
      listen 80;
      root   /usr/share/nginx/html;

      rewrite /_gcp_iap/[a-z_]*$ $domain permanent;

      location / {
        try_files $uri /index.html;
      }

      location /foo/bar {
        # Proxy pass for the backend service
        proxy_pass http://foo.bar;
      }
    }

Для отладки приложения вашего сервисного работника вы можете использовать Google Chrome:

хром: // инспектировать / # сервис-работники

Answer 2

Необходимо выполнить два шага, чтобы заставить сервисных работников работать с GCP IAP.

1. Ссылаясь на https://github.com/facebook/create-react-app/issues/2237, Я решил эту проблему, добавив следующий скрипт в мой скрипт сборки пряжи:

   const fs = require('fs')
   fs.readFile('build/service-worker.js', 'utf8', (error, data) => {
       if (error) {
           return console.log(error)
       }
   
       const result = data.replace(/isPathWhitelisted\(\[[^\]]+/g, 'isPathWhitelisted(["^(?!\\\\/_).*"');
       fs.writeFile('build/service-worker.js', result, 'utf8', (error) => {
           if (error) {
               return console.log(error)
           }
       })
   })
   

   Я использую create-react-app для создания своего приложения. По-видимому, сервисный работник, созданный create-react-app по умолчанию, обходит запросы, сделанные в IAP. Итак, я заменил существующий шаблон белого списка путей на новый: /^(?!\/_).*/, чтобы помешать работнику службы обходить запросы к IAP, поскольку все специальные URL-адреса в IAP начинаются с префикса _.

2. Отключите кэширование работника службы, изменив конфигурацию Nginx.

   location / {
   root    /usr/share/nginx/html;
       try_files   $uri /index.html;
   
       # disable service worker from being cached 
       location = /service-worker.js {
           expires off;
           add_header Cache-Control no-store;
           access_log off;
       }
   }