Content Security Policy (CSP) Fehler in der Console
Inhaltsverzeichnis
Was bedeutet Content Security Policy (CSP)?
Websites können eine Content Security Policy (CSP) einrichten, indem sie entweder den HTTP-Response-Header Content-Security-Policy setzen oder ein meta-Tag mit dem Attribut http-equiv=“Content-Security-Policy” im HTML verwenden.
Statt allen Inhalten vom Server automatisch zu vertrauen, legt die CSP fest, welche Quellen als sicher gelten. Der Browser führt dann nur Skripte, Styles oder andere Ressourcen aus, die von diesen vertrauenswürdigen Quellen stammen.
So erkennst du den Fehler
Du musst deine CSP anpassen, um Varify.io zu nutzen, wenn:
- Du einen Fehler wie diesen in deiner Browser Konsole siehst:
- This page uses security features that are incompatible with the varify.io editor.
- Du einen Fehler wie diesen in den Google Developer Tools siehst:
- Refused to execute editor.varify.io because it violates the following Content Security Policy directive…
- Du einen Fehler wie diesen siehst:
- Content Security Policy of your site blocks the use of ‘eval’ in JavaScript.
So behebst du den Fehler
Wenn deine Website eine Content Security Policy (CSP) nutzt, trag bitte folgende Werte ein:
https://app.varify.io
https://editor.varify.io
Zusätzlich brauchst du in der Direktive script-src den Wert unsafe-eval.
Damit der Responsive Device Switcher funktioniert, muss deine Domain auch in den Direktiven frame-ancestors und frame-src angegeben werden.
Beispiel für eine passende CSP:
Content-Security-Policy: frame-ancestors {YOUR_DOMAIN}; frame-src {YOUR_DOMAIN}; script-src 'unsafe-eval' https://app.varify.io https://editor.varify.io;
Hinweis: Der Eintrag unsafe-eval ist notwendig, damit benutzerdefiniertes JavaScript innerhalb von Variationen ausgeführt werden kann.