issue:Scrapboxで外部のフォントを使えない
summary.icon
scrapboxではScrapbox:CSPにあるドメインしか許可されていないので、使えない外部フォントがある
問題
Scrapboxでフォントを使えない
Porterからは見えるのに
Safariからはうまく見えない
setting:コードブロックのフォントをRictyに
setting:コードブロックにアイコン
とかで発生
原因
scrapboxではScrapbox:CSPにあるものしか許可されていない
フォントなら
cdnjs.cloudflare.com
fonts.gstatic.com
エラーログをみるとCSPのディレクティブのせい
code:2024/02/17.log
Some resources are blocked because their origin is not listed in your site's Content Security Policy (CSP). Your site's CSP is allowlist-based, so resources must be listed in the allowlist in order to be accessed.
A site's Content Security Policy is set either via an HTTP header (recommended), or via a meta HTML tag.
To fix this issue do one of the following:
(Recommended) If you're using an allowlist for 'script-src', consider switching from an allowlist CSP to a strict CSP, because strict CSPs are more robust against XSS . See how to set a strict CSP .
Or carefully check that all of the blocked resources are trustworthy; if they are, include their sources in the CSP of your site. ⚠️Never add a source you don't trust to your site's CSP. If you don't trust the source, consider hosting resources on your own site instead.
1 directive
Resource Status Directive Source Location
https://cdn.jsdelivr.net/devicons/1.8.0/css/devicons.min.css blocked style-src-elem setting:%E3%82%B3%E3…E3%82%B3%E3%83%B3:0
Learn more: Content Security Policy - Source Allowlists
code:log
UserScript:test:1 Refused to load the stylesheet 'https://use.fontawesome.com/releases/v5.15.3/css/all.css?integrity=sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk&crossorigin=anonymous' because it violates the following Content Security Policy directive: "style-src 'self' fonts.googleapis.com cdnjs.cloudflare.com 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.
UserScript:test:1 Refused to load the stylesheet 'https://cdn.jsdelivr.net/devicons/1.8.0/css/devicons.min.css' because it violates the following Content Security Policy directive: "style-src 'self' fonts.googleapis.com cdnjs.cloudflare.com 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.
UserScript:test:1 Refused to load the font 'https://github.com/dragoon8192/RictyDiminished/blob/master/RictyDiminishedDiscord-Regular.woff?raw=true' because it violates the following Content Security Policy directive: "font-src 'self' cdnjs.cloudflare.com fonts.gstatic.com".
UserScript:test:1 Refused to load the font 'https://github.com/dragoon8192/RictyDiminished/blob/master/RictyDiminishedDiscord-Bold.woff?raw=true' because it violates the following Content Security Policy directive: "font-src 'self' cdnjs.cloudflare.com fonts.gstatic.com".
UserScript:test:1 Refused to load the font 'https://github.com/dragoon8192/RictyDiminished/blob/master/RictyDiminishedDiscord-Oblique.woff?raw=true' because it violates the following Content Security Policy directive: "font-src 'self' cdnjs.cloudflare.com fonts.gstatic.com".
UserScript:test:1 Refused to load the font 'https://github.com/dragoon8192/RictyDiminished/blob/master/RictyDiminishedDiscord-BoldOblique.woff?raw=true' because it violates the following Content Security Policy directive: "font-src 'self' cdnjs.cloudflare.com fonts.gstatic.com".
迷走ログ
Ricty Diminishedにttfしかないから？
woffも用意しろと?
ttf2woff
Ref.icon fontello/ttf2woff: Font convertor, TTF to WOFF, for node.js
$ ls -1 | sed -r -n "s/(^.+)\.ttf$/& \1.woff/p" | xargs -L 1 ttf2woff
Ref.icon Safari and IE can't read TTF and EOT fonts - Stack Overflow
まだうまく行かない