Web-App-Manifest wirft 401 hinter Basic Auth

  • contao5
  • twig
  • staging
  • basic-auth
  • favicon
  • pwa

Symptom

Auf einer Staging-Domain, die per HTTP Basic Auth geschützt ist, meldet die Browser-Konsole:

Failed to load resource: the server responded with a status of 401 ()
Manifest fetch from https://example.de/files/inhalte/favicon/site.webmanifest failed, code 401

Die Seite selbst lädt normal, Favicons und Apple-Touch-Icon auch. Nur das Manifest nicht.

Ursache

Der Browser holt das Web-App-Manifest per Default im Credentials-Modus omit — also ohne die gespeicherten Basic-Auth-Zugangsdaten. Für das Dokument und für normale Subresources (Bilder, CSS, JS) schickt er sie mit, für das Manifest nicht.

Der Server antwortet deshalb mit:

HTTP/2 401
www-authenticate: Basic realm="Geschützter Bereich"

Zur Prüfung reicht ein Blick auf die Header:

curl -sI https://example.de/files/inhalte/favicon/site.webmanifest | head

Kommt dort ein www-authenticate: Basic, ist es dieser Fall. Ein 404 wäre dagegen ein echter Pfadfehler.

Lösung

crossorigin="use-credentials" am Manifest-Link setzen — im Projekt-fe_page.html.twig:

{% block head %}
    {{ parent() }}

    <link rel="icon" type="image/png" href="/files/inhalte/favicon/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="/files/inhalte/favicon/favicon.svg" />
    <link rel="shortcut icon" href="/files/inhalte/favicon/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/files/inhalte/favicon/apple-touch-icon.png" />
    <meta name="apple-mobile-web-app-title" content="Beispiel" />
    <link rel="manifest" href="/files/inhalte/favicon/site.webmanifest" crossorigin="use-credentials" />
{% endblock %}

Damit läuft die Manifest-Anfrage mit denselben Credentials wie das Dokument.

Gilt auch auf der Live-Domain

Das Attribut kann dauerhaft im Template bleiben. Ohne Basic Auth ist die Anfrage same-origin, die Credentials werden mitgeschickt und der Server ignoriert sie — der Effekt ist derselbe wie vorher. Es muss also nicht vor dem Go-live wieder raus.

Merke

  • Der Realm-Text in der www-authenticate-Zeile verrät, dass der Schutz vom Webserver kommt (nginx/Apache), nicht von Contao.
  • Twig-Template-Änderungen brauchen in einer Prod-Installation ein vendor/bin/contao-console cache:clear --env=prod, sonst greift die Anpassung nicht.
  • Der Icon-Generator (realfavicongenerator o. ä.) liefert den Manifest-Link ohne crossorigin. Bei jedem passwortgeschützten Staging also nachziehen.