CORS Quick Tester
client-side
URL à tester
GET (mode: 'cors')
GET (cors + credentials)
GET (mode: 'no-cors')
GET avec en-tête custom (préflight)
POST JSON (préflight)
XMLHttpRequest (GET)
Tester
(embeddable ?)
Tester
(embeddable ?)</button> <button id="btn-object">Tester <object> (PDF en ligne ?)</button> <span class="small">Ces tests montrent si la ressource peut être intégrée sans CORS (risques CSRF / clickjacking / mixed content).</span> </div> <div id="embed-zone" style="margin-top:10px;" class="grid"></div> </div> <div class="card"> <strong>Résultats</strong> <div id="out" class="mono" style="white-space:pre-wrap; margin-top:8px;"></div> <details> <summary>Ce que signifient les types de réponse</summary> <ul class="small"> <li><code>response.type === "basic"</code> : même origine (ou service worker). Peu probable ici.</li> <li><code>response.type === "cors"</code> : CORS autorisé, on peut lire le corps et certains en-têtes exposés.</li> <li><code>response.type === "opaque"</code> : CORS non autorisé (mode <kbd>no-cors</kbd> ou blocage), on ne peut rien lire.</li> </ul> </details> </div> <script> const $ = (id) => document.getElementById(id); const out = $("out"); function log(msg, cls=""){ const line = document.createElement("div"); if (cls) line.className = cls; line.textContent = msg; out.appendChild(line); } function sep(){ log("—".repeat(80), "small"); } function clearOut(){ out.textContent = ""; } async function readAllHeaders(headers){ // retourne un objet {header: value} pour les en-têtes lisibles (si CORS les expose) const obj = {}; try { for (const [k,v] of headers.entries()) { obj[k] = v; } } catch(e) { // quand type === "opaque", .entries() peut être inaccessible } return obj; } async function doFetch({mode="cors", method="GET", credentials="omit", customHeaders=null, body=null, desc=""}){ clearOut(); const url = $("url").value.trim(); log(`Test: ${desc}`); log(`URL: ${url}`); log(`fetch options: { method:${method}, mode:${mode}, credentials:${credentials} }`, "small"); const init = { method, mode, credentials }; if (customHeaders) init.headers = customHeaders; if (body) init.body = body; const t0 = performance.now(); try { const res = await fetch(url, init); const t1 = performance.now(); log(`Réponse reçue en ${(t1 - t0).toFixed(1)} ms`); log(`response.ok = ${res.ok}`); log(`response.status = ${res.status}`); log(`response.type = ${res.type}`); // "basic" | "cors" | "opaque" log(`response.url = ${res.url || "(inaccessible)"}`); // Headers: lisibles uniquement si CORS expose (sinon… rien) const headers = await readAllHeaders(res.headers); const keys = Object.keys(headers); log(`En-têtes lisibles (${keys.length}) :`, keys.length ? "ok" : "warn"); if (keys.length){ for (const k of keys) log(` ${k}: ${headers[k]}`, "small"); // Indices CORS const acao = headers["access-control-allow-origin"]; const acac = headers["access-control-allow-credentials"]; if (acao) log(`ACAO: ${acao}`, "ok"); if (acac) log(`ACAC: ${acac}`, "ok"); } else { log("Aucun en-tête lisible (probable blocage CORS ou aucun header exposé).", "warn"); } // Lecture du corps (si possible) try { const ct = res.headers.get ? res.headers.get("content-type") : null; if (res.type === "cors" && res.ok) { if (ct && ct.includes("application/json")){ const json = await res.json(); log("Corps JSON (aperçu) :", "ok"); log(JSON.stringify(json).slice(0, 800) + (JSON.stringify(json).length>800?"…":""), "small"); } else { const buf = await res.arrayBuffer(); log(`Corps lisible (${buf.byteLength} octets).`, "ok"); } } else { log("Corps non lisible (opaque ou bloqué).", "warn"); } } catch(e){ log("Erreur lors de la lecture du corps (probablement opaque).", "warn"); } } catch (e) { log(`Erreur réseau / CORS: ${e}`, "err"); } sep(); } function doXHR(){ clearOut(); const url = $("url").value.trim(); log("Test: XMLHttpRequest (GET)"); try { const xhr = new XMLHttpRequest(); xhr.open("GET", url, true); xhr.withCredentials = false; // mets à true pour tester les credentials const t0 = performance.now(); xhr.onreadystatechange = function(){ if (xhr.readyState === 4){ const t1 = performance.now(); log(`Réponse reçue en ${(t1 - t0).toFixed(1)} ms`); log(`status = ${xhr.status}`); // Accès au corps/headers dépend du CORS; souvent bloqué si non autorisé try { const ct = xhr.getResponseHeader("content-type"); log(`content-type: ${ct}`, ct ? "ok" : "warn"); } catch(e){ log("Impossible de lire les en-têtes (CORS).", "warn"); } sep(); } }; xhr.onerror = function(e){ log(`XHR error: ${e?.message||"unknown"}`, "err"); sep(); } xhr.send(); } catch(e) { log(`Exception XHR: ${e}`, "err"); sep(); } } function addEmbed(kind){ const url = $("url").value.trim(); const zone = $("embed-zone"); const wrap = document.createElement("div"); if (kind === "img"){ wrap.innerHTML = `<div class="small"><b><img></b> – si l'image charge, la ressource est embeddable comme image (pas une preuve CORS, mais utile anti-leak)</div> <img src="${url}" alt="test img" />`; } else if (kind === "iframe"){ wrap.innerHTML = `<div class="small"><b><iframe></b> – si le PDF s'affiche, il est embeddable (vérifier aussi X-Frame-Options / CSP)</div> <iframe src="${url}" width="100%" height="420">
`; } else if (kind === "object"){ wrap.innerHTML = `
<object>
– utile pour PDF/application; reflète l'embeddabilité
Impossible d’afficher l’objet.
`; } zone.prepend(wrap); } $("btn-get-cors").onclick = () => doFetch({ desc: "GET (mode: 'cors')", mode: "cors", method: "GET", credentials: "omit" }); $("btn-get-cred").onclick = () => doFetch({ desc: "GET (cors + credentials)", mode: "cors", method: "GET", credentials: "include" // test cookies/credentials; nécessite ACAO ≠ * + ACAC:true }); $("btn-get-nocors").onclick = () => doFetch({ desc: "GET (mode: 'no-cors')", mode: "no-cors", method: "GET", credentials: "omit" // Donne généralement response.type === "opaque" (inexploitable côté JS, mais utile pour détecter un chargement réseau) }); $("btn-preflight-get").onclick = () => doFetch({ desc: "GET avec en-tête custom (déclenche un préflight OPTIONS)", mode: "cors", method: "GET", credentials: "omit", customHeaders: { "X-Test-Header": "cors-probe" } }); $("btn-post-json").onclick = () => doFetch({ desc: "POST JSON (préflight) – si POST n’est pas autorisé CORS, ce sera bloqué", mode: "cors", method: "POST", credentials: "omit", customHeaders: { "Content-Type": "application/json", }, body: JSON.stringify({probe:true, time: Date.now()}) }); $("btn-xhr").onclick = () => doXHR(); $("btn-img").onclick = () => addEmbed("img"); $("btn-iframe").onclick = () => addEmbed("iframe"); $("btn-object").onclick = () => addEmbed("object");