pnodev / pno-js-globals
Exposes public environment variables to JavaScript
Requires
- typo3/cms-core: ^12.0
This package is not auto-updated.
Last update: 2024-08-31 11:48:04 UTC
README
This is a simple extension that is able to expose environment variables to your JavaScript code.
A word on security
Accidentally exposing sensitive information is a big security risk. You certainly don't want secret information exposed to the client.
However, there are a lot of cases where you need to expose environment specific information
to your JavaScript (e.g. a Sentry token, API endpoints, etc.). To avoid exposing
variables that are not meant to be accessible to the public, this extension
will only expose environment variables that are prefixed with PUBLIC_
. That way
you have a very specific indication that are variable is safe to be exposed.
How does it work?
Define your environment variables the way you are used to. We recommend using a .env file in combination with dotenv-connector by Helmut Hummel.
But you can choose any method you like. Just make sure that the env variables you
need are exposed to PHP. All variables you define prefixed with PUBLIC_
will then
be exposed to your JavaScript and made available under window._gloabls
.
Example
# file: .env
API_KEY=a69f73cca23a9ac5c8b567dc185a756e97c982164fe25859e0d1d # -> this will not be exposed
PUBLIC_SENTRY_DSN=https://XXXXXXXXXXXXX.ingest.us.sentry.io/XXXXXXX
// file: main.js
import * as Sentry from "@sentry/browser";
Sentry.init({
dsn: window._globals.PUBLIC_SENTRY_DSN,
// [...]
});
Installation
Install the extension via composer:
composer req pnodev/pno-js-globals
Import the TypoScript in your sitepackage:
// file: setup.typoscript
@import 'EXT:pno_js_globals/Configuration/TypoScript/setup.typoscript'
Roadmap / Planned features
- TypeScript support