# Script injection
> [!info] For client requirement; please see [[Requirements Clients]]
GRAVITY can be integrated to your application via [[Browser Extension]] or using direct script injection, which might be useful in case if source code of the target application can be modified accordingly.
## Script #1: simple injection
One of the options to add GRAVITY on your own site is to inject it via simple code snippet:
```js
<script>
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
var baseUrl = 'https://your.host/gravity/';
script.type = 'text/javascript';
script.onload = function() {
pi.gravity.inject.setup(baseUrl, baseUrl + 'inject/', 'Static inject');
}
script.src = baseUrl + 'inject/js/pi.gravity.inject.js';
head.appendChild(script);
</script>
```
## Script #2: injection with user authentication
In case if a user need to be automatically authenticated within specified email address the following snippet can be used:
```js
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
var baseUrl = 'https://your.host/gravity/';
var options = { login: 'user@mail.com' };
script.type = 'text/javascript';
script.onload = function() {
pi.gravity.inject.setup(baseUrl, baseUrl + 'inject/', 'Static inject', options);
}
script.src = baseUrl + 'inject/js/pi.gravity.inject.js';
head.appendChild(script);
```
>[!warning]- Deprecated options
>
> ```js
> var options = { email: 'user@mail.com' };
> ```
> Providing user login via 'email' property is replaced with 'login'.
## Script #3: injection with user authentication & audience automapping
If a user needs to be automatically added to configured audiences, the following snippet can be used to provide auto-mapping information:
```js
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
var baseUrl = 'https://your.host/gravity/';
var options = { login: 'user@mail.com', userGroups: ['roleName'] };
script.type = 'text/javascript';
script.onload = function() {
pi.gravity.inject.setup(baseUrl, baseUrl + 'inject/', 'Static inject', options);
}
script.src = baseUrl + 'inject/js/pi.gravity.inject.js';
head.appendChild(script);
```
## Script #4: injection with login process control
For applications that allow the user to login again without reloading the application itself (SPA), the following approach is recommended to keep the logged-in user in sync with the user information used by GRAVITY
1. Inject GRAVITY in the app during the initialization phase:
```js
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
var baseUrl = 'https://your.host/gravity/';
var options = { injectOnly: true };
script.type = 'text/javascript';
script.onload = function() {
pi.gravity.inject.setup(baseUrl, baseUrl + 'inject/', 'Static init', options);
}
script.src = baseUrl + 'inject/js/pi.gravity.inject.js';
head.appendChild(script);
```
> [!info]- Hint
> If a user session is restored from the previous login info, GRAVITY initialization can be combined with authentication:
> ```js
> var options = { injectOnly: !yourApp.isUserLoggedIn, login: yourApp.isUserLoggedIn ? "user@mail.com" : null };
> ```
2. When a user is logged-in in the target application, use a global window function to pass the info to GRAVITY
```js
window.pi.gravity.inject.login({ login: "user@mail.com" })
```
> [!info]- Hint
> Here you can also pass the user roles required for audience automapping
> ```js
> window.pi.gravity.inject.login({ login: "user@mail.com", userGroups: ['roleName'] })
> ```
3. When a user is logged-out of the target application, just let GRAVITY know:
```js
window.pi.gravity.inject.logout()
```
## Script #5: injection with activation only on some pages of the application
More complex solution for cases when GRAVITY might not be activated for all sites on which the script is injected.
```js
var baseUrl = "https://your.host/gravity/";
var options = { login: 'user@mail.com' };
(function init() {
window.onload = function () {
injectGravity();
};
})();
function injectGravity() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
// if gravity is enabled for current page, then load inject scripts
if (xhr.readyState === 4 && xhr.status === 200 && xhr.responseText === "true") {
loadInjectScripts();
}
};
xhr.open("GET", baseUrl + "services/info/gravity/enabled?url=" + encodeURI(location.href), true);
xhr.send();
}
function loadInjectScripts() {
var script = document.createElement('script');
script.onload = function () {
var startScript = document.createElement('script');
var srcBody = document.createTextNode("pi.gravity.inject.setup('" + baseUrl + "', '" + baseUrl + 'inject/' + "', 'Static inject', " + JSON.stringify(options) + ")");
startScript.appendChild(srcBody);
document.head.appendChild(startScript);
};
script.src = baseUrl + "inject/js/pi.gravity.inject.js";
document.head.appendChild(script);
}
```
# CSP rules
## Required headers
The following CSP headers must configured to let GRAVITY work properly in [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources "https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources") secured context of the target application.
```
connect-src https://your.gravity.host;
font-src https://your.gravity.host;
img-src data: https://your.gravity.host;
frame-src https://your.gravity.host;
style-src 'nonce-gravity-styles' https://your.gravity.host;
```
## Optional headers
Depending on the additional content types and functionality used for Callouts, the following CSP headers must be added additionally to the base configuration described above.
### Attached PDF documents or additional images
Loading of images or documents as `data:` must be allowed via `connect-src`
`connect-src data: https://your.gravity.host;`
### Content type: Image
Required image hosts must be allowed via `img-src`
`img-src https://your.gravity.host https://your.images.host;`
### Content type: Video
Required video hosts must be allowed via `media-src`
`media-src https://your.video.host;`
`img-src` must be modified also if video posters are needed.
`img-src https://your.gravity.host https://your.video-posters.host;`
### Content type: IFrame
Required frame hosts must be allowed via `frame-src`
`frame-src https://your.gravity.host https://your.frames.host;`
### Content type: YouTube video
YouTube hosts must be allowed
```
img-src https://your.gravity.host https://i.ytimg.com;
frame-src https://your.gravity.host https://www.youtube.com;
```
### Content type: Vimeo video
Vimeo hosts must be allowed
```
img-src https://your.gravity.host https://i.vimeocdn.com;
frame-src https://your.gravity.host https://player.vimeo.com;
```
Not found
This page does not exist