HTMLIFrameElement.allowPaymentRequest — Eigenschaft · JavaScript-Referenz

Signatur

HTMLIFrameElement.allowPaymentRequest

Beschreibung

Die Eigenschaft allowPaymentRequest des HTMLIFrameElement-Interfaces bildet das Inhaltsattribut allowpaymentrequest eines <iframe> ab. Ist sie true, darf das eingebettete Dokument – auch wenn es von einem anderen Ursprung (Origin) stammt – über new PaymentRequest(...) einen Bezahlvorgang starten. Ohne diese Freigabe wirft der Konstruktor in Cross-Origin-Iframes einen SecurityError.

Die Eigenschaft ist eine reine Attribut-Abbildung: Beim Lesen gibt sie true zurück, wenn das Attribut vorhanden ist; beim Setzen auf true wird das Attribut hinzugefügt, bei false entfernt. Die Änderung wirkt erst beim nächsten Laden (Navigieren) des Iframes, nicht auf ein bereits geladenes Dokument.

Wichtig: Das Attribut und die Eigenschaft wurden aus der HTML-Spezifikation entfernt und durch die Permissions Policy ersetzt. Der heutige Weg ist <iframe allow="payment"> bzw. iframe.allow = "payment". Neuer Code sollte allowPaymentRequest nicht mehr verwenden; die Eigenschaft ist höchstens für Feature-Erkennung oder das Verständnis alten Codes relevant.

Rückgabewert

Typ

boolean | undefined

Beschreibung

true, wenn das Attribut allowpaymentrequest gesetzt ist, sonst false. In Browsern ohne Unterstützung ist die Eigenschaft nicht vorhanden und liefert undefined.

Beispiele

Feature-Erkennung: Wird die Eigenschaft überhaupt unterstützt?

const iframe = document.createElement('iframe');

// 'in' prüft, ob der Browser die Eigenschaft kennt
const unterstuetzt = 'allowPaymentRequest' in iframe;
console.log('allowPaymentRequest unterstützt:', unterstuetzt);
console.log('Wert:', iframe.allowPaymentRequest);

allowPaymentRequest unterstützt: false Wert: undefined

Moderner Ersatz: Zahlungen per Permissions Policy freigeben

const iframe = document.createElement('iframe');

// Empfohlener Weg: Permissions Policy über das allow-Attribut
iframe.allow = 'payment';
iframe.src = 'https://checkout.example.com/zahlung';
document.body.append(iframe);

console.log(iframe.getAttribute('allow'));

payment

Abwärtskompatibel: altes Attribut und allow gemeinsam setzen

const erlaubeZahlung = (iframe) => {
  // Moderner Mechanismus (alle aktuellen Browser mit Payment Request API)
  const bestehend = iframe.allow ? iframe.allow.split(';').map((s) => s.trim()) : [];
  if (!bestehend.includes('payment')) bestehend.push('payment');
  iframe.allow = bestehend.filter(Boolean).join('; ');

  // Veralteter Mechanismus nur, wenn der Browser ihn kennt
  if ('allowPaymentRequest' in iframe) {
    iframe.allowPaymentRequest = true;
  }
};

const frame = document.createElement('iframe');
frame.allow = 'fullscreen';
erlaubeZahlung(frame);
frame.src = 'https://shop.example.net/kasse';
document.body.append(frame);

console.log(frame.allow);

fullscreen; payment

Im eingebetteten Dokument: Fehlende Freigabe erkennen

// Code innerhalb des Cross-Origin-Iframes
const starteZahlung = async () => {
  try {
    const request = new PaymentRequest(
      [{ supportedMethods: 'https://pay.example.com' }],
      { total: { label: 'Summe', amount: { currency: 'EUR', value: '19.99' } } }
    );
    const response = await request.show();
    await response.complete('success');
  } catch (err) {
    if (err.name === 'SecurityError') {
      console.warn('Zahlung im Iframe nicht erlaubt – fehlt allow="payment"?');
    } else {
      console.error(err);
    }
  }
};

document.querySelector('#bezahlen').addEventListener('click', starteZahlung);

Zahlung im Iframe nicht erlaubt – fehlt allow="payment"?

// Wichtig · Fallstricke

Veraltet und nicht standardisiert: allowpaymentrequest wurde aus dem HTML-Standard entfernt. Aktuelle Versionen von Chrome, Edge, Firefox und Safari stellen die Eigenschaft nicht (mehr) bereit. Verwende stattdessen allow="payment" (Permissions Policy).
Wirkt nicht rückwirkend: Wie bei allow gilt eine Änderung erst beim nächsten Laden des Iframes. Setze Freigaben daher vor dem Zuweisen von src oder lade das Iframe neu.
Sicherheit: Gib Zahlungsberechtigungen nur Iframes vertrauenswürdiger Ursprünge. Mit allow="payment https://checkout.example.com" lässt sich die Freigabe auf bestimmte Origins beschränken. Der Server kann die Freigabe zusätzlich per HTTP-Header Permissions-Policy: payment=(self "https://checkout.example.com") einschränken; der Header überstimmt das Attribut.
Sandbox: In einem sandbox-Iframe ohne allow-scripts kann die Payment Request API auch mit Freigabe nicht aufgerufen werden. Außerdem ist ein sicherer Kontext (HTTPS) Voraussetzung.
Gleich-Origin-Iframes benötigen die Freigabe nicht, da die Standard-Allowlist für payment 'self' ist.

Siehe auch

HTMLIFrameElement.allowFullscreen HTMLIFrameElement.contentDocument HTMLIFrameElement.allow HTMLIFrameElement.credentialless HTMLIFrameElement.browsingTopics