Aller au contenu principal

Blocage des tags en utilisant Guardian

Demander le consentement n'est pas suffisant pour votre site web, vous devez aussi vous assurer que les cookies ou autres technologies de suivi ne sont pas utilisés sans le consentement de l'utilisateur.

Pour cela, nous proposons un script appelé Guardian.

info

À ce stade, nous supposons que vous avez suivi les instructions de cette section pour installer la CMP.

1. Configuration la whitelist/blacklist dans la section <head>​

Dans la section <head>, configurez les urls à mettre sur liste noire (blacklist) ou liste blanche (whitelist) dans les dynamicallyLoadedScripts dans le paramètre de la variable de configuration configSFBXAppConsent, comme ceci :

<script type="text/javascript">
    const configSFBXAppConsent = {
        appKey: 'YOUR_APP_KEY',
        dynamicallyLoadedScripts: {
            blacklist: [
                /facebook/, /youtube/,
            ],
            whitelist: [
                /appconsent/,
            ]
        },
    }
</script>
info

Dans le code ci-dessus, nous prenons le contrôle sur Facebook et Youtube. Si vous voulez ajouter un nouveau domaine, disons ads-twitter.com, ajoutez simplement cette nouvelle entrée :

,/ads-twitter.com/

2. Ajout du script Guardian​

Ajoutez le script Guardian dans la section <head>, après la définition de la variable configSFBXAppConsent.

