OneTrust Cookie Banner (#12804)

* onetrust_prototype

* demo v2, cleanup, and workflows for ra

* remove stray rule

* move onetrust, fix linting, lint

* Add onetrust callback

* design feedback, fix button and adjust colors

* Move onetrust to vendor directory, update assets

* linting

* refactor sass file for nesting

* Add language support

* Testing localized title

* Move from locally hosted to onetrust CDN hosted scripts

* remove whitespace

* Remove stray rule

* Add onetrust styling to pni

* Load test or production onetrust script depending on app_environment

* Update mozfest to not load onetrust script

* Revert additional environment prefix check

* Update colors and viewport with design feedback

.github/workflows/continous-integration.yml

@@ -144,7 +144,7 @@ jobs:
       CSP_FONT_SRC: "'self' https://code.cdn.mozilla.net https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/fonts/ data: https://static.fundraiseup.com/common-fonts/"
       CSP_IMG_SRC: "* data: blob: https://*.fundraiseup.com https://ucarecdn.com https://pay.google.com https://*.paypalobjects.com"
       CSP_FRAME_SRC: "'self' https://www.google.com/recaptcha/ https://*.stripe.com https://pay.google.com https://*.paypal.com https://*.fundraiseup.com"
-      CSP_SCRIPT_SRC: "'self' 'unsafe-inline' https://www.google-analytics.com/analytics.js http://*.shpg.org/ https://comments.mozillafoundation.org/ https://airtable.com https://platform.twitter.com https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js https://*.googletagmanager.com https://*.fundraiseup.com https://mozillafoundation.tfaforms.net https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'unsafe-eval' https://*.stripe.com https://m.stripe.network https://*.paypal.com https://*.paypalobjects.com https://pay.google.com"
+      CSP_SCRIPT_SRC: "'self' 'unsafe-inline' https://www.google-analytics.com/analytics.js http://*.shpg.org/ https://comments.mozillafoundation.org/ https://airtable.com https://platform.twitter.com https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js https://*.googletagmanager.com https://*.fundraiseup.com https://mozillafoundation.tfaforms.net https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'unsafe-eval' https://*.stripe.com https://m.stripe.network https://*.paypal.com https://*.paypalobjects.com https://pay.google.com https://cdn.cookielaw.org"
       CSP_STYLE_SRC: "'self' 'unsafe-inline' https://code.cdn.mozilla.net https://platform.twitter.com https://mozillafoundation.tfaforms.net https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
       SECURE_CROSS_ORIGIN_OPENER_POLICY: "same-origin-allow-popups"
     steps:

.github/workflows/visual-regression-testing.yml

@@ -35,7 +35,7 @@ jobs:
       CSP_FRAME_SRC: " 'self' https://www.youtube.com https://comments.mozillafoundation.org/ https://airtable.com https://docs.google.com/ https://platform.twitter.com https://public.zenkit.com https://calendar.google.com https://www.youtube-nocookie.com https://form.typeform.com https://js.tito.io https://datawrapper.dwcdn.net https://www.google.com/recaptcha/ https://*.stripe.com https://pay.google.com https://*.paypal.com https://*.fundraiseup.com "
       CSP_IMG_SRC: " * data: blob: https://*.fundraiseup.com https://ucarecdn.com https://pay.google.com https://*.paypalobjects.com "
       CSP_MEDIA_SRC: " 'self' data: https://s3.amazonaws.com/mofo-assets/foundation/video/ "
-      CSP_SCRIPT_SRC: " 'self' 'unsafe-inline' https://www.google-analytics.com/analytics.js http://*.shpg.org/ https://comments.mozillafoundation.org/ https://airtable.com https://platform.twitter.com https://cdn.syndication.twimg.com https://embed.typeform.com https://js.tito.io https://js-plugins.tito.io/gtm.js https://tagmanager.google.com https://*.googletagmanager.com https://*.fundraiseup.com https://mozillafoundation.tfaforms.net https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'unsafe-eval' https://*.stripe.com https://m.stripe.network https://*.paypal.com https://*.paypalobjects.com https://pay.google.com "
+      CSP_SCRIPT_SRC: " 'self' 'unsafe-inline' https://www.google-analytics.com/analytics.js http://*.shpg.org/ https://comments.mozillafoundation.org/ https://airtable.com https://platform.twitter.com https://cdn.syndication.twimg.com https://embed.typeform.com https://js.tito.io https://js-plugins.tito.io/gtm.js https://tagmanager.google.com https://*.googletagmanager.com https://*.fundraiseup.com https://mozillafoundation.tfaforms.net https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'unsafe-eval' https://*.stripe.com https://m.stripe.network https://*.paypal.com https://*.paypalobjects.com https://pay.google.com https://cdn.cookielaw.org "
       CSP_STYLE_SRC: " 'self' 'unsafe-inline' https://code.cdn.mozilla.net https://platform.twitter.com https://js.tito.io https://tagmanager.google.com https://mozillafoundation.tfaforms.net https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css "
       CSP_INCLUDE_NONCE_IN: "script-src"
       DATABASE_URL: postgres://postgres:postgres@localhost:5432/network

app.json

@@ -32,7 +32,7 @@
     "CSP_FONT_SRC": "'self' https://code.cdn.mozilla.net https://*.fundraiseup.com https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/fonts/",
     "CSP_IMG_SRC": "* data: blob: https://*.fundraiseup.com https://ucarecdn.com https://pay.google.com https://*.paypalobjects.com",
     "CSP_MEDIA_SRC": "'self' https://s3.amazonaws.com/mofo-assets/foundation/video/",
-    "CSP_SCRIPT_SRC": "'self' 'unsafe-inline' https://www.google-analytics.com/analytics.js http://*.shpg.org/ https://comments.mozillafoundation.org/ https://airtable.com https://platform.twitter.com https://cdn.syndication.twimg.com https://js.tito.io https://js-plugins.tito.io/gtm.js https://*.fundraiseup.com https://*.googletagmanager.com https://mozillafoundation.tfaforms.net https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'unsafe-eval' https://*.stripe.com https://m.stripe.network https://*.paypal.com https://pay.google.com",
+    "CSP_SCRIPT_SRC": "'self' 'unsafe-inline' https://www.google-analytics.com/analytics.js http://*.shpg.org/ https://comments.mozillafoundation.org/ https://airtable.com https://platform.twitter.com https://cdn.syndication.twimg.com https://js.tito.io https://js-plugins.tito.io/gtm.js https://*.fundraiseup.com https://*.googletagmanager.com https://mozillafoundation.tfaforms.net https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'unsafe-eval' https://*.stripe.com https://m.stripe.network https://*.paypal.com https://pay.google.com https://cdn.cookielaw.org",
     "CSP_STYLE_SRC": "'self' 'unsafe-inline' https://code.cdn.mozilla.net  https://platform.twitter.com https://js.tito.io https://mozillafoundation.tfaforms.net https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
     "NPM_CONFIG_PRODUCTION": "true",
     "REVIEW_APP": "True",

env.default

@@ -55,7 +55,7 @@ CSP_FRAME_ANCESTORS=" 'self' "
 CSP_FRAME_SRC=" 'self' https://www.youtube.com https://comments.mozillafoundation.org/ https://airtable.com https://docs.google.com/ https://platform.twitter.com https://public.zenkit.com https://calendar.google.com https://www.youtube-nocookie.com https://form.typeform.com https://js.tito.io https://datawrapper.dwcdn.net https://www.google.com/recaptcha/ https://pay.google.com https://*.paypal.com https://*.fundraiseup.com https://*.stripe.com "
 CSP_IMG_SRC=" * data: blob: https://*.fundraiseup.com https://ucarecdn.com https://pay.google.com https://*.paypalobjects.com "
 CSP_MEDIA_SRC=" 'self' data: https://s3.amazonaws.com/mofo-assets/foundation/video/ "
-CSP_SCRIPT_SRC=" 'self' 'unsafe-inline' https://www.google-analytics.com/analytics.js http://*.shpg.org/ https://comments.mozillafoundation.org/ https://airtable.com https://platform.twitter.com https://cdn.syndication.twimg.com https://embed.typeform.com https://js.tito.io https://js-plugins.tito.io/gtm.js https://tagmanager.google.com https://*.googletagmanager.com https://*.fundraiseup.com https://mozillafoundation.tfaforms.net https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'unsafe-eval' https://*.stripe.com https://m.stripe.network https://*.paypal.com https://*.paypalobjects.com https://pay.google.com "
+CSP_SCRIPT_SRC=" 'self' 'unsafe-inline' https://www.google-analytics.com/analytics.js http://*.shpg.org/ https://comments.mozillafoundation.org/ https://airtable.com https://platform.twitter.com https://cdn.syndication.twimg.com https://embed.typeform.com https://js.tito.io https://js-plugins.tito.io/gtm.js https://tagmanager.google.com https://*.googletagmanager.com https://*.fundraiseup.com https://mozillafoundation.tfaforms.net https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'unsafe-eval' https://*.stripe.com https://m.stripe.network https://*.paypal.com https://*.paypalobjects.com https://pay.google.com https://cdn.cookielaw.org "
 CSP_STYLE_SRC=" 'self' 'unsafe-inline' https://code.cdn.mozilla.net https://platform.twitter.com https://js.tito.io https://tagmanager.google.com https://mozillafoundation.tfaforms.net https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css "
 CSP_INCLUDE_NONCE_IN=script-src
 

network-api/networkapi/mozfest/templates/mozfest/mozfest-base.html

@@ -20,6 +20,7 @@
     })(window,document,'script','dataLayer','GTM-5TFTDCX');</script>
 {% endblock %}
 
