This is a problem solely occuring with Safari (my current version being 17.6). Neither Chrome nor Firefox show any issues with this CSP header value.
The issue is about the style-src-elem directive, but for completeness sake, the full Content-Security-Policy – formatted over multiple lines for readability – is this:
Content-Security-Policy:
default-src 'none'
; base-uri 'self'
; connect-src 'self'
; font-src 'self'
https://fonts.gstatic.com
; form-action 'self'
; frame-ancestors 'none'
; img-src 'self'
data:
; script-src-attr 'unsafe-inline'
; script-src-elem 'self'
; style-src-attr 'unsafe-inline'
; style-src-elem 'self'
'unsafe-inline'
https://fonts.googleapis.com
The Safari console reports:
Refused to loadhttps://fonts.googleapis.com/css2?family=Material+Symbols+Outlinedbecause it appears in neither thestyle-srcdirective nor thedefault-srcdirective of the Content Security Policy.
Refused to loadhttps://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swapbecause it appears in neither thestyle-srcdirective nor thedefault-srcdirective of the Content Security Policy.
Refused to loadhttps://example.com/app/styles.cssbecause it appears in neither thestyle-srcdirective nor thedefault-srcdirective of the Content Security Policy.
Where the “offending” origins are:
<html>
<head>
...
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="styles.css"></head>
</head>
...
According to the MDN CSP:style-src-elem spec:
The HTTP Content-Security-Policy (CSP)
style-src-elemdirective specifies valid sources for stylesheet<style>elements and<link>elements withrel="stylesheet".
Which AFAICT is exactly what I’m using this directive for.
Also, MDN’s browser compatibility chart claims that Safari has full support for this directive from version 15.4 onward.
So, why does this newer Safari appear to ignore the style-src-elem directive?
Adding a style-src 'self' https://fonts.googleapis.com directive does appear to be a “fix”, but I don’t like the redundancy.
Similarly, just replacing style-src-elem with style-src also “fixes”, but I don’t like using fallbacks when more specific directives that should do the job exist.
And in any case, neither “fix” brings me any closer to understanding why the original doesn’t work as intended in the first place.