DASTRA
Français
Français
  • Introduction à Dastra
  • 🇪🇺Rappels utiles
    • Introduction au RGPD
    • Notions clefs du RGPD
      • Donnée personnelle
      • Registre des traitements
      • Analyse d'impact
      • Durées de conservation
      • Droits des personnes
      • Confidentialité dès la conception et par défaut
      • Mesures de sécurité
      • Violations de données
    • Gestion des risques
      • Définition des risques
      • Evaluation d'un risque
      • Risques sous-traitants
  • 👨‍💻Bien commencer
    • Mise en place
      • Les notions importantes
      • Créer et paramétrer un espace de travail
      • Créer et paramétrer les unités organisationnelles
      • Désigner un DPO
      • Ajouter une autorité chef de file
      • Inviter des utilisateurs
      • Gérer les rôles et permissions
      • Créer puis affecter des équipes
      • Questions fréquentes
    • Tutoriel
      • Etape 1 : La mise en place
      • Etape 2 : Cartographier vos traitements de données à caractère personnel et établir le registre
      • Etape 3 : Gérer les risques
      • Etape 4 : Prioriser les actions à mener
      • Etape 5 : Implémenter les processus internes
      • Etape 6 : Documenter la conformité
    • Support
      • L'assistant dastronaute
      • L'aide en ligne
      • Demande de support
      • Le processus de support client
  • ⚙️Les fonctionnalités
    • Tableau de bord
    • Généralités
      • Filtres avancés
      • Importer vos données (Excel, Csv)
      • Gestion des tags
      • Champs personnalisés
      • Assistant IA
      • Modèles email
      • 😇Foire aux questions
      • Discussions internes
    • Cartographie des données
      • Référentiels
    • Registre des traitements
      • Registre "Responsable de traitement"
      • Registre "Sous-traitant"
      • Etablissez votre registre
      • Exporter / importer le registre
      • Utiliser un modèle de traitement
      • Déclarer un traitement
      • Compléter un traitement
        • Général
        • Parties prenantes
        • Finalités
        • Actifs
        • Données et conservation
        • Personnes concernées
        • Droits des personnes
        • Destinataires
          • Transferts de données hors UE
        • Mesures de sécurité
        • Analyse d'impact
        • Documents
        • Récapitulatif
      • Créer des relations entre les traitements
      • Fraicheur des traitements
      • Partager le registre
      • Visualisation des données
        • Visualiser l'arborescence des traitements
        • Visualiser la cartographie des données du registre
        • Visualiser la carte des transferts
      • Questions fréquentes
    • Gestion de documents (GED)
      • Modèles de documents
    • Questionnaires et PIA
      • Créer ou modifier un modèle de questionnaire ou un PIA
        • Créer ou modifier un modèle de PIA
      • Planifier un questionnaire ou un PIA
      • Partager un rapport d'audit ou PIA
      • Supprimer un audit ou un modèle d'audit
      • Questions fréquentes
    • Privacy hubs
      • Créer un Privacy hub
      • Paramétrer votre Privacy hub
        • Page d'accueil et configuration générale
        • Questionnaires
        • Exercice des droits
        • Registre des traitements
        • Documents
        • Organigramme
        • Contacts
        • Sécurité
        • Apparence et design
      • Prévisualiser et partager votre Privacy hub
      • Collecter des projets de traitements, d'incidents, d'actifs ou de contrats
    • Contrats
      • Déclarer un contrat
      • Structure d'un contrat
      • Les documents
      • Les actifs
      • Les signataires
      • Utilisateurs associés
      • Signer le contrat
      • Intégration avec Docusign
      • Versionner le contrat
      • Revue régulière du contrat
      • Modèles de contrats dynamiques
    • Gestion des risques
      • Glossaire
      • Le processus de gestion des risques
        • 1. Identifier
        • 2. Evaluer
        • 3. Maîtriser
        • 4. Contrôler
        • Récapitulons
      • Comparaison Dastra / eBios RM
      • Associer un risque à un traitement
      • Questions fréquentes
    • Planification
      • Créez ou modifier une tâche
      • Créer ou modifier un projet ou une itération
      • Suivre, filtrer ou exporter les tâches
      • Personnaliser le workflow des tâches
      • Synchroniser avec d'autres calendriers
      • Questions fréquentes
    • Exercices des droits
      • Gestion des demandes d'exercices de droits
      • Formulaire de collecte de demandes
      • Intégration technique
      • Intégration de l'API
    • Violations de données
      • Documenter une nouvelle violation de données
      • Exportez vos violations de données
    • Cookies
      • Mise en place de la bannière
        • Etude préliminaire
        • Scannez les cookies déposés sur votre site Web
        • Classifiez les cookies par catégories de consentement
        • Les finalités des cookies
        • Configurez un widget de consentement aux cookies
        • Collectez les preuves de consentement cookies
        • Allez plus loin sur le consentement des cookies
        • En cas d'indisponibilité
      • Intégration technique
        • Fonctionnement de la bannière
        • Démarrage rapide
          • Wordpress
        • Gestion de la langue
        • Tester l'intégration d'un widget
        • Blocage des cookies
          • Blocage des iframes (twitter/youtube...)
          • Google Tag Manager
        • Design avancé
        • Gérer le consentement programmatiquement
        • Identification des utilisateurs
        • Applications mobiles
          • Applications hybrides
          • Applications natives
        • TCF 1.1/2.0
      • Conformité RGAA
      • Dépannage
    • Revue régulière (fraicheur)
    • Rapports personnalisés
      • Intégration dans les outils d'analyse de données (BI)
    • Systèmes d'IA
      • Etablir un registre des Systèmes d'IA
      • Analyse de risque et valeur ajoutée
      • Notice de transparence
      • Le référentiel des modèles d'IA
    • Configuration avancée
      • Rôles et permissions
      • Single Sign On (SSO)
        • SAML 2
        • OpenId
        • ADFS
        • Active Directory (MS Entra)
        • Okta
        • Problèmes connus
      • SCIM
      • Gestion des clés d'API
      • Notifications
      • Adresses emails de collecte
      • Intégrations OneDrive/Google Drive
      • Etapes de processus
      • Webhooks
      • Configuration du SMTP
      • Règles de workflows
      • Modèles de messages
      • Domaines emails
  • PARTENAIRES
    • Portail partenaire
  • 📄La documentation API
    • Liste des endpoints d'API
    • Cas d'usage de l'API
    • Configuration API
    • Authentification
    • API References
    • Intégrations via Zapier
      • Questions fréquentes
  • 🛡️La sécurité
    • Sécurité chez Dastra
    • Authentification forte
    • Qualité de nos services
  • Certifications
  • 🤖DIVERS
    • Foire aux questions
    • Problèmes connus
    • Notes de version
    • Webinaires