+{% block onetrust_script %}{% endblock %}
 
 {% block bodyclass %}mozfest{% endblock %}
 

network-api/networkapi/templates/pages/base.html

@@ -59,6 +59,19 @@
             })(window,document,'script','FundraiseUp','ADCYPWMX');</script>
         {% endblock %}
 
+        {% block onetrust_script %}
+            <script src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js" data-document-language="true" type="text/javascript" charset="UTF-8" data-domain-script="{% onetrust_data_domain %}" ></script>
+            <script nonce="{{ request.csp_nonce }}">function OptanonWrapper() {
+                if (document.getElementById('onetrust-banner-sdk')) {
+                    var acceptBtn = document.getElementById("onetrust-accept-btn-handler");
+                    var declineBtn = document.getElementById("onetrust-reject-all-handler");
+                    var cookieSettingsBtn = document.getElementById("onetrust-pc-btn-handler");
+                    var btnContainer = document.getElementById("onetrust-button-group");
+                    btnContainer.append(acceptBtn, declineBtn, cookieSettingsBtn);
+                }
+            };</script>
+        {% endblock %}
+
         {% wagtail_ab_testing_script %}
 
         {% block commento_meta %}{% endblock %}

network-api/networkapi/utility/templatetags/mofo_common.py

@@ -7,9 +7,29 @@
 @register.simple_tag(takes_context=True)
 def environment_prefix(context):
     env_prefix = ""
