tabi/blog/security/index.html
2025-09-22 21:40:28 +00:00

11 lines
No EOL
21 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html><html lang=en><head><meta charset=UTF-8><meta content="default-src 'self';font-src 'self' data:;img-src 'self' https://* data:;media-src 'self' https://cdn.jsdelivr.net/;style-src 'self';frame-src player.vimeo.com https://www.youtube-nocookie.com;connect-src 'self' https://tabi-stats.osc.garden vhiweeypifbwacashxjz.supabase.co;script-src 'self' https://tabi-stats.osc.garden cdn.jsdelivr.net 'self'" http-equiv=Content-Security-Policy><meta content="width=device-width,initial-scale=1.0" name=viewport><meta content=https://welpo.github.io/tabi name=base><title>
~/tabi • Secure by default</title><link href=https://welpo.github.io/tabi/img/seedling.png rel=icon type=image/png><link href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="50%" x="50%" dominant-baseline="central" text-anchor="middle" font-size="88">🌱</text></svg>' rel=icon><link title="~/tabi - Atom Feed" href=https://welpo.github.io/tabi/atom.xml rel=alternate type=application/atom+xml><link href="https://welpo.github.io/tabi/custom_subset.css?h=0b9535a28bc3d5bf2321" rel=stylesheet><link href="https://welpo.github.io/tabi/main.css?h=e9648e8ea2820aa9b15b" rel=stylesheet><meta content="light dark" name=color-scheme><meta content=#087e96 name=theme-color><meta content="tabi has an easily customizable Content Security Policy (CSP) with safe defaults. Get peace of mind and an A+ on Mozilla Observatory." name=description><meta content="tabi has an easily customizable Content Security Policy (CSP) with safe defaults. Get peace of mind and an A+ on Mozilla Observatory." property=og:description><meta content="Secure by default" property=og:title><meta content=article property=og:type><meta content="https://welpo.github.io/tabi/blog/security/social_cards/blog_security.jpg?h=0ab74f742a5afef73bbf" property=og:image><meta content=1400 property=og:image:width><meta content=800 property=og:image:height><meta content="https://welpo.github.io/tabi/blog/security/social_cards/blog_security.jpg?h=0ab74f742a5afef73bbf" name=twitter:image><meta content=summary_large_image name=twitter:card><meta content=ca_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/ca/blog/security/ hreflang=ca rel=alternate><meta content=en_GB property=og:locale:alternate><link href=https://welpo.github.io/tabi/blog/security/ hreflang=en rel=alternate><meta content=es_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/es/blog/security/ hreflang=es rel=alternate><meta content=https://welpo.github.io/tabi/blog/security/ property=og:url><meta content=~/tabi property=og:site_name><noscript><link href=https://welpo.github.io/tabi/no_js.css rel=stylesheet></noscript><script src=https://welpo.github.io/tabi/js/initializeTheme.min.js></script><script defer src=https://welpo.github.io/tabi/js/themeSwitcher.min.js></script><script async data-goatcounter=https://tabi-stats.osc.garden/count src=https://tabi-stats.osc.garden/count.js></script><script src="https://welpo.github.io/tabi/js/searchElasticlunr.min.js?h=3626c0ef99daa745b31e" defer></script><body><header><nav class=navbar><div class=nav-title><a class=home-title href=https://welpo.github.io/tabi/>~/tabi</a></div><div class=nav-navs><ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/blog/>blog </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/archive/>archive </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/tags/>tags </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/projects/>projects </a><li class=menu-icons-container><ul class=menu-icons-group><li class="js menu-icon"><div aria-label="Click or press $SHORTCUT to open search" class="search-icon interactive-icon" title="Click or press $SHORTCUT to open search" id=search-button role=button tabindex=0><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></div><li class=language-switcher><details class=dropdown><summary aria-label="Language selection" title="Language selection" aria-haspopup=true role=button><div class=language-switcher-icon></div></summary> <div class=dropdown-content role=menu>English<a aria-label=العربية href=https://welpo.github.io/tabi/ar/blog/security/ lang=ar role=menuitem>العربية</a><a aria-label=Català href=https://welpo.github.io/tabi/ca/blog/security/ lang=ca role=menuitem>Català</a><a aria-label=Español href=https://welpo.github.io/tabi/es/blog/security/ lang=es role=menuitem>Español</a></div></details><li class="theme-switcher-wrapper js"><div aria-label="Toggle dark mode" title="Toggle dark/light mode" aria-pressed=false class=theme-switcher role=button tabindex=0></div><div aria-label="Reset mode to default" class="theme-resetter arrow" title="Reset mode to default" aria-hidden=true role=button tabindex=0></div></ul></ul></div></nav></header><div class=content><main><article class=h-entry><h1 class="p-name article-title">Secure by default</h1><a class="u-url u-uid" href=https://welpo.github.io/tabi/blog/security/></a><ul class=meta><li><time class=dt-published datetime=2023-02-22>22nd Feb 2023</time><li title="241 words"><span aria-hidden=true class=separator></span>2 min read<li class=tag><span aria-hidden=true class=separator></span>Tags: <li class=tag><a class=p-category href=https://welpo.github.io/tabi/tags/security/>security</a>, <li class=tag><a class=p-category href=https://welpo.github.io/tabi/tags/showcase/>showcase</a></ul><ul class="meta last-updated"><li><time class=dt-updated datetime=2025-02-21>Updated on 21st Feb 2025</time><li><span aria-hidden=true class=separator></span><a class=external href=https://github.com/welpo/tabi/commits/main/content/blog/security/index.md>See changes</a></ul><p class=p-summary hidden>tabi has an easily customizable Content Security Policy (CSP) with safe defaults. Get peace of mind and an A+ on Mozilla Observatory.<section class="e-content body"><p>The default configuration of the theme gets an A+ score on <a class=external href=https://observatory.mozilla.org>Mozilla Observatory</a>.<sup class=footnote-reference id=fr-1-1><a href=#fn-1>1</a></sup><p>This is accomplished by programatically configuring Content Security Policy (CSP) headers based on a user-defined list of allowed domains in the <code>config.toml</code> file. Heres the default and recommended setup (you could remove the last directive if you dont want to embed YouTube videos):<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">allowed_domains</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-array z-begin z-toml">[</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">directive</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>font-src<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">domains</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-array z-begin z-toml">[</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>'self'<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-array z-toml">,</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>data:<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-definition z-array z-end z-toml">]</span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">directive</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>img-src<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">domains</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-array z-begin z-toml">[</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>'self'<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-array z-toml">,</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>https://*<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-array z-toml">,</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>data:<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-definition z-array z-end z-toml">]</span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">directive</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>script-src<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">domains</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-array z-begin z-toml">[</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>'self'<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-definition z-array z-end z-toml">]</span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">directive</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>style-src<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">domains</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-array z-begin z-toml">[</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>'self'<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-definition z-array z-end z-toml">]</span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">directive</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>frame-src<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">domains</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-array z-begin z-toml">[</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>https://www.youtube-nocookie.com<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-definition z-array z-end z-toml">]</span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"><span class="z-punctuation z-definition z-array z-end z-toml">]</span>
</span></code></pre><p>The <code>allowed_domains</code> list specifies the URLs that the website should be able to connect to, and each domain in the list is associated with a CSP directive such as <code>frame-src</code>, <code>connect-src</code>, or <code>script-src</code>. The <code>templates/partials/header.html</code> file dynamically generates the CSP header based on this list.<p>This feature allows you to easily customize the websites security headers to allow for specific use cases, such as embedding YouTube videos, loading scripts or remote fonts (<a class=external href=https://www.albertovarela.net/blog/2022/11/stop-using-google-fonts/>not recommended</a>).<p>You can disable the CSP (allowing all connections) on a page, section, or globally by setting <code>enable_csp = false</code> in the front matter or <code>config.toml</code> file.<p><strong>Notes</strong>:<ul><li><p><a href=https://welpo.github.io/tabi/blog/comments/>Enabling comments</a>, <a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#analytics>analytics</a>, or <a href=https://welpo.github.io/tabi/blog/shortcodes/#mermaid-diagrams>mermaid diagrams</a> automatically allows scripts/frames/styles/connections as needed.</p><li><p>To use a <a class=external href=https://www.getzola.org/documentation/getting-started/configuration/#syntax-highlighting>Zola built-in syntax highlighting theme</a>, you need to allow <code>unsafe-inline</code> in the <code>style-src</code> directive:</p> <pre class=z-code><code><span class="z-text z-plain">{ directive = "style-src", domains = ["'self'", "'unsafe-inline'"] },
</span></code></pre></ul><hr><section class=footnotes><ol class=footnotes-list><li id=fn-1><p>Requires proper webserver configuration (e.g. redirecting HTTP traffic to HTTPS). <a href=#fr-1-1></a></p></ol></section></section><form action="https://vhiweeypifbwacashxjz.supabase.co/rest/v1/rpc/increment_hits?apikey=sb_publishable_EoB7MFJhCmb6PiAk-GPJ4w_PGhQ44Ru" class=iine-form method=post><input name=page_slug type=hidden value=/blog/security/><button aria-label="Like this post" title="Like this post" class=iine-button data-icon=thumbs_up data-slug=/blog/security/>👍</button></form><nav class="full-width article-navigation"><div><a aria-describedby=left_title aria-label=Next href=https://welpo.github.io/tabi/blog/custom-font-subset/><span class=arrow></span> Next</a><p aria-hidden=true id=left_title>Optimise loading times with a custom font subset</div><div><a aria-describedby=right_title aria-label=Prev href=https://welpo.github.io/tabi/blog/shortcodes/>Prev <span class=arrow></span></a><p aria-hidden=true id=right_title>Custom shortcodes</div></nav></article></main><span class=hidden id=copy-success> Copied! </span><span class=hidden id=copy-init> Copy code to clipboard </span><script defer src=https://welpo.github.io/tabi/js/copyCodeToClipboard.min.js></script><script defer src=https://cdn.jsdelivr.net/gh/welpo/iine@main/iine.mini.js></script></div><footer><section><nav class="socials nav-navs"><ul><li><a class="nav-links no-hover-padding social" href=https://welpo.github.io/tabi/atom.xml> <img alt=feed loading=lazy src=https://welpo.github.io/tabi/social_icons/rss.svg title=feed> </a><li class=js><a class="nav-links no-hover-padding social" data-encoded-email=dGFiaUBvc2MuZ2FyZGVu href=#><img alt=email loading=lazy src=https://welpo.github.io/tabi/social_icons/email.svg title=email> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://github.com/welpo/> <img alt=github loading=lazy src=https://welpo.github.io/tabi/social_icons/github.svg title=github> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://soundcloud.com/oskerwyld> <img alt=soundcloud loading=lazy src=https://welpo.github.io/tabi/social_icons/soundcloud.svg title=soundcloud> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://instagram.com/oskerwyld> <img alt=instagram loading=lazy src=https://welpo.github.io/tabi/social_icons/instagram.svg title=instagram> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://youtube.com/@oskerwyld> <img alt=youtube loading=lazy src=https://welpo.github.io/tabi/social_icons/youtube.svg title=youtube> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE> <img alt=spotify loading=lazy src=https://welpo.github.io/tabi/social_icons/spotify.svg title=spotify> </a></ul></nav><nav class=nav-navs><small> <ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/about/> about </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/privacy/> privacy policy </a><li><a class="nav-links no-hover-padding" href=https://tabi-stats.osc.garden/> site statistics </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/sitemap.xml> sitemap </a></ul> </small></nav><div class=credits><small> Powered by <a href=https://www.getzola.org>Zola</a> & <a href=https://github.com/welpo/tabi>tabi</a><a href=https://github.com/welpo/tabi> Site source </a></small></div></section><script async src=https://welpo.github.io/tabi/js/decodeMail.min.js></script><div class="search-modal js" aria-labelledby=modalTitle id=searchModal role=dialog><h1 class=visually-hidden id=modalTitle>Search</h1><div id=modal-content><div id=searchBar><div aria-hidden=true class=search-icon><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></div><input aria-controls=results-container aria-expanded=false autocomplete=off id=searchInput placeholder=Search… role=combobox spellcheck=false><div class="close-icon interactive-icon" title="Clear search" id=clear-search role=button tabindex=0><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></div></div><div id=results-container><div id=results-info><span id=zero_results> No results</span><span id=one_results> $NUMBER result</span><span id=many_results> $NUMBER results</span><span id=two_results> $NUMBER results</span><span id=few_results> $NUMBER results</span></div><div id=results role=listbox></div></div></div></div></footer>