From bf2fcc6641643018bd5224ec2f8308173d54cfa4 Mon Sep 17 00:00:00 2001 From: Pierre <397503+bemble@users.noreply.github.com> Date: Mon, 9 May 2022 23:47:05 +0200 Subject: [PATCH 1/6] feat(pwa): enhance connectivity checks Also add support to auth proxy such as Authelia --- src/components/ConnectivityChecker.vue | 25 +++++++++++++++++++++++++ vue.config.js | 3 +++ 2 files changed, 28 insertions(+) diff --git a/src/components/ConnectivityChecker.vue b/src/components/ConnectivityChecker.vue index 02cbd7f..a717bcf 100644 --- a/src/components/ConnectivityChecker.vue +++ b/src/components/ConnectivityChecker.vue @@ -29,15 +29,40 @@ export default { }, false ); + window.addEventListener( + "online", + function () { + that.checkOffline(); + }, + false + ); + window.addEventListener( + "offline", + function () { + this.offline = true; + }, + false + ); }, methods: { checkOffline: function () { + if (!navigator.onLine) { + this.offline = true; + return; + } + + // extra check to make sure we're not offline let that = this; return fetch(window.location.href + "?alive", { method: "HEAD", cache: "no-store", + redirect: "manual" }) .then(function (response) { + // opaqueredirect means request has been redirected, to auth provider probably + if (response.type === "opaqueredirect" && !response.ok) { + window.location.reload(true); + } that.offline = !response.ok; }) .catch(function () { diff --git a/vue.config.js b/vue.config.js index 410acc8..1645c2f 100644 --- a/vue.config.js +++ b/vue.config.js @@ -26,4 +26,7 @@ module.exports = { msTileImage: "assets/icons/icon-any.png", }, }, + devServer: { + disableHostCheck: true + }, }; From 98b460d6fe0e09cbdbf37f882f5e5bf7daa48e73 Mon Sep 17 00:00:00 2001 From: Pierre <397503+bemble@users.noreply.github.com> Date: Tue, 10 May 2022 09:46:42 +0200 Subject: [PATCH 2/6] fix(auth): add timestamp in URL to prevent infinite redirection loop --- src/components/ConnectivityChecker.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/ConnectivityChecker.vue b/src/components/ConnectivityChecker.vue index a717bcf..1c677d2 100644 --- a/src/components/ConnectivityChecker.vue +++ b/src/components/ConnectivityChecker.vue @@ -17,6 +17,9 @@ export default { }; }, created: function () { + if (/t=\d+/.test(window.location.href)) { + window.history.replaceState({}, document.title, window.location.pathname); + } let that = this; this.checkOffline(); @@ -61,7 +64,7 @@ export default { .then(function (response) { // opaqueredirect means request has been redirected, to auth provider probably if (response.type === "opaqueredirect" && !response.ok) { - window.location.reload(true); + window.location.href = window.location.href + "?t="+(new Date().valueOf()); } that.offline = !response.ok; }) From 4353f5e03658778b526dca6b7dd3f5bd6e31e121 Mon Sep 17 00:00:00 2001 From: Pierre <397503+bemble@users.noreply.github.com> Date: Mon, 16 May 2022 14:52:46 +0200 Subject: [PATCH 3/6] feat(auth): handle unauthorized request in connectivity Reload page without cache if 401 and 403 status in response --- src/components/ConnectivityChecker.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ConnectivityChecker.vue b/src/components/ConnectivityChecker.vue index 1c677d2..0d7e79f 100644 --- a/src/components/ConnectivityChecker.vue +++ b/src/components/ConnectivityChecker.vue @@ -63,7 +63,7 @@ export default { }) .then(function (response) { // opaqueredirect means request has been redirected, to auth provider probably - if (response.type === "opaqueredirect" && !response.ok) { + if ((response.type === "opaqueredirect" && !response.ok) || [401, 403].indexOf(response.status) != -1) { window.location.href = window.location.href + "?t="+(new Date().valueOf()); } that.offline = !response.ok; From f64278d41d9850461871c1c7908f0c35cbca05cd Mon Sep 17 00:00:00 2001 From: Pierre <397503+bemble@users.noreply.github.com> Date: Mon, 30 May 2022 17:03:28 +0200 Subject: [PATCH 4/6] feat(connectivity): change query parameter to change connectivity Always use timestamp as query parameter instead of alive --- src/components/ConnectivityChecker.vue | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/ConnectivityChecker.vue b/src/components/ConnectivityChecker.vue index 0d7e79f..f2be652 100644 --- a/src/components/ConnectivityChecker.vue +++ b/src/components/ConnectivityChecker.vue @@ -56,7 +56,8 @@ export default { // extra check to make sure we're not offline let that = this; - return fetch(window.location.href + "?alive", { + const aliveCheckUrl = window.location.href + "?t="+(new Date().valueOf()); + return fetch(aliveCheckUrl, { method: "HEAD", cache: "no-store", redirect: "manual" @@ -64,7 +65,7 @@ export default { .then(function (response) { // opaqueredirect means request has been redirected, to auth provider probably if ((response.type === "opaqueredirect" && !response.ok) || [401, 403].indexOf(response.status) != -1) { - window.location.href = window.location.href + "?t="+(new Date().valueOf()); + window.location.href = aliveCheckUrl; } that.offline = !response.ok; }) From 132e9a0df516b50c854178ccb726cf9d9dc514fa Mon Sep 17 00:00:00 2001 From: Pierre <397503+bemble@users.noreply.github.com> Date: Mon, 30 May 2022 17:04:21 +0200 Subject: [PATCH 5/6] feat(auth): do not handle redirection in getConfig It will be handled by connectivity checker --- src/App.vue | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/App.vue b/src/App.vue index 515177e..a60c242 100644 --- a/src/App.vue +++ b/src/App.vue @@ -231,13 +231,7 @@ export default { }, getConfig: function (path = "assets/config.yml") { return fetch(path).then((response) => { - if (response.redirected) { - // This allows to work with authentication proxies. - window.location.href = response.url; - return; - } - - if (response.status == 404) { + if (response.status == 404 || response.redirected) { this.configNotFound = true; return {}; } From 95249e11255beb8b85f904c54429b353fca40b9e Mon Sep 17 00:00:00 2001 From: Pierre <397503+bemble@users.noreply.github.com> Date: Mon, 30 May 2022 17:04:41 +0200 Subject: [PATCH 6/6] doc(auth): add auth proxy documentation --- docs/configuration.md | 3 ++- docs/troubleshooting.md | 6 ++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/docs/configuration.md b/docs/configuration.md index 84a7ea7..c240077 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -25,7 +25,8 @@ header: true # Set to false to hide the header footer: '

Created with ❤️ with bulma, vuejs & font awesome // Fork me on

' # set false if you want to hide it. columns: "3" # "auto" or number (must be a factor of 12: 1, 2, 3, 4, 6, 12) -connectivityCheck: true # whether you want to display a message when the apps are not accessible anymore (VPN disconnected for example) +connectivityCheck: true # whether you want to display a message when the apps are not accessible anymore (VPN disconnected for example). + # You should set it to true when using an authentication proxy, it also reloads the page when a redirection is detected when checking connectivity. # Optional: Proxy / hosting option proxy: diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md index 649e5a6..10d6c2d 100644 --- a/docs/troubleshooting.md +++ b/docs/troubleshooting.md @@ -17,3 +17,9 @@ To resolve this, you can either: * Host all your target service under the same domain & port. * Modify the target server configuration so that the response of the server included following header- `Access-Control-Allow-Origin: *` (). It might be an option in the targeted service, otherwise depending on how the service is hosted, the proxy or web server can seamlessly add it. * Use a cors proxy server like [`cors-container`](https://github.com/imjacobclark/cors-container), [`cors-anywhere`](https://github.com/Rob--W/cors-anywhere) or many others. + +## I am using an authentication proxy and homer says I am offline + +This should be a configuration issue. +* Make sure the option `connectivityCheck` is set to `true` in configuration. +* Check your proxy configuration, the expected behavior is to redirect user using a 302 to the login page when user is not authenticated.