diff --git a/README.md b/README.md index 057c434fb3..5ba3bca5b4 100644 --- a/README.md +++ b/README.md @@ -67,6 +67,13 @@ If you're making a diagram, please add it to this [Figjam](https://www.figma.com Images are hard to keep up-to-date, so please use them judiciously. +# Adding Youtube Videos + +Youtube videos are added through an iframe that embeds the video to the page. +You can get the source of the video by going to the youtube video, selecting share then the embed option. + +Ensure you add `-nocookie` to the url (eg: `https://www.youtube-nocookie.com/embed/sRQCfmvh3vg`) otherwise the video will not work when user blocks cookies. (youtube tracks user data by default) + # Previewing Changes All pull requests will generate a staging link in Vercel. Here's an [example](https://github.com/mixpanel/docs/pull/33#issuecomment-1520474996). This lets you preview your changes without changing what's actually live. diff --git a/components/ChangelogIndex.tsx b/components/ChangelogIndex.tsx index b70fc4b129..e4c9b02c03 100644 --- a/components/ChangelogIndex.tsx +++ b/components/ChangelogIndex.tsx @@ -27,7 +27,7 @@ const getVideoEmbedURL = (videoURL) => { const host = parsedURL.host; if (host === "www.youtube.com" || host === "youtube.com" || host === "youtu.be") { const videoId = parsedURL.searchParams.get("v") || parsedURL.pathname.split("/").pop(); - return `https://www.youtube.com/embed/${videoId}`; + return `https://www.youtube-nocookie.com/embed/${videoId}`; } else if (host === "www.loom.com" || host === "loom.com") { const videoId = parsedURL.pathname.split("/").pop(); return `https://www.loom.com/embed/${videoId}?hideEmbedTopBar=true`; diff --git a/components/TrustArcScripts/TrustArcScripts.tsx b/components/TrustArcScripts/TrustArcScripts.tsx new file mode 100644 index 0000000000..6becd6a2a0 --- /dev/null +++ b/components/TrustArcScripts/TrustArcScripts.tsx @@ -0,0 +1,33 @@ +export function TrustArcHeadScripts() { + const trustArcAutoBlockCoreSrc = `https://consent.trustarc.com/v2/autoblockasset/core.min.js?cmId=9iv2en`; + const trustArcAutoBlockSrc = `https://consent.trustarc.com/v2/autoblock?cmId=9iv2en`; + const trustArcInitScriptSrc = `https://consent.trustarc.com/v2/notice/9iv2en`; + + return ( + <> + + + + > + ); +} + +export function TrustArcBodyScripts() { + const reloadOnPreferencesScript = `var _STATE={};function runOnce(){!_STATE.hasRunOnce&&window.truste&&truste.eu&&truste.eu.prefclose&&(_STATE.oldValue=truste.eu.bindMap.prefCookie&&truste.eu.bindMap.prefCookie.split(":")[0].replace(/[^\\d.]/g,"-"),_STATE.oldMethod=truste.eu.prefclose,truste.eu.prefclose=function(){_STATE.oldMethod(),truste.eu.bindMap.prefCookie&&truste.eu.bindMap.prefCookie.split(":")[0].replace(/[^\\d.]/g,"-")!==_STATE.oldValue&&setTimeout(function(){window.location.reload()},20)},_STATE.hasRunOnce=!0,_STATE.i&&clearInterval(_STATE.i))}_STATE.i=setInterval(runOnce,10);`; + + const reloadOnBannerScript = `document.body.addEventListener("click",function(t){t&&t.target&&("truste-consent-button"===t.target.id||"truste-consent-required"===t.target.id)&&setTimeout(function(){window.location.reload()},1e3)});`; + + return ( + <> + + + > + ); +} diff --git a/components/VideoButtonWithModal/util.ts b/components/VideoButtonWithModal/util.ts index ad1d6ed1eb..b652496cba 100644 --- a/components/VideoButtonWithModal/util.ts +++ b/components/VideoButtonWithModal/util.ts @@ -7,7 +7,7 @@ const getYoutubeEmbedURL = (url: string) => { const videoId = url.split("v=")[1] ? url.split("v=")[1].split("&")[0] : url.split("/").pop(); - return `https://www.youtube.com/embed/${videoId}`; + return `https://www.youtube-nocookie.com/embed/${videoId}`; }; const getLoomEmbedURL = (url: string) => { diff --git a/middleware.ts b/middleware.ts index 4dfba7426d..6333526515 100644 --- a/middleware.ts +++ b/middleware.ts @@ -6,10 +6,10 @@ export function middleware() { // Set custom header response.headers.set(`X-Frame-Options`, `deny`); response.headers.set(`X-Content-Type-Options`, `nosniff`); - response.headers.set(`Content-Security-Policy`, `default-src 'self' https://*.mixpanel.com https://cdn.mxpnl.com https://cdn-dev.mxpnl.com https://ekr.zendesk.com wss://mixpanelsupport.zendesk.com https://mixpanel.com https://*.mixpanel.com; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://*.trustarc.com https://*.kapa.ai https://*.hotjar.com https://cdn.mxpnl.com https://cdn-dev.mxpnl.com https://cdn.rollbar.com https://*.zopim.com https://assets.zendesk.com https://www.youtube.com/embed/ https://connect.facebook.net https://apis.google.com https://accounts.google.com 'unsafe-eval' https://*.6sc.co https://*.bing.com https://*.clarity.ms https://cdnjs.cloudflare.com d2wy8f7a9ursnm.cloudfront.net https://*.doubleclick.net https://*.google.com https://*.google-analytics.com https://*.googlesyndication.com https://www.googletagmanager.com https://*.gstatic.cn https://*.gstatic.com https://*.g2crowd.com https://snap.licdn.com https://*.marketo.com https://*.marketo.net https://mixpanel.com https://*.mixpanel.com https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ https://recaptcha.net https://*.recaptcha.net https://www.redditstatic.com/ads/ https://*.singular.net https://*.ads-twitter.com https://mxpnlcms.wpengine.com https://*.youtube.com https://*.zoominfo.com https://cdn.sprig.com https://js.navattic.com; connect-src 'self' blob: data: https://*.trustarc.com https://kapa-widget-proxy-la7dkmplpq-uc.a.run.app https://*.hotjar.com wss://*.hotjar.com https://*.hotjar.io https://*.mixpanel.com https://cdn.mxpnl.com https://cdn-dev.mxpnl.com https://api.rollbar.com https://api.sprig.com https://cdn.sprig.com https://*.zdassets.com https://mixpanelsupport.zendesk.com https://*.zopim.com wss://*.zopim.com https://storage.googleapis.com https://*.facebook.com https://*.6sc.co https://*.adnxs.com https://*.bing.com https://*.bugsnag.com https://*.clarity.ms https://*.doubleclick.net https://*.google.com https://*.google-analytics.com https://*.googlesyndication.com https://*.g2crowd.com https://*.linkedin.com https://mixpanel.com https://*.mixpanel.com https://*.mktoresp.com https://cdn.linkedin.oribi.io https://*.reddit.com https://www.redditstatic.com/ads/ https://*.singular.net https://mxpnlcms.wpengine.com https://*.zoominfo.com; media-src 'self' https://user-images.githubusercontent.com; img-src 'self' blob: data: https://*.trustarc.com https://www.google.com https://*.gstatic.com https://t2.gstatic.com https://github-production-user-asset-6210df.s3.amazonaws.com https://github.com https://user-images.githubusercontent.com https://avatars.githubusercontent.com/ https://*.chmln-cdn.com https://cdn.mxpnl.com https://cdn-dev.mxpnl.com https://*.zdassets.com https://*.zopim.com https://v2uploads.zopim.io https://*.facebook.com https://*.gravatar.com https://*.wp.com https://*.6sc.co https://*.adnxs.com https://*.adroll.com https://*.bidswitch.net https://*.bing.com https://cdn.bizible.com https://cdn.bizibly.com https://*.bugsnag.com https://*.casalemedia.com https://*.clarity.ms https://*.crwdcntrl.net https://*.doubleclick.net https://*.exelator.com https://*.google-analytics.com https://*.googlesyndication.com https://www.googletagmanager.com https://*.googleusercontent.com https://*.imrworldwide.com https://*.linkedin.com https://mixpanel.com https://*.mixpanel.com https://*.reddit.com https://t.co/ https://analytics.twitter.com https://*.wpengine.com https://mxpnlcms.wpengine.com https://mxpnlcms.wpenginepowered.com https://*.analytics.yahoo.com https://*.google.com https://*.google.ad https://*.google.ae https://*.google.com.af https://*.google.com.ag https://*.google.al https://*.google.am https://*.google.co.ao https://*.google.com.ar https://*.google.as https://*.google.at https://*.google.com.au https://*.google.az https://*.google.ba https://*.google.com.bd https://*.google.be https://*.google.bf https://*.google.bg https://*.google.com.bh https://*.google.bi https://*.google.bj https://*.google.com.bn https://*.google.com.bo https://*.google.com.br https://*.google.bs https://*.google.bt https://*.google.co.bw https://*.google.by https://*.google.com.bz https://*.google.ca https://*.google.cd https://*.google.cf https://*.google.cg https://*.google.ch https://*.google.ci https://*.google.co.ck https://*.google.cl https://*.google.cm https://*.google.cn https://*.google.com.co https://*.google.co.cr https://*.google.com.cu https://*.google.cv https://*.google.com.cy https://*.google.cz https://*.google.de https://*.google.dj https://*.google.dk https://*.google.dm https://*.google.com.do https://*.google.dz https://*.google.com.ec https://*.google.ee https://*.google.com.eg https://*.google.es https://*.google.com.et https://*.google.fi https://*.google.com.fj https://*.google.fm https://*.google.fr https://*.google.ga https://*.google.ge https://*.google.gg https://*.google.com.gh https://*.google.com.gi https://*.google.gl https://*.google.gm https://*.google.gr https://*.google.com.gt https://*.google.gy https://*.google.com.hk https://*.google.hn https://*.google.hr https://*.google.ht https://*.google.hu https://*.google.co.id https://*.google.ie https://*.google.co.il https://*.google.im https://*.google.co.in https://*.google.iq https://*.google.is https://*.google.it https://*.google.je https://*.google.com.jm https://*.google.jo https://*.google.co.jp https://*.google.co.ke https://*.google.com.kh https://*.google.ki https://*.google.kg https://*.google.co.kr https://*.google.com.kw https://*.google.kz https://*.google.la https://*.google.com.lb https://*.google.li https://*.google.lk https://*.google.co.ls https://*.google.lt https://*.google.lu https://*.google.lv https://*.google.com.ly https://*.google.co.ma https://*.google.md https://*.google.me https://*.google.mg https://*.google.mk https://*.google.ml https://*.google.com.mm https://*.google.mn https://*.google.com.mt https://*.google.mu https://*.google.mv https://*.google.mw https://*.google.com.mx https://*.google.com.my https://*.google.co.mz https://*.google.com.na https://*.google.com.ng https://*.google.com.ni https://*.google.ne https://*.google.nl https://*.google.no https://*.google.com.np https://*.google.nr https://*.google.nu https://*.google.co.nz https://*.google.com.om https://*.google.com.pa https://*.google.com.pe https://*.google.com.pg https://*.google.com.ph https://*.google.com.pk https://*.google.pl https://*.google.pn https://*.google.com.pr https://*.google.ps https://*.google.pt https://*.google.com.py https://*.google.com.qa https://*.google.ro https://*.google.ru https://*.google.rw https://*.google.com.sa https://*.google.com.sb https://*.google.sc https://*.google.se https://*.google.com.sg https://*.google.sh https://*.google.si https://*.google.sk https://*.google.com.sl https://*.google.sn https://*.google.so https://*.google.sm https://*.google.sr https://*.google.st https://*.google.com.sv https://*.google.td https://*.google.tg https://*.google.co.th https://*.google.com.tj https://*.google.tl https://*.google.tm https://*.google.tn https://*.google.to https://*.google.com.tr https://*.google.tt https://*.google.com.tw https://*.google.co.tz https://*.google.com.ua https://*.google.co.ug https://*.google.co.uk https://*.google.com.uy https://*.google.co.uz https://*.google.com.vc https://*.google.co.ve https://*.google.co.vi https://*.google.com.vn https://*.google.vu https://*.google.ws https://*.google.rs https://*.google.co.za https://*.google.co.zm https://*.google.co.zw https://*.google.cat; style-src 'self' 'unsafe-inline' https://cdn.mxpnl.com https://cdn-dev.mxpnl.com https://*.google.com https://*.marketo.com https://mixpanel.com https://*.mixpanel.com https://hello.myfonts.net; font-src 'self' data: https://cdn.mxpnl.com https://cdn-dev.mxpnl.com https://mixpanel.com https://*.mixpanel.com https://*.trustarc.com; frame-src 'self' https://*.trustarc.com https://www.googletagmanager.com https://js.stripe.com https://www.loom.com/embed/ https://player.vimeo.com/video/ https://www.youtube.com/embed/ https://*.facebook.com https://accounts.google.com https://static.addtoany.com https://*.bing.com https://*.doubleclick.net https://*.google.com https://*.marketo.com https://mixpanel.com https://*.mixpanel.com https://www.google.com/recaptcha/ https://recaptcha.google.com/recaptcha/ https://recaptcha.net https://*.recaptcha.net https://capture.navattic.com; worker-src 'self' blob:;`); + response.headers.set(`Content-Security-Policy`, `default-src 'self' https://*.mixpanel.com https://cdn.mxpnl.com https://cdn-dev.mxpnl.com https://ekr.zendesk.com wss://mixpanelsupport.zendesk.com https://mixpanel.com https://*.mixpanel.com; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://*.trustarc.com https://*.kapa.ai https://*.hotjar.com https://cdn.mxpnl.com https://cdn-dev.mxpnl.com https://cdn.rollbar.com https://*.zopim.com https://assets.zendesk.com https://www.youtube.com/embed/ https://www.youtube-nocookie.com/embed/ https://connect.facebook.net https://apis.google.com https://accounts.google.com 'unsafe-eval' https://*.6sc.co https://*.bing.com https://*.clarity.ms https://cdnjs.cloudflare.com d2wy8f7a9ursnm.cloudfront.net https://*.doubleclick.net https://*.google.com https://*.google-analytics.com https://*.googlesyndication.com https://www.googletagmanager.com https://*.gstatic.cn https://*.gstatic.com https://*.g2crowd.com https://snap.licdn.com https://*.marketo.com https://*.marketo.net https://mixpanel.com https://*.mixpanel.com https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ https://recaptcha.net https://*.recaptcha.net https://www.redditstatic.com/ads/ https://*.singular.net https://*.ads-twitter.com https://mxpnlcms.wpengine.com https://*.youtube.com https://*.youtube-nocookie.com https://*.zoominfo.com https://cdn.sprig.com https://js.navattic.com; connect-src 'self' blob: data: https://*.trustarc.com https://kapa-widget-proxy-la7dkmplpq-uc.a.run.app https://*.hotjar.com wss://*.hotjar.com https://*.hotjar.io https://*.mixpanel.com https://cdn.mxpnl.com https://cdn-dev.mxpnl.com https://api.rollbar.com https://api.sprig.com https://cdn.sprig.com https://*.zdassets.com https://mixpanelsupport.zendesk.com https://*.zopim.com wss://*.zopim.com https://storage.googleapis.com https://*.facebook.com https://*.6sc.co https://*.adnxs.com https://*.bing.com https://*.bugsnag.com https://*.clarity.ms https://*.doubleclick.net https://*.google.com https://*.google-analytics.com https://*.googlesyndication.com https://*.g2crowd.com https://*.linkedin.com https://mixpanel.com https://*.mixpanel.com https://*.mktoresp.com https://cdn.linkedin.oribi.io https://*.reddit.com https://www.redditstatic.com/ads/ https://*.singular.net https://mxpnlcms.wpengine.com https://*.zoominfo.com; media-src 'self' https://user-images.githubusercontent.com; img-src 'self' blob: data: https://*.trustarc.com https://www.google.com https://*.gstatic.com https://t2.gstatic.com https://github-production-user-asset-6210df.s3.amazonaws.com https://github.com https://user-images.githubusercontent.com https://avatars.githubusercontent.com/ https://*.chmln-cdn.com https://cdn.mxpnl.com https://cdn-dev.mxpnl.com https://*.zdassets.com https://*.zopim.com https://v2uploads.zopim.io https://*.facebook.com https://*.gravatar.com https://*.wp.com https://*.6sc.co https://*.adnxs.com https://*.adroll.com https://*.bidswitch.net https://*.bing.com https://cdn.bizible.com https://cdn.bizibly.com https://*.bugsnag.com https://*.casalemedia.com https://*.clarity.ms https://*.crwdcntrl.net https://*.doubleclick.net https://*.exelator.com https://*.google-analytics.com https://*.googlesyndication.com https://www.googletagmanager.com https://*.googleusercontent.com https://*.imrworldwide.com https://*.linkedin.com https://mixpanel.com https://*.mixpanel.com https://*.reddit.com https://t.co/ https://analytics.twitter.com https://*.wpengine.com https://mxpnlcms.wpengine.com https://mxpnlcms.wpenginepowered.com https://*.analytics.yahoo.com https://*.google.com https://*.google.ad https://*.google.ae https://*.google.com.af https://*.google.com.ag https://*.google.al https://*.google.am https://*.google.co.ao https://*.google.com.ar https://*.google.as https://*.google.at https://*.google.com.au https://*.google.az https://*.google.ba https://*.google.com.bd https://*.google.be https://*.google.bf https://*.google.bg https://*.google.com.bh https://*.google.bi https://*.google.bj https://*.google.com.bn https://*.google.com.bo https://*.google.com.br https://*.google.bs https://*.google.bt https://*.google.co.bw https://*.google.by https://*.google.com.bz https://*.google.ca https://*.google.cd https://*.google.cf https://*.google.cg https://*.google.ch https://*.google.ci https://*.google.co.ck https://*.google.cl https://*.google.cm https://*.google.cn https://*.google.com.co https://*.google.co.cr https://*.google.com.cu https://*.google.cv https://*.google.com.cy https://*.google.cz https://*.google.de https://*.google.dj https://*.google.dk https://*.google.dm https://*.google.com.do https://*.google.dz https://*.google.com.ec https://*.google.ee https://*.google.com.eg https://*.google.es https://*.google.com.et https://*.google.fi https://*.google.com.fj https://*.google.fm https://*.google.fr https://*.google.ga https://*.google.ge https://*.google.gg https://*.google.com.gh https://*.google.com.gi https://*.google.gl https://*.google.gm https://*.google.gr https://*.google.com.gt https://*.google.gy https://*.google.com.hk https://*.google.hn https://*.google.hr https://*.google.ht https://*.google.hu https://*.google.co.id https://*.google.ie https://*.google.co.il https://*.google.im https://*.google.co.in https://*.google.iq https://*.google.is https://*.google.it https://*.google.je https://*.google.com.jm https://*.google.jo https://*.google.co.jp https://*.google.co.ke https://*.google.com.kh https://*.google.ki https://*.google.kg https://*.google.co.kr https://*.google.com.kw https://*.google.kz https://*.google.la https://*.google.com.lb https://*.google.li https://*.google.lk https://*.google.co.ls https://*.google.lt https://*.google.lu https://*.google.lv https://*.google.com.ly https://*.google.co.ma https://*.google.md https://*.google.me https://*.google.mg https://*.google.mk https://*.google.ml https://*.google.com.mm https://*.google.mn https://*.google.com.mt https://*.google.mu https://*.google.mv https://*.google.mw https://*.google.com.mx https://*.google.com.my https://*.google.co.mz https://*.google.com.na https://*.google.com.ng https://*.google.com.ni https://*.google.ne https://*.google.nl https://*.google.no https://*.google.com.np https://*.google.nr https://*.google.nu https://*.google.co.nz https://*.google.com.om https://*.google.com.pa https://*.google.com.pe https://*.google.com.pg https://*.google.com.ph https://*.google.com.pk https://*.google.pl https://*.google.pn https://*.google.com.pr https://*.google.ps https://*.google.pt https://*.google.com.py https://*.google.com.qa https://*.google.ro https://*.google.ru https://*.google.rw https://*.google.com.sa https://*.google.com.sb https://*.google.sc https://*.google.se https://*.google.com.sg https://*.google.sh https://*.google.si https://*.google.sk https://*.google.com.sl https://*.google.sn https://*.google.so https://*.google.sm https://*.google.sr https://*.google.st https://*.google.com.sv https://*.google.td https://*.google.tg https://*.google.co.th https://*.google.com.tj https://*.google.tl https://*.google.tm https://*.google.tn https://*.google.to https://*.google.com.tr https://*.google.tt https://*.google.com.tw https://*.google.co.tz https://*.google.com.ua https://*.google.co.ug https://*.google.co.uk https://*.google.com.uy https://*.google.co.uz https://*.google.com.vc https://*.google.co.ve https://*.google.co.vi https://*.google.com.vn https://*.google.vu https://*.google.ws https://*.google.rs https://*.google.co.za https://*.google.co.zm https://*.google.co.zw https://*.google.cat; style-src 'self' 'unsafe-inline' https://cdn.mxpnl.com https://cdn-dev.mxpnl.com https://*.google.com https://*.marketo.com https://mixpanel.com https://*.mixpanel.com https://hello.myfonts.net; font-src 'self' data: https://cdn.mxpnl.com https://cdn-dev.mxpnl.com https://mixpanel.com https://*.mixpanel.com https://*.trustarc.com; frame-src 'self' https://*.trustarc.com https://www.googletagmanager.com https://js.stripe.com https://www.loom.com/embed/ https://player.vimeo.com/video/ https://www.youtube.com/embed/ https://www.youtube-nocookie.com/embed/ https://*.facebook.com https://accounts.google.com https://static.addtoany.com https://*.bing.com https://*.doubleclick.net https://*.google.com https://*.marketo.com https://mixpanel.com https://*.mixpanel.com https://www.google.com/recaptcha/ https://recaptcha.google.com/recaptcha/ https://recaptcha.net https://*.recaptcha.net https://capture.navattic.com; worker-src 'self' blob:;`); response.headers.set(`X-Permitted-Cross-Domain-Policies`, `none`); response.headers.set(`Referrer-Policy`, `strict-origin`); - response.headers.set(`Permissions-Policy`, `accelerometer=(), camera=(), encrypted-media=(self "https://www.youtube.com" "https://www.loom.com"), fullscreen=(self "https://www.youtube.com" "https://www.loom.com"), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), midi=(), payment=(), usb=()`); + response.headers.set(`Permissions-Policy`, `accelerometer=(), camera=(), encrypted-media=(self "https://www.youtube.com" "https://www.youtube-nocookie.com" "https://www.loom.com"), fullscreen=(self "https://www.youtube.com" "https://www.youtube-nocookie.com" "https://www.loom.com"), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), midi=(), payment=(), usb=()`); // Return response return response diff --git a/pages/_document.js b/pages/_document.js index 0c06cdea5c..5c584aa86f 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -1,10 +1,12 @@ import { Html, Head, Main, NextScript } from "next/document"; -import Script from "next/script"; +import { TrustArcHeadScripts, TrustArcBodyScripts } from "../components/TrustArcScripts/TrustArcScripts"; export default function Document() { return ( -
+
+