Überfluss

Die Übereignung des Datenbestandes von Stack Overflow an OpenAI trägt (wie bereits von Kathrin Passig im Techniktagebuch notiert) Früchte. Beim Test mit einem bereits gelösten Problem liefert ChatGPT schon nach der ersten Rückfrage die gewünschte Lösung:

Q: When I load a website containing inline SVG code, the browser warns that this code violates the strict Content Security Policy provided by the webserver as an HTTP header, and does not render the SVG code properly. How can I circumvent the warning and get the intended rendering without loosening the security policy by allowing 'unsafe-inline' styles?

A: External SVG files are the most straightforward solution, as they fully comply with CSP without allowing any inline content. CSP nonce and hash-based CSP provide flexibility while maintaining inline code security.

Using <use> and external references keeps the SVG reusable and clean.

Moving styles to external CSS helps to avoid inline styles altogether.

These approaches will allow you to render SVGs properly while adhering to a strict Content Security Policy.

Q: I would like to keep the inline SVG, and not switch to external SVG files. Furthermore, I cannot create a dynamic nonce for the static SVG code, and it is neither feasible to compute hashes for all SVG style attributes or to move or remove all style attributes. Is there another way to change something about the inline SVG and avoid the CSP violation?

A: To avoid CSP violations with inline SVG:

Convert style attributes to SVG presentation attributes.

This maintains the inline SVG structure while preventing the CSP warning.

Most common styles like fill, stroke, and font-family can be easily translated into presentation attributes, which do not violate CSP.

By using presentation attributes, you can ensure your inline SVG is both secure and rendered correctly without needing to relax your CSP.