Replace SecurePrivacy with OneTrust (#468)

This commit is contained in:
github 2021-12-15 09:40:58 +08:00
commit 8500846654
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
4 changed files with 49 additions and 21 deletions

View file

@ -49,7 +49,7 @@ export const MAIN_WRAPPER_CLASS = 'main-wrapper';
export const IS_MAC = navigator.userAgent.indexOf('Mac OS X') !== -1;
const imaLibraryPath = 'https://imasdk.googleapis.com/js/sdkloader/ima3.js';
const securePrivacyScriptUrl = 'https://app.secureprivacy.ai/script/6194129b66262906dd4a5f43.js';
const oneTrustScriptSrc = 'https://cdn.cookielaw.org/scripttemplates/otSDKStub.js';
type Props = {
language: string,
@ -359,8 +359,9 @@ function App(props: Props) {
}
}, []);
// add secure privacy script
// add OneTrust script
useEffect(() => {
// don't add script for embedded content
function inIframe() {
try {
return window.self !== window.top;
@ -373,15 +374,21 @@ function App(props: Props) {
return;
}
const script = document.createElement('script');
script.src = securePrivacyScriptUrl;
script.async = true;
// might use this for future checking to prevent doubleloading
script.id = 'securePrivacy';
// $FlowFixMe
const useProductionOneTrust = process.env.NODE_ENV === 'production' && location.hostname === 'odysee.com';
const cmpScript = document.createElement('script');
cmpScript.src = 'https://app.secureprivacy.ai/secureprivacy-plugin/web-plugin/cmp/cmp-v2.js';
cmpScript.async = true;
const script = document.createElement('script');
script.src = oneTrustScriptSrc;
script.setAttribute('charset', 'UTF-8');
if (useProductionOneTrust) {
script.setAttribute('data-domain-script', '8a792d84-50a5-4b69-b080-6954ad4d4606-test');
} else {
script.setAttribute('data-domain-script', '8a792d84-50a5-4b69-b080-6954ad4d4606-test');
}
const secondScript = document.createElement('script');
// OneTrust asks to add this
secondScript.innerHTML = 'function OptanonWrapper() { }';
const getLocaleEndpoint = 'https://api.odysee.com/locale/get';
let gdprRequired;
@ -395,7 +402,7 @@ function App(props: Props) {
// $FlowFixMe
document.head.appendChild(script);
// $FlowFixMe
document.head.appendChild(cmpScript);
document.head.appendChild(secondScript);
}
// haven't done a gdpr check, do it now
@ -410,7 +417,7 @@ function App(props: Props) {
// $FlowFixMe
document.head.appendChild(script);
// $FlowFixMe
document.head.appendChild(cmpScript);
document.head.appendChild(secondScript);
// note we don't need gdpr, save to session
} else if (gdprRequiredBasedOnLocation === false) {
localStorage.setItem('gdprRequired', 'false');
@ -423,7 +430,7 @@ function App(props: Props) {
// $FlowFixMe
document.head.removeChild(script);
// $FlowFixMe
document.head.removeChild(cmpScript);
document.head.removeChild(secondScript);
} catch (err) {
console.log(err);
}

View file

@ -340,8 +340,8 @@ function SideNavigation(props: Props) {
}, [sidebarOpen, setSidebarOpen, isAbsolute]);
useEffect(() => {
if (!window.sp) {
const gdprDiv = document.getElementById('gdprPrivacyFooter');
if (!window.Optanon) {
const gdprDiv = document.getElementById('gdprSidebarLink');
if (gdprDiv) {
gdprDiv.style.display = 'none';
}
@ -379,8 +379,8 @@ function SideNavigation(props: Props) {
<li className="navigation-link">
<Button label={__('Privacy Policy')} href="https://odysee.com/$/privacypolicy" />
</li>
<li className="navigation-link" id="gdprPrivacyFooter">
<Button label={__('Cookies')} onClick={() => window.sp && window.sp.showPrivacyBanner()} />
<li className="navigation-link" id="gdprSidebarLink">
<Button label={__('Cookie Settings')} onClick={() => window.Optanon && window.Optanon.ToggleInfoDisplay()} />
</li>
</ul>
);

View file

@ -66,3 +66,11 @@
@extend .button--link;
@extend .help;
}
#ot-sdk-btn-floating {
display: none;
}
.gdprPrivacyFooter {
display: none;
}

View file

@ -4,10 +4,23 @@ import { SIMPLE_SITE } from 'config';
export default function Footer() {
useEffect(() => {
if (!window.sp) {
const privacyFooterButton = document.getElementById('gdprPrivacyFooter');
if (privacyFooterButton) privacyFooterButton.style.display = 'none';
const maxTimeout = 2000;
let elapsedTime = 0;
function checkForOneTrust() {
elapsedTime = elapsedTime + 500;
if (elapsedTime > maxTimeout) return;
if (!window.Optanon) {
window.setTimeout(checkForOneTrust, 500);
} else {
const privacyFooterButton = document.getElementById('gdprPrivacyFooter');
if (privacyFooterButton) privacyFooterButton.style.display = 'block';
}
}
checkForOneTrust();
}, []);
if (!SIMPLE_SITE) {
@ -35,7 +48,7 @@ export default function Footer() {
<Button label={__('Privacy Policy')} href="https://odysee.com/$/privacypolicy" />
</li>
<li className="footer__link" id="gdprPrivacyFooter">
<Button label={__('Cookies')} onClick={() => window.sp && window.sp.showPrivacyBanner()} />
<Button label={__('Cookie Settings')} onClick={() => window.Optanon && window.Optanon.ToggleInfoDisplay()} />
</li>
</ul>
</footer>