Improve third-party storage access detection and cookie fallback

This commit is contained in:
Jon Koops 2023-05-23 11:42:34 +02:00 committed by Pedro Igor
parent b958d8b205
commit 98e5e9799b
4 changed files with 118 additions and 126 deletions

View file

@ -1,29 +1,58 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script>
if ("hasStorageAccess" in document) {
checkStorageAccess();
<script type="module">
// Check if the browser has granted us access to 3rd-party storage (such as cookies).
if (await hasStorageAccess()) {
// If so, signal support to the page embedding this iframe.
window.parent.postMessage("supported", "*");
} else {
placeTestCookie();
// Otherwise, attempt to place a test cookie to verify support.
attemptWithTestCookie();
}
function checkStorageAccess() {
document.hasStorageAccess().then(function (hasAccess) {
window.parent.postMessage(
hasAccess ? "supported" : "unsupported",
"*"
);
// See: https://developer.mozilla.org/en-US/docs/Web/API/Storage_Access_API/Using
async function hasStorageAccess() {
// If the Storage Access API is not implemented, assume we don't have access.
if (!("hasStorageAccess" in document)) {
return false;
}
const hasAccess = await document.hasStorageAccess();
// If we have access to unpartitioned cookies, signal support.
if (hasAccess) {
return true;
}
// Otherwise, check whether unpartitioned cookie access has been granted to another same-site embed.
const permission = await navigator.permissions.query({
name: "storage-access",
});
// If not, signal that there is no support.
if (permission.state !== "granted") {
return false;
}
// Otherwise, call requestStorageAccess() without a user interaction, and it should resolve automatically.
// But just to be sure, handle a possible exception in case this behavior changes in the future.
try {
await document.requestStorageAccess();
return true;
} catch (error) {
return false;
}
}
function placeTestCookie() {
document.cookie =
"KEYCLOAK_3P_COOKIE_SAMESITE=supported; Max-Age=60; SameSite=None; Secure";
function attemptWithTestCookie() {
// Place a cookie to test whether we can access cookies from 3rd-party storage.
document.cookie = "KEYCLOAK_3P_COOKIE_SAMESITE=supported; Max-Age=60; SameSite=None; Secure";
document.cookie = "KEYCLOAK_3P_COOKIE=supported; Max-Age=60";
// Then redirect to the page where we will read these cookies to confirm this.
window.location = "step2.html";
}
</script>

View file

@ -1,17 +1,20 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script>
var hasAccess = document.cookie.indexOf("KEYCLOAK_3P_COOKIE") !== -1;
<script type="module">
// Check if the previously placed cookies exist to detect support for 3rd-party access.
const hasAccess = document.cookie.includes("KEYCLOAK_3P_COOKIE");
// If so, clear the cookies, so they can no longer be used.
if (hasAccess) {
document.cookie = "KEYCLOAK_3P_COOKIE_SAMESITE=; Max-Age=0";
document.cookie = "KEYCLOAK_3P_COOKIE=; Max-Age=0";
}
// Signal 3rd-party access support to the page embedding this iframe.
window.parent.postMessage(hasAccess ? "supported" : "unsupported", "*");
</script>
</body>

View file

@ -1,125 +1,88 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script>
var init;
<script type="module">
window.addEventListener("message", onMessage);
function checkState(clientId, origin, sessionState, callback) {
var cookie = getCookie();
var checkCookie = function () {
if (clientId === init.clientId && origin === init.origin) {
var c = cookie.split("/");
if (sessionState === c[2]) {
callback("unchanged");
} else {
callback("changed");
}
} else {
callback("error");
}
};
if (!init) {
var req = new XMLHttpRequest();
var url = location.href.split("?")[0] + "/init";
url += "?client_id=" + encodeURIComponent(clientId);
url += "&origin=" + encodeURIComponent(origin);
req.open("GET", url, true);
req.onreadystatechange = function () {
if (req.readyState === 4) {
if (req.status === 204 || req.status === 1223) {
init = {
clientId: clientId,
origin: origin,
};
if (!cookie) {
if (sessionState != "") {
callback("changed");
} else {
callback("unchanged");
}
} else {
checkCookie();
}
} else {
callback("error");
}
}
};
req.send();
} else if (!cookie) {
if (sessionState != "") {
callback("changed");
} else {
callback("unchanged");
}
} else {
checkCookie();
}
}
function getCookie() {
var cookie = getCookieByName("KEYCLOAK_SESSION");
if (cookie === null) {
return getCookieByName("KEYCLOAK_SESSION_LEGACY");
}
return cookie;
}
function getCookieByName(name) {
name = name + "=";
var ca = document.cookie.split(";");
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) === 0) return c.substring(name.length, c.length);
}
return null;
}
function receiveMessage(event) {
async function onMessage(event) {
// Filter out any events that do not match the expected format of a 2-part string split by a space.
if (typeof event.data !== "string") {
return;
}
var origin = event.origin;
var data = event.data.split(" ");
if (data.length != 2) {
const data = event.data.split(" ");
if (data.length !== 2) {
return;
}
var clientId = data[0];
var sessionState = data[1];
// Extract data from event and verify status of session.
const [clientId, sessionState] = data;
const sessionStatus = await checkState(clientId, event.origin, sessionState);
function doStateCheck() {
checkState(clientId, event.origin, sessionState, function (result) {
event.source.postMessage(result, origin);
});
}
if (!("hasStorageAccess" in document)) {
doStateCheck();
return;
}
document.hasStorageAccess().then(function (hasAccess) {
if (!hasAccess) {
event.source.postMessage("error");
return;
}
doStateCheck();
});
// Signal session status to the page embedding this iframe.
event.source.postMessage(sessionStatus, event.origin);
}
window.addEventListener("message", receiveMessage, false);
let init;
async function checkState(clientId, origin, sessionState) {
const cookie = getSessionCookie();
// If not initialized, verify this client is allowed access with a call to the server.
if (!init) {
const url = new URL(`${location.origin}${location.pathname}/init`);
url.searchParams.set("client_id", clientId);
url.searchParams.set("origin", origin);
const response = await fetch(url);
if (!response.ok) {
return "error";
}
init = { clientId, origin };
}
// Signal a change in state if there is no cookie, and the session state is not empty.
if (!cookie) {
return sessionState !== "" ? "changed" : "unchanged";
}
// If the client and origin from the event match the verified ones from the server, signal if the cookie has changed.
if (clientId === init.clientId && origin === init.origin) {
const [, , cookieSessionState] = cookie.split("/");
return sessionState === cookieSessionState ? "unchanged" : "changed";
}
// Otherwise, if there is no match, then signal an error.
return "error";
}
function getSessionCookie() {
const cookie = getCookieByName("KEYCLOAK_SESSION");
if (cookie !== null) {
return cookie;
}
return getCookieByName("KEYCLOAK_SESSION_LEGACY");
}
function getCookieByName(name) {
const cookies = new Map();
for (const cookie of document.cookie.split(";")) {
const [key, value] = cookie.split("=").map((value) => value.trim());
cookies.set(key, value);
}
return cookies.get(name) ?? null;
}
</script>
</body>
</html>

View file

@ -123,9 +123,6 @@ public class LoginStatusIframeEndpointTest extends AbstractKeycloakTest {
response = client.execute(get);
assertEquals(200, response.getStatusLine().getStatusCode());
s = IOUtils.toString(response.getEntity().getContent(), "UTF-8");
assertTrue(s.contains("function getCookie()"));
assertEquals("CP=\"This is not a P3P policy!\"", response.getFirstHeader("P3P").getValue());
assertNull(response.getFirstHeader(BrowserSecurityHeaders.X_FRAME_OPTIONS.getHeaderName()));
assertEquals("frame-src 'self'; object-src 'none';", response.getFirstHeader(BrowserSecurityHeaders.CONTENT_SECURITY_POLICY.getHeaderName()).getValue());