由于PWA服务工作者缓存,因此Auth basic 401页面不提示输入凭据

时间:2018-09-17 03:03:57

标签: nginx basic-authentication progressive-web-apps http-status-code-401 offline-caching

我正在开发站点(例如dev.example.com)上使用基本身份验证,但遇到了一个问题,即我的站点在初次访问后没有提示我输入凭据。换句话说,如果清除浏览器缓存,将显示提示,并且可以正常登录。该会话仍然可以正常运行,但是在该会话过期并且我自动注销后,不再提示我输入凭据。

这也意味着,如果我点击“取消”,就再也不会提示我。

刷新并不能解决问题,我首次访问后能够查看网站的唯一方法是每次都使用隐身窗口,或者清除缓存并刷新页面。

该页面显示默认的401 nginx错误页面,响应为实际的401错误。

401 page headers

我尝试将auth_basic行移动到配置的各个部分,但这似乎没有效果。我没有自定义的401错误页面,因此我没有指定error_page 401,这可能是个问题吗?

我也发现了这个问题,IE, FireFox, Opera, and Safari don't display BASIC auth prompt on successive 401 responses from server

通过在标头上设置www-authenticate可以解决上述问题,但这是为我定义的。

这与配置有关吗?这是我当前的配置:

server {
    server_name dev.MYSITE.com;

    root /srv/dev/MYSITE/current;
    index index.php index.html index.htm;

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy true;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_max_temp_file_size 0;
        proxy_pass http://localhost:3010;
        proxy_redirect off;
        proxy_read_timeout 240s;

        # Basic HTTP Auth
        auth_basic "MYSITE Dev Site";
        auth_basic_user_file /etc/nginx/sites-password/MYSITE.htpasswd;
    }


    error_page 500 502 503 504 /50x.html;
    location = /50x.html {

    }

    location ~ /\.ht {
        deny all;
    }

    listen 443 ssl http2; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/dev.MYSITE.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/dev.MYSITE.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
    if ($host = dev.MYSITE.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    listen 80;
    server_name dev.MYSITE.com;

    return 404; # managed by Certbot
}

注意:我正在使用nginx作为Node.js服务器的反向代理。

编辑:我不确定为什么这会有意义,但这是支持脱机模式的渐进式Web应用程序(PWA)。我只是注意到,如果绕过Service Worker的缓存,则提示会正确显示(在开发工具-> Application-> Service Worker-> Bypass for network中绕过)。

更新:看来我的服务工作者正在缓存401响应并阻止该提示。似乎我以前可能需要找错地方。

Response cached by service worker

更新2:现在看来这是一个“功能” ...
https://bugs.chromium.org/p/chromium/issues/detail?id=623464

1 个答案:

答案 0 :(得分:0)

我建议处理response.status值。如果不是200(response.ok),则您可能不想缓存它。

对于处理诸如不同的响应状态代码,内容类型,路由等场景,我建议通过某种if / else或switch / case逻辑运行响应。

应用程序越复杂,服务人员的缓存就会变得越复杂:)