<script>
    (function(h,p){typeof exports=="object"&&typeof module<"u"?p(exports):typeof define=="function"&&define.amd?define(["exports"],p):(h=typeof globalThis<"u"?globalThis:h||self,p(h.sfbxguardian={}))})(this,function(h){"use strict";let p=!1;function P(t){function e(i){for(var s=0,r=0;r<i.length;r++)s=i.charCodeAt(r)+((s<<5)-s);return s}function n(i){return"hsl("+e(i)%360+", 100%, 80%)"}return function(i,...s){if(p&&console.log){if(i instanceof Error&&console.error){console.error(i);return}console.log("%c "+t+" %c "+i,"background: "+n(t)+"; color: #000","",...s)}}}function _(t){if(t===void 0)return p;p=!!t}const B=()=>{const t=window.location.search.substr(1).split("&");if(t==="")return{};for(var e={},n=0;n<t.length;++n){var i=t[n].split("=",2);if(i.length===1)e[i[0]]="";else{var s=decodeURIComponent(i[1].replace(/\+/g," "));s==="false"&&(s=!1),s==="0"&&(s=0),s==="true"&&(s=!0),s===""&&(s=null),e[i[0]]=s}}return e},d=P("guardian"),H=()=>{const t=B();(t.ac_cmd&&t.ac_cmd==="debug"||configSFBXAppConsent&&configSFBXAppConsent.debug)&&_(!0)},f="javascript/blocked",F="application/javascript",c={SCRIPT:"SCRIPT",IFRAME:"IFRAME",BLOCKQUOTE:"BLOCKQUOTE"},w=[c.SCRIPT,c.IFRAME,c.BLOCKQUOTE],o={blacklist:configSFBXAppConsent.dynamicallyLoadedScripts.blacklist,whitelist:configSFBXAppConsent.dynamicallyLoadedScripts.whitelist},l={blacklisted:[],hiddenBlacklisted:[]},U="sfbx_guardian_",b={INSTAGRAM:"instagram-media",TWITTER:"twitter-tweet",TIKTOK:"tiktok-embed"},g={};g[b.INSTAGRAM]="instagram.com",g[b.TIKTOK]="tiktok.com",g[b.TWITTER]="twitter.com";const D=[b.INSTAGRAM,b.TWITTER,b.TIKTOK],k=t=>{switch(t.tagName){case c.BLOCKQUOTE:return j(t);case c.IFRAME:case c.SCRIPT:return K(t)}},K=t=>t.src&&(!t.type||t.type!==f)&&E(t.src),j=function(t){return t.className.split(" ").some(n=>D.includes(n)&&W(n))},W=function(t){const e=g[t];return E(e)},E=t=>(!o.blacklist||o.blacklist.some(e=>e.test(t)))&&(!o.whitelist||o.whitelist.every(e=>!e.test(t))),v=t=>{switch(t.tagName){case c.BLOCKQUOTE:return q(t);case c.IFRAME:case c.SCRIPT:return X(t)}},X=function(t){const e=t.getAttribute("src");return A(e)},q=function(t){return t.className.split(" ").some(n=>G(n))},G=function(t){const e=g[t];return A(e)};function A(t){return o.blacklist&&o.blacklist.every(e=>!e.test(t))||o.whitelist&&o.whitelist.some(e=>e.test(t))}const Q=t=>t.offsetHeight>0&&t.offsetWidth>0,u=(t,e)=>{Object.keys(e).forEach(n=>{t.style[n]=e[n]})},$=function(){let t="";const e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(let n=0;n<8;n++)t+=e.charAt(Math.floor(Math.random()*e.length));return t},S="#0252B6",V={width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},z={display:"flex",flexDirection:"column",borderRadius:"9px",backgroundColor:"white",padding:"20px",border:`1px solid${S}`,fontFamily:"Montserrat, Roboto, Tahoma, Helvetica, Arial, sans-serif"},Y={display:"flex",justifyContent:"center",marginTop:"20px"},J={display:"flex",justifyContent:"center",alignItems:"center",padding:"10px 20px",borderRadius:"6px",fontStyle:"normal",fontWeight:"500",fontSize:"1.1rem",borderColor:`1px solid ${S}`,cursor:"pointer",backgroundColor:`${S}`,color:"white",boxShadow:"none",letterSpacing:"0.05rem"},Z={fontSize:"1rem",fontWeight:400,color:"#02244F",lineHeight:"1.6rem"};class ee{constructor(e,n,i){this.node=e,this.parentElement=i,this.id=n,this.isVisible=!0,this.wrapper=document.createElement("div"),this.init()}init(){this.isVisible=Q(this.node),this.isVisible||this.addToHiddenBlacklisted(),this.buildHtml()}addToHiddenBlacklisted(){y.observe(this.parentElement),C.observe(this.parentElement),l.hiddenBlacklisted.push(this)}buildHtml(){u(this.wrapper,V),this.wrapper.setAttribute("id",this.id),this.buildContainer()}buildContainer(){const e=document.createElement("div");e.classList.add("message-container"),u(e,z),this.isVisible||u(e,{display:"none"}),e.appendChild(this.buildHeader()),e.appendChild(this.buildMessage()),e.appendChild(this.buildButton()),this.wrapper.appendChild(e)}buildHeader(){return document.createElement("div")}buildMessage(){const e=document.createElement("aside");return u(e,Z),e.innerHTML=this.buildDefaultText(),e}buildDefaultText(){return"<p>Le contenu est bloqué, car vous avez décidé de refuser les cookies et usages nécessaires à son affichage.</p>  <p>Usages nécessaires : </p> <ul style='margin-bottom: 16px'><li>Interactions avec les réseaux sociaux : Ces cookies vous permettent de partager des contenus de notre site, d’interagir avec les réseaux sociaux et d'afficher des contenus provenant des réseaux sociaux.</li></ul>"}buildButton(){const e=document.createElement("div"),n=document.createElement("div");return u(e,Y),u(n,J),n.innerHTML="Modifier mon consentement",n.onclick=this.callbackDisplayCMP,e.appendChild(n),e}callbackDisplayCMP(){window.__tcfapi("show",2,()=>{},{})}getMessageContainer(){return this.wrapper.querySelector(".message-container")}}class te{constructor(e){this.node=e,this.oldType=null,this.parentElement=this.node.parentElement,this.message=null,this.id=`${U}${$()}`,this.init()}init(){const{tagName:e}=this.node;switch(e){case c.SCRIPT:this.blockScript();break;case c.IFRAME:case c.BLOCKQUOTE:this.blockElementWithSrc();break}this.removeNodeToDocument()}blockScript(){const{type:e}=this.node;this.oldType=e,this.node.setAttribute("type",f),this.addBeforeScriptListener()}blockElementWithSrc(){this.addWrapper()}addBeforeScriptListener(){const e=function(n){this.node.getAttribute("type")===f&&n.preventDefault(),this.node.removeEventListener("beforescriptexecute",e)};this.node.addEventListener("beforescriptexecute",e)}removeNodeToDocument(){this.parentElement&&this.parentElement.removeChild(this.node)}addWrapper(){d("add wrapper",this.id,this.node,this.parentElement),this.message=new ee(this.node,this.id,this.parentElement),this.parentElement.appendChild(this.message.wrapper)}}const O=new MutationObserver(t=>{for(let e=0;e<t.length;e++){const{addedNodes:n}=t[e];for(let i=0;i<n.length;i++){const s=n[i],{tagName:r,nodeType:a}=s;a===1&&w.includes(r)&&d("checking",k(s),s),a===1&&w.includes(r)&&k(s)&&(L(s),d("observer",l))}}}),y=new ResizeObserver(t=>{t.forEach(e=>{const n=I(e.target);if(n){const i=n.getMessageContainer(),s=e.target.offsetHeight>0?"flex":"none";d("resizeObserver",e.target,n.id,s,e.target.offsetHeight),u(i,{display:s})}})}),C=new IntersectionObserver(t=>{t.forEach(e=>{const n=I(e.target);if(n){const i=n.getMessageContainer(),s=e.isIntersecting&&e.target.offsetHeight>0?"flex":"none";d("intersectionObserver",e.target,n.id,s,e.target.offsetHeight),u(i,{display:s})}})});function I(t){return l.hiddenBlacklisted.find(e=>t&&e.parentElement.isEqualNode(t))}function L(t){const e=new te(t);l.blacklisted.push(e)}const ne=()=>{O.observe(document.documentElement,{childList:!0,subtree:!0})},x=document.createElement,m={src:Object.getOwnPropertyDescriptor(HTMLScriptElement.prototype,"src"),type:Object.getOwnPropertyDescriptor(HTMLScriptElement.prototype,"type")};document.createElement=function(...t){if(t[0].toLowerCase()!=="script")return x.bind(document)(...t);const e=x.bind(document)(...t);try{Object.defineProperties(e,{src:{...m.src,set(n){E(n)&&m.type.set.call(this,f),m.src.set.call(this,n)}},type:{...m.type,get(){const n=m.type.get.call(this);return n===f||E(this.src)?null:n},set(n){const i=k(e.src)?f:n;m.type.set.call(this,i)}}}),e.setAttribute=function(n,i){n==="type"||n==="src"?e[n]=i:HTMLScriptElement.prototype.setAttribute.call(e,n,i)}}catch{console.warn("sfbxguardian: unable to prevent script execution for script src ",e.src,`.
`,'A likely cause would be because you are using a third-party browser extension that monkey patches the "document.createElement" function.')}return e};const se=new RegExp("[|\\{}()[\\]^$+*?.]","g"),ie=function(...t){oe(t),re();let e=0;[...l.blacklisted].forEach((n,i)=>{const{id:s,node:r,oldType:a}=n;if(v(r)){switch(r.tagName){case c.SCRIPT:ce(r,a);break;case c.IFRAME:N(s),le(r,s);break;case c.BLOCKQUOTE:N(s),ae(r,s);break}d("node unblocked",r),l.blacklisted.splice(i-e,1),e++}}),o.blacklist&&o.blacklist.length<1&&(O.disconnect(),y.disconnect(),C.disconnect(),d("observers disconnected"))},N=t=>{const e=l.hiddenBlacklisted.find(n=>n.id===t);e&&(y.unobserve(e.parent),C.unobserve(e.parent),l.hiddenBlacklisted=l.hiddenBlacklisted.filter(n=>n.id!==t))};function oe(t){t.length<1?(o.blacklist=[],o.whitelist=[]):(o.blacklist&&(o.blacklist=o.blacklist.filter(e=>t.every(n=>{if(typeof n=="string")return!e.test(n);if(n instanceof RegExp)return e.toString()!==n.toString()}))),o.whitelist&&(o.whitelist=[...o.whitelist,...t.map(e=>{if(typeof e=="string"){const i=".*"+e.replace(se,"\\$&")+".*";if(o.whitelist.every(s=>s.toString()!==i.toString()))return new RegExp(i)}else if(e instanceof RegExp&&o.whitelist.every(n=>n.toString()!==e.toString()))return e;return null}).filter(Boolean)]))}function re(){const t=document.querySelectorAll(`script[type="${f}"]`);for(let e=0;e<t.length;e++){const n=t[e];v(n)&&L(n)}}function ce(t,e){const n=document.createElement("script");for(let i=0;i<t.attributes.length;i++){let s=t.attributes[i];s.name!=="src"&&s.name!=="type"&&n.setAttribute(s.name,t.attributes[i].value)}n.setAttribute("src",t.src),n.setAttribute("type",e||F),document.head.appendChild(n)}function le(t,e){M(t,"iframe",e).setAttribute("src",t.src)}function ae(t,e){const n=M(t,"blockquote",e),i=t.children;for(let s=0;s<i.length;s++)n.appendChild(i[s].cloneNode(!0))}function M(t,e,n){const i=document.getElementById(n),s=i.parentElement,r=document.createElement(e);for(let a=0;a<t.attributes.length;a++){let T=t.attributes[a];T.name!=="src"&&T.name!=="type"&&r.setAttribute(T.name,t.attributes[a].value)}return s.removeChild(i),s.appendChild(r),r}if(typeof configSFBXAppConsent>"u")throw console.error("SFBX Guardian has not been executed! The configuration (configSFBXAppConsent) must be placed before calling the script "),Error();if(!configSFBXAppConsent.dynamicallyLoadedScripts||!configSFBXAppConsent.dynamicallyLoadedScripts.blacklist&&!configSFBXAppConsent.dynamicallyLoadedScripts.whitelist)throw console.warn("SFBX Guardian: No whitelist or blacklist has been defined"),Error();function de(){H(),d("init"),ne()}const R=B();(!R.ac_cmd||R.ac_cmd!=="no_guardian")&&de(),h.unblock=ie,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
</script>
Important

Le script Guardian doit être placé après la variable configSFBXAppConsent pour fonctionner.

Voilà, tous les tags sont maintenant bloqués jusqu'à ce que l'utilisateur donne son accord. Si l'utilisateur refuse les cookies dans la notice, les tags resteront bloqués.

info

Cette bibliothèque utilise les fonctionnalités principales de JavaScript, observer et override CreateElement. Si vous rencontrez des problèmes lors des tests, veuillez désactiver l'extension Chrome ou Firefox dans votre navigateur.

Nous ajouterons régulièrement de nouvelles fonctionnalités (plus de contrôles, une base de données partagée de tags, etc.)

Un problème ou une suggestion ? Envoyez un e-mail à support@sfbx.io.

Dernière mise à jour le