🔐 <SafeResource />

🎐 Adds CSP-compliant inline scripts and styles to Astro! 🎠

💖 Support further development
I work hard for every project, including this one
and your support means a lot to me!

Consider buying me a coffee. ☕
Thank you for supporting my efforts! 🙏😊

@igorskyflyer

📃 Table of contents

Usage
Examples
Changelog
License
Related
Author

🕵🏼 Usage

Install it by executing:

npm i -D "@igor.dvlpr/astro-saferesource"

In order to use it, all you need to do is wrap your existing inline script or style tags with the <SafeResource> component, i.e.:

before.astro

<script is:inline>
  console.log('Hello World')
</script>

after.astro

---
import SafeResource from '@igor.dvlpr/astro-saferesource'
---

<SafeResource>
  <script is:inline> // <-- do not forget to add is:inline, if not present
    console.log('Hello World')
  </script>
</SafeResource>

and the component will generate the following output:

after.html

<!-- other page markup -->

<script integrity="sha256-xhIA8fkWcujZdN5EjKW355zTO9eHOZu4D+SzAE4Qqik=">
  console.log('Hello World')
</script>

<!-- other page markup -->

Note

The component outputs a SHA-256 hash.

Caution

Do NOT forget to add is:inline to the element or else Astro will remove it from the <SafeResource> component in order to optimize it.

Tip

The component will log the page, type of resource (script/style) and the generated hashes in the console of the IDE.

✨ Examples

example.astro

---
import SafeResource from '@igor.dvlpr/astro-saferesource'
import Layout from '../layouts/Layout.astro'
---

<Layout title="Welcome to Astro">
  <main style="color: wheat;">
    <SafeResource>
      <script is:inline>
        document.addEventListener('DOMContentLoaded', () => {
          const easyNav = document.getElementById('easy-nav')
          const easyShow = easyNav.getAttribute('data-show')

          if (
            easyShow === 'whenNeeded' &&
            document.documentElement.scrollHeight > window.innerHeight
          ) {
            easyNav.className = 'show'
          }
        })
      </script>
    </SafeResource>

    <SafeResource>
      <style is:inline>
        .eren-jaeger {
          color: red;
        }
      </style>
    </SafeResource>
  </main>
</Layout>

📝 Changelog

📑 The changelog is available here: CHANGELOG.md.

🪪 License

Licensed under the MIT license which is available here, MIT license.

🧬 Related

@igor.dvlpr/astro-post-excerpt

⭐ An Astro component that renders post excerpts for your Astro blog - directly from your Markdown and MDX files. Astro v2+ collections are supported as well! 💎

@igor.dvlpr/astro-easynav-button