登录SPA后使用Cloud IAP特殊URL的问题

时间:2018-06-28 06:40:10

标签: nginx google-cloud-platform google-iap

我一直在使用Google Cloud IAP保护https://some-domain下的Web应用程序。但是,使用nginx +静态SPA访问Cloud IAP特殊网址时,我发现了一个问题。我发现如果未登录,我可以访问https://cloud.google.com/iap/docs/special-urls-howto中指定的特殊URL。因此,如果没有登录,访问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合作吗?

谢谢。

2 个答案:

答案 0 :(得分:1)

要使服务工作者使用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的请求,因为IAP中的特殊URL均以下划线_为前缀。

  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;
        }
    }
    

答案 1 :(得分:0)

我们实际上可以使用此选项:

  1. 如果我们真的不需要渐进式Web应用,请禁用服务工作者
  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;
      }
    }

要调试您的Service Worker应用程序,您实际上可以使用google chrome:

chrome:// inspect /#service-workers