JSPM

@igor.dvlpr/astro-saferesource

1.0.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 4
  • Score
    100M100P100Q25817F
  • License MIT

๐ŸŽ Adds CSP-compliant inline scripts and styles to Astro! ๐ŸŽ 

Package Exports

  • @igor.dvlpr/astro-saferesource

Readme

๐Ÿ” <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! ๐Ÿ™๐Ÿ˜Š

Donate to igorskyflyer

@igorskyflyer




๐Ÿ“ƒ Table of contents



๐Ÿ•ต๐Ÿผ 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 ```astro

import SafeResource from '@igor.dvlpr/astro-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 ```astro

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