-
Notifications
You must be signed in to change notification settings - Fork 72
/
fides-js-components-demo.html
356 lines (334 loc) · 12.4 KB
/
fides-js-components-demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
<!doctype html>
<html>
<head>
<title>fides-js script demo page</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--
Pass along any params to the fides.js script. For example, visiting
http://localhost:3001/fides-js-demo.html?geolocation=fr-id
will pass a geolocation query param to fides.js
-->
<script>
const params = new URLSearchParams(window.location.search);
(function () {
const tcfEnabled = window.fidesConfig?.options?.tcfEnabled;
const gppEnabled =
window.fidesConfig?.experience?.gpp_settings?.enabled;
const geolocation = params.get("geolocation");
const src = `/fides.js?initialize=false${
tcfEnabled ? "&tcf=true" : ""
}${gppEnabled ? "&gpp=true" : ""}${
!!params.size ? `&${params.toString()}` : ""
}`;
document.write('<script src="' + src + '"><\/script>');
})();
var deleteCookie = function () {
document.cookie =
"fides_consent=;Path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT;";
location.reload();
};
</script>
<script>
// Our cypress test suite requires injecting consent options through an obj on window
// we default to the below for dev purposes
const init = params.get("init");
var fidesConfig = window.fidesConfig || {
consent: {
options: [
{
cookieKeys: ["data_sales"],
default: true,
fidesDataUseKey: "data_use.sales",
},
{
cookieKeys: ["tracking"],
default: false,
fidesDataUseKey: "advertising",
},
],
},
// NOTE: copied from /clients/fides-js/__tests__/__fixtures__/mock_experience.json
experience: {
id: "pri_111",
created_at: "2024-01-01T12:00:00.000000+00:00",
updated_at: "2024-01-01T12:00:00.000000+00:00",
region: "us_ca",
component: "banner_and_modal",
available_locales: ["en", "es"],
experience_config: {
id: "pri_222",
created_at: "2024-01-01T12:00:00.000000+00:00",
updated_at: "2024-01-01T12:00:00.000000+00:00",
regions: ["us_ca"],
component: "banner_and_modal",
disabled: false,
is_default: true,
dismissable: true,
show_layer1_notices: false,
layer1_button_options: "opt_in_opt_out",
allow_language_selection: true,
auto_detect_language: true,
auto_subdomain_cookie_deletion: true,
language: "en",
accept_button_label: "Accept Test",
acknowledge_button_label: "Acknowledge Test",
banner_description: "Banner Description Test",
banner_title: "Banner Title Test",
description: "Description Test",
purpose_header: "Purpose Header Test",
privacy_policy_link_label: "Privacy Policy Test",
privacy_policy_url: "https://privacy.example.com/",
privacy_preferences_link_label: "Manage Preferences Test",
reject_button_label: "Reject Test",
save_button_label: "Save Test",
title: "Title Test",
translations: [
{
language: "en",
accept_button_label: "Accept Test",
acknowledge_button_label: "Acknowledge Test",
banner_description: "Banner Description Test",
banner_title: "Banner Title Test",
description: "Description Test",
purpose_header: "Purpose Header Test",
modal_link_label: "Link Label Test",
is_default: true,
privacy_policy_link_label: "Privacy Policy Test",
privacy_policy_url: "https://privacy.example.com/",
privacy_preferences_link_label: "Manage Preferences Test",
reject_button_label: "Reject Test",
save_button_label: "Save Test",
title: "Title Test",
privacy_experience_config_history_id: "pri_333",
},
{
language: "es",
accept_button_label: "Aceptar Prueba",
acknowledge_button_label: "Reconocer Prueba",
banner_description: "Descripción del Banner de Prueba",
banner_title: "Título del Banner de Prueba",
description: "Descripción de la Prueba",
purpose_header: "Prueba de Encabezado de Propósito",
modal_link_label: "Prueba de etiqueta",
is_default: true,
privacy_policy_link_label: "Política de Privacidad de Prueba",
privacy_policy_url: "https://privacy.example.com/es",
privacy_preferences_link_label:
"Administrar Preferencias de Prueba",
reject_button_label: "Rechazar Prueba",
save_button_label: "Guardar Prueba",
title: "Título de la Prueba",
privacy_experience_config_history_id: "pri_444",
},
],
},
privacy_notices: [
{
id: "pri_555",
origin: "pri_xxx",
created_at: "2024-01-01T12:00:00.000000+00:00",
updated_at: "2024-01-01T12:00:00.000000+00:00",
name: "Advertising Test",
notice_key: "advertising",
description: "Advertising Description Test",
internal_description: "Advertising Internal Description Test",
consent_mechanism: "notice_only",
data_uses: ["marketing.advertising.first_party.targeted"],
enforcement_level: "frontend",
disabled: false,
has_gpc_flag: true,
framework: null,
default_preference: "opt_out",
cookies: [],
systems_applicable: false,
translations: [
{
language: "en",
title: "Advertising Test",
description: "Advertising Description Test",
privacy_notice_history_id: "pri_666",
},
{
language: "es",
title: "Prueba de Publicidad",
description: "Descripción de la Publicidad de Prueba",
privacy_notice_history_id: "pri_777",
},
],
},
{
id: "pri_888",
origin: "pri_xxx",
created_at: "2024-01-01T12:00:00.000000+00:00",
updated_at: "2024-01-01T12:00:00.000000+00:00",
name: "Analytics Test",
notice_key: "analytics",
internal_description: "Analytics Internal Description",
consent_mechanism: "opt_out",
data_uses: ["analytics.reporting.ad_performance"],
enforcement_level: "frontend",
disabled: false,
has_gpc_flag: false,
framework: null,
default_preference: "opt_in",
cookies: [{ name: "_ga", path: null, domain: null }],
systems_applicable: true,
translations: [
{
language: "en",
title: "Analytics Test",
description: "Analytics Description Test",
privacy_notice_history_id: "pri_999",
},
{
language: "es",
title: "Prueba de Analítica",
description: "Descripción de la Analítica de Prueba",
privacy_notice_history_id: "pri_000",
},
],
},
],
},
geolocation: {
country: "US",
location: "US-CA",
region: "CA",
},
options: {
debug: true,
isOverlayEnabled: true,
isGeolocationEnabled: false,
geolocationApiUrl: "",
overlayParentId: null,
modalLinkId: null,
privacyCenterUrl: "http://localhost:3001",
fidesApiUrl: "http://localhost:8080/api/v1",
fidesPrimaryColor: "#008000",
},
};
if (init !== "false") {
window.Fides.init(fidesConfig);
Fides.gtm();
}
</script>
<style>
body {
margin: 16px;
height: 100vh;
overflow: scroll;
overflow-x: hidden;
}
pre {
background-color: #eee;
padding: 16px;
white-space: pre-wrap;
overflow-y: auto;
}
#fides-modal-link {
border: none;
padding: 0;
background: none;
cursor: pointer;
text-decoration: underline;
}
</style>
</head>
<body>
<main>
<h1>fides.js demo page</h1>
<p>
This page exists to demonstrate and debug the fides.js script. It is
used by the Privacy Center's test suite to ensure that users' consent
choices can be accessed by pages that live outside of the Privacy
Center.
</p>
<div>
<button type="button" onclick="deleteCookie()">
delete cookie and reload
</button>
</div>
<div id="render-embed-here"></div>
<script>
setTimeout(() => {
const app = document.getElementById("render-embed-here");
const container = document.createElement("div");
container.id = "fides-embed-container";
app.appendChild(container);
}, window.render_delay || 0);
</script>
<h2>Was the fides global defined?</h2>
<pre id="has-fides"></pre>
<h2>Consent JSON</h2>
<pre id="consent-json"></pre>
<h2>Consent Modal Link</h2>
<div id="render-link-here"></div>
<script>
setTimeout(() => {
const app = document.getElementById("render-link-here");
const button = document.createElement("button");
// Display the fides configured modal link label (if any).
button.textContent = Fides.getModalLinkLabel();
button.id = "fides-modal-link";
app.appendChild(button);
}, window.render_delay || 0);
</script>
<h2>Consent Experience</h2>
<pre id="consent-experience"></pre>
<h2>Geolocation</h2>
<pre id="consent-geolocation"></pre>
<h2>Consent Options</h2>
<pre id="consent-options"></pre>
<h2>Property id</h2>
<pre id="property-id"></pre>
</main>
</body>
<script>
(() => {
const hasFides = typeof Fides === "object";
document.getElementById("has-fides").textContent = String(hasFides);
if (!hasFides) {
return;
}
// Once Fides.js is initialized, show some debug information on the page
const onInitialized = () => {
console.log("Fides has been initialized!");
// Pretty-print the fides consent object and add it to the page.
document.getElementById("consent-json").textContent = JSON.stringify(
Fides.consent,
null,
2,
);
// Pretty-print the fides experience config object and add it to the page.
document.getElementById("consent-experience").textContent =
JSON.stringify(Fides.experience, null, 2);
// Pretty-print the fides geolocation object and add it to the page.
document.getElementById("consent-geolocation").textContent =
JSON.stringify(Fides.geolocation, null, 2);
// Pretty-print the fides options object and add it to the page.
document.getElementById("consent-options").textContent = JSON.stringify(
Fides.options,
null,
2,
);
// Pretty-print the fides property id and add it to the page.
document.getElementById("property-id").textContent = JSON.stringify(
Fides.config.propertyId,
null,
2,
);
// Test behavior of integrations that can be configured without/before their platform scripts.
Fides.meta({
consent: Fides.consent.tracking,
dataUse: Fides.consent.data_sales,
});
};
// Handle both synchronous & asynchronous initialization
if (Fides.initialized) {
onInitialized();
} else {
window.addEventListener("FidesInitialized", onInitialized);
}
})();
</script>
</html>