vue-shielded-site v1.0.1

vue-shielded-site

NZ Women's Refuge Shielded Site Project implemented as a Vue component, without any external resources.

Project Website

Why?

I decided to look into how the Shielded Site Project worked as I was going to implement it as Vue and React components, and I noticed that their embed script spawns an iframe when the button is clicked, which loads the modal's content from external sources. A sufficiently advanced domestic abuser could detect when a victim is attempting to access the information, and also choose to block it to prevent the victim from accessing the information.

After some experimentation, I found that the best way to present this information without external resources, but still preserving styling without polluting the global CSS namespace, was to take all the assets from the external source and convert them into a base64-encoded data URL, which is passed to the iframe as the source.

Install

npm install --save vue-shielded-site

Usage

<template>
  <ShieldedSiteButton />
</template>

<script>
import ShieldedSiteButton from 'vue-shielded-site'

export default {
  name: 'Example',
  components: {
    ShieldedSiteButton
  }
}
</script>

License

MIT © Finn Greig