livebook-dev/livebook
1
1
Fork 0
mirror of https://github.com/livebook-dev/livebook.git synced 2025-10-25 12:56:13 +08:00
Code Issues Projects Releases Packages Wiki Activity

Link outside iframe when Livebook has no access to cookies (#1863)

Browse source
This commit is contained in:
Jonatan Kłosko 2023-04-13 21:32:00 +02:00 • committed by GitHub
parent 3352b0663f
commit 9fd7306c01
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/css/components.css
View file

@ -2,7 +2,7 @@
/* Buttons */
.button-base {
@apply px-5 py-2 rounded-lg border border-transparent font-medium text-sm whitespace-nowrap;
@apply inline-flex px-5 py-2 rounded-lg border border-transparent font-medium text-sm whitespace-nowrap;
}
.button-blue {

27
assets/js/app.js
View file

@ -66,9 +66,7 @@ function connect() {
// option enabled, which is the default. Without cookies access, the session
// is not stored, so CSRF tokens are invalid. Consequently, LV keeps reloading
// the page, as we try to connect the socket with invalid token. To work around
// this we need to ask to explicitly grant access to cookies, as outlined in (1).
//
// (1): https://developer.mozilla.org/en-US/docs/Web/API/Storage_Access_API
// this we tell the user to open Livebook outside the iframe.
if (document.hasStorageAccess) {
document.hasStorageAccess().then((hasStorageAccess) => {
@ -85,28 +83,21 @@ if (document.hasStorageAccess) {
</div>
<div class="mt-3 text-sm text-gray-300">
It looks like Livebook does not have access to cookies. This usually happens when
it runs in an iframe. To make the app functional you need to grant Livebook access
to its cookies explicitly.
it runs in an iframe. To make sure the app is fully functional open it in a new
tab directly.
</div>
<div>
<button id="grant-access" class="mt-6 button-base button-blue">
Grant access
</button>
<div class="mt-6">
<a id="open-app" class="button-base button-blue" target="_blank">
Open app
</a>
</div>
</div>
</div>
`;
overlayEl.querySelector("#open-app").href = window.location;
document.body.appendChild(overlayEl);
const grantAccessButtonEl = overlayEl.querySelector("#grant-access");
grantAccessButtonEl.addEventListener("click", (event) => {
document
.requestStorageAccess()
.then(() => window.location.reload())
.catch(() => console.log("Access to storage denied"));
});
}
});
} else {