-    app_env = settings.APP_ENVIRONMENT
+    app_env = get_app_environment()
     if app_env == "Staging":
         env_prefix = "[S]"
     elif app_env == "Review":
         env_prefix = "[RA]"
     return env_prefix
+
+
+@register.simple_tag()
+def onetrust_data_domain():
+    """
+    Get the OneTrust cookie "data-domain-script" script attribute.
+
+    Data domain is taken from the data-domain-script script attribute via
+    OneTrust's cookie script integration. While the test / production data
+    domain id currently only differ by a suffix, this may change in the future
+    """
+    data_domain = "0190e65a-dbec-7548-89af-4b67155ee70a"
+    if get_app_environment() == "Production":
+        return data_domain
+    else:
+        return data_domain + "-test"
+
+
+def get_app_environment():
+    return settings.APP_ENVIRONMENT

source/sass/buyers-guide/bg-main.scss

@@ -54,10 +54,15 @@ html {
 // Misc
 
 @import "../global";
+
 // Header
 
 @import "./components/header.scss";
 
+// Cookie Banner
+
+@import "../onetrust-override.scss";
+
 // Utilities
 
 .bg-product-image {

source/sass/main.scss

@@ -71,6 +71,9 @@
 @import "./views/publication";
 @import "./views/article";
 
+// Cookie Banner
+@import "./onetrust-override.scss";
+
 // MozFest
 
 @import "./mozfest";