Apply security policy in Caddy#226
Conversation
|
Op test hebben we nog CSP-errors na de laatste merge van 'main`. |
| default-src 'self'; | ||
| script-src 'self' 'sha256-B3XU3apKRxGUkcZIC2hb7S3n+DLs/vKwgVEnWv1EzR0=' 'sha256-pBkmluod9Ko4GzDfbWgKM/wxzujFXUdGVOePkwOQT+c=' https://gc.zgo.at/count.js; | ||
| connect-src 'self' https://search.developer.overheid.nl https://donv1.goatcounter.com; | ||
| img-src 'self' data: https://www.geonovum.nl https://social.overheid.nl https://github.com https://avatars.githubusercontent.com https://hostux.social https://i.vimeocdn.com https://www.toegankelijkheidsverklaring.nl; |
There was a problem hiding this comment.
Door github.com in je CSP te zetten verzwak je de sterke ervan, gezien github best 'world-writable' is. Al is dat voor afbeeldingen minder spannend dan voor andere zaken.
| header { | ||
| Content-Security-Policy " | ||
| default-src 'self'; | ||
| script-src 'self' 'sha256-B3XU3apKRxGUkcZIC2hb7S3n+DLs/vKwgVEnWv1EzR0=' 'sha256-pBkmluod9Ko4GzDfbWgKM/wxzujFXUdGVOePkwOQT+c=' https://gc.zgo.at/count.js; |
There was a problem hiding this comment.
Wellicht is het nuttig om de count.js zelf te hosten? Dan wel gebruik te maken van de rijksoverheid piwik? Zelfde geld natuurlijk voor de connect-src stanza hieronder en in het algemeen voor goatcounter ipv piwik.
| browser = await puppeteer.launch({ | ||
| headless: true, | ||
| args: ["--no-sandbox"], | ||
| }); | ||
| } catch (e) { | ||
| console.warn('Mermaid rendering is disabled due to missing dependencies.') | ||
| return resolve(); | ||
| } | ||
|
|
||
| const page = await browser.newPage(); | ||
| await page.setViewport({ width: 1920, height: 1080 }); | ||
|
|
||
| await page.setContent(` | ||
| <html> | ||
| <head> | ||
| <style> | ||
| html { -webkit-font-smoothing: antialiased; } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="mermaid">${code}</div> | ||
| <script>${mermaidScript}</script> | ||
| <script> | ||
| mermaid.initialize({ startOnLoad: false }); | ||
| mermaid.run({ | ||
| querySelector: ".mermaid", | ||
| suppressErrors: true, | ||
| }) | ||
| .then(() => { | ||
| window.mermaidDone = true; | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html>`); | ||
|
|
||
| await page.waitForFunction("window.mermaidDone === true", { | ||
| timeout: 5000, | ||
| }); |
There was a problem hiding this comment.
Ik volg niet helemaal waarom er niet gebruik wordt gemaakt van:
https://github.com/mermaid-js/mermaid-cli
Dat is een veel cleanere en minder belastende manier on mermaid content te renderen naar SVG files. Het houdt ook de containers een stuk kleiner, met een boel minder dependencies dan heel Chrome.
| @@ -0,0 +1,12 @@ | |||
| import { type ReactNode } from 'react'; | |||
There was a problem hiding this comment.
Kan dit niet gewoon een static SVG zijn die ook naar de gebouwde css file wijst?
Voordeel is dat er geen JS aan te pas komt, en dat de file netjes cached kan worden door de browsers. Ook de dom tree blijft cleaner. en repaints triggeren nooit op de inhoud van de SVG omdat deze out of flow wordt behandeld gezien het losse content is.
| }}><path d="M18.34 23.05c1.01-1.01 1.35-2.3.34-3.31l-7.75-7.75 7.75-7.75c1.01-1.01.66-2.3-.34-3.3-1.01-1.01-2.3-1.35-3.31-.34l-9.56 9.58a2.577 2.577 0 0 0 0 3.65l9.57 9.57c1.01 1.01 2.3.66 3.31-.34" style={{ | ||
| clipPath: "url(#clippath-1)" | ||
| }} /></g></svg>; | ||
| const IconDeltaNaarLinksInline = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" data-icon-name="delta-naar-links-inline" {...props}><path |
There was a problem hiding this comment.
Zelfde hier als bij de andere svg's.
4 participants
No description provided.