Propulsé par GitBook
Sur cette page
  • Exemples de services utilisant des iframes
  • Méthode 1 : En utilisant le SDK
  • Méthode 2 : Implémentation manuelle

Cet article vous a-t-il été utile ?

  1. Les fonctionnalités
  2. Cookies
  3. Intégration technique
  4. Blocage des cookies

Blocage des iframes (twitter/youtube...)

De nombreux sites ont recours aux iframes pour afficher des vidéos, des tweets... Il est donc nécessaire de demander le consentement aux utilisateurs avant de charger le contenu de l'iframe.

Dernière mise à jour il y a 4 ans

Cet article vous a-t-il été utile ?

Exemples de services utilisant des iframes

Lecteurs vidéos : Youtube, Vimeo, DailyMotion...

Réseaux sociaux : Twitter, Facebook,...

Lecteurs de podcasts

Lecteurs audios

Méthode 1 : En utilisant le SDK

Notre SDK vous permettra de bloquer toutes les iframes de la page en affichant un message de blocage personnalisable :

En cliquant sur "I accept" le consentement au service spécifique sera automatiquement dispatché. Le système permet également de capturer un refus des cookies dans la CMP Dastra.

Un exemple simple avec les iframes de lecteurs de vidéo youtube :

<iframe width="560" height="315" src="https://www.youtube.com/embed/aJ1qDx8lv2Y" allowfullscreen></iframe>
<script>
  // Set up youtube iframe blocking
  dastra.push(['iframeBlock', {
    selector: 'iframe[src*="youtube.com"]',
    service: 'youtube', // service slug (Check your Dastra cmp config)
    body:'<p>By clicking on "I accept" the trackers will be deposited and you will be able to view the video. You can withdraw your consent at any time :</p>',
    buttonLabel:'I accept',
    buttonClass: 'btn btn-primary'
  }])
</script>

Il sera possible de personnaliser l'apparence du message (fond, polices...) avec votre feuille css. Le message de blocage est intégré au DOM de la page avec une classe ".datra-blocking-iframe".

Méthode 2 : Implémentation manuelle

vous pouvez également implémenter votre propre logique

<script>
  // Select all youtube iframes 
  var iframes = document.querySelectorAll('iframe[src*="youtube.com"]');

  // Foreach iframe disable the iframe by transforming "src" attribute to "data-blocked-src"
  iframes.forEach(function(iframe){
    var iframeSrc = iframe.getAttribute('src');
    iframe.setAttribute('data-blocked-src', iframeSrc );
    iframe.setAttribute('src','about:blank');
    var divAlert = document.createElement('div');
    divAlert.classList.add('alert-iframe-cookie')
    divAlert.innerHTML = '<p>En cliquant sur « j’autorise » les traceurs seront déposés et vous pourrez visualiser la vidéo. Vous gardez la possibilité de retirer votre consentement à tout moment. En cliquant sur « je refuse », vous ne pourrez pas accéder à la vidéo. : </p><div class="button-container"><button type="button" onclick="SetConsent(\'youtube\', true)" href="#" class="btn btn-success" >Accept the cookies</button></div><p>Consentements fournis par <a href="https://www.dastra.eu">Dastra</a></p>';
    iframe.after(divAlert);
  });

  // On cookie consent, 
  window.addEventListener('dastra:consent:youtube', function() {
    // Load iframe when accepted
    document.querySelectorAll('iframe[data-blocked-src*="youtube.com"]').forEach(function(iframe){
      iframe.setAttribute('src', iframe.getAttribute('data-blocked-src'));
      iframe.removeAttribute('data-blocked-src');
    });
    
    // Delete message when accepted
    document.querySelectorAll('.alert-iframe-cookie').forEach(function(alert){
      alert.style.display = "none";
    });
  });

  function SetConsent(service, consent){
    dastra.cookieConsent.consent.setServiceConsent(service, true);
    dastra.cookieConsent.consent.save();
  };

</script>
<style>
  .alert-iframe-cookie{
    background-color:#CCC;
    padding: 20px 20px;
    color:#fff;
    text-align:center;
  }
  
  .button-container{
    margin: 10px auto; 
  }
  
</style>

Voilà

⚙️