[Résolu] Content Security Policy pour YouTube sous Fastify

Bonsoir,

Je me retrouve confronté à un problème d'autorisation CSP pour YouTube :

Refused to connect to 'https://youtube.com/oembed?url=http://youtube.com/watch?v=3Bs4LOtIuxg' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

Ma stack est basée sur Fastify et j'utilise Helmet pour gérer les autorisation CSP, plus exactement une version encapsulé pour Fastify : @fastify/helmet. Fondamentalement sous le capot c'est la même chose, cependant je précise au cas où...

Voici ma config' sous Fastify :

import helmet from '@fastify/helmet'

app.register(helmet, {
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self' 'unsafe-inline'"],
      imgSrc: [
        "'self' data: *.openstreetmap.org",
        "'self' data: *.openstreetmap.fr",
        "'self' data: *.ign.fr",
        "'self' data: *.youtube.com",
        "'self' data: *.ytimg.com", // YouTube, certaines miniatures du player et notamment l'image par défaut.
      ],
      frameSrc: ["'self' data: *.youtube.com"],
    },
  },
})

Il est certain que le problème ne vient pas d'ailleurs que ce code (ex: configuration serveur) car lorsque je supprime le code Helmet ici présent je retrouve l'usage de mes lecteurs YouTube. À l'inverse, les autorisations pour OpenStreetMap et IGN ne posent aucun problème.

Ce qui me rend fou c'est que lorsque je prototypais sous Express.js je n'avais aucun problème de lecture de mes vidéos YouTube :

const helmet = require('helmet')

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: ["'self' 'unsafe-inline'"],
      imgSrc: [
        "'self' data: *.openstreetmap.org",
        "'self' data: *.openstreetmap.fr",
        "'self' data: *.ign.fr",
        "'self' data: *.youtube.com",
        "'self' data: *.ytimg.com", // YouTube, certaines miniatures du player et notamment l'image par défaut.
      ],
      frameSrc: ["'self' data: *.youtube.com"],
    },
  })
)

Voilà voilà, si quelqu'un d'entre a une idée, à moins que le problème soit là sous mes yeux... dans tous les cas je suis preneur.
Modifié par Olivier C (09 Feb 2024 - 22:38)

Salut,

peut être une une petite piste : regarde dans l'onglet réseau les urls appelées.

Il me semble que tu puisses régler le problème des csp avec une <meta />

niuxe a écrit :
Peut être une une petite piste : regarde dans l'onglet réseau les urls appelées.

Lorsque je supprime les règles Helmet les ressources YouTube sont bien présentes avec un statut HTTP de 200. Sinon nada, tout est bloqué et elles n'apparaissent même pas.

Salut,
normalement, les règles CSP pour les medias se font avec media-src. Mais je n'ai jamais utilisé helmet pour mettre en place le CSP, c'est sans doute différent. Je mets le CSP directement dans le htaccess, en texte.
Parce que tes url youtube et autres sont dans img-src. D'ailleurs pour frame, tu as sorti la règle de img-src pour la mettre dans fram-src.
Modifié par Bongota (09 Feb 2024 - 23:23)

Maintenant, si tu veux quitter helmet et le faire à la main, voici, je suis généreux à 23 h et quelques :

# Content-Security-Policy
<IfModule mod_headers.c>
    Header set Content-Security-Policy "style-src 'self' 'unsafe-inline'; script-src 'self'; img-src 'self'; base-uri 'self'; font-src 'self'; object-src 'none'; media-src 'self'  https://mesvideos.b-cdn.net;"
 
</IfModule>
# /Content-Security-Policy

Modifié par Bongota (09 Feb 2024 - 23:26)

Bongota a écrit :
Parce que tes url youtube et autres sont dans img-src.

Pour les images oui, encore que, comme je l'ai commenté dans mon code, il faut aussi "*.ytimg.com" si l'on veut être sûr de récupérer toutes les images miniatures. Mais pour la vidéo par elle-même il faut bien "frame-src" en plus.

Bongota a écrit :
D'ailleurs pour frame, tu as sorti la règle de img-src pour la mettre dans fram-src.

Dans mon code le nom de domaine YouTube est placé au deux endroits.
Modifié par Olivier C (09 Feb 2024 - 23:34)

Bon, au final j'ai trouvé une solution qui ne me satifait pas car j'ai mis un paramètre "https:" dans "defaut-src", ce qui n'est pas top à mon sens, et aussi ça ne m'explique pas pourquoi cela fonctionnait sur Express.

Solution temporaire avec Helmet (nettoyé de ses redondances au passage) :

import helmet from '@fastify/helmet'

app.register(helmet, {
  contentSecurityPolicy: {
    //useDefaults: false,
    directives: {
      defaultSrc: ["'self'  https:"], 
      imgSrc: [
        "'self'",
        'data:',
        '*.openstreetmap.org',
        '*.openstreetmap.fr',
        '*.ign.fr',
        '*.youtube.com',
        '*.ytimg.com', // YouTube, certaines miniatures du player et notamment l'image par défaut.
      ],
      frameSrc: ["*.youtube.com"],
    },
  },
  //crossOriginEmbedderPolicy: false,
  //crossOriginOpenerPolicy: true
})

La même chose sans Helmet, placé dans un "hook" Fastify (la solution que je vais retenir au final, un poil plus rapide, mais surtout moins "magique" pour moi) :

app.addHook('onRequest', (req, res, done) => {
  // prettier-ignore
  res.header(
    'Content-Security-Policy', "default-src 'self'  https:;base-uri  'self';font-src 'self'  https:  data:;form-action 'self';frame-src 'self' data: *.youtube.com;img-src 'self' data: *.openstreetmap.org *.openstreetmap.fr *.ign.fr *.youtube.com *.ytimg.com;object-src 'none';script-src 'self';script-src-attr 'none';style-src 'self'  https:  'unsafe-inline';upgrade-insecure-requests",
    'Cross-Origin-Opener-Policy', 'same-origin',
    'Cross-Origin-Resource-Policy', 'same-origin',
    'Origin-Agent-Cluster', '?1',
    'Referrer-Policy', 'no-referrer',
    'Strict-Transport-Security', 'max-age=15552000; includeSubDomains',
    'X-Content-Type-Options', 'nosniff',
    'X-DNS-Prefetch-Control', 'off',
    'X-Download-Options', 'noopen',
    'X-Frame-Options', 'SAMEORIGIN',
    'X-Permitted-Cross-Domain-Policies', 'none',
    'X-XSS-Protection', '0',
  ) // Set referrer policy to same-origin
  done()
})

Pour ceux que cela intéresse j'ai développé longuement sur StackOverflow.

Dans mon malheur j'ai appris plein de trucs que je ne connaissais pas, mais ceci dit cela ne me donne pas encore le mot de la fin, mon ticket reste ouvert...

@Bongota : Autant pour moi pour `media-src`, j'ai mal interprêté une erreur en console (moi et l'anglais ça fait deux) et je n'étais pas allé jusqu'à vérifier l'existence de cette règle sur MDN. Effectivement elle existe bel et bien et concerne les balises HTMLMediaElement.

Et oui : personne n'a répondu sur StackOverflow (mais il faut dire que c'est assez élitiste comme système, même si c'est bien pratique).

Quoi qu'il en soit j'ai trouvé une solution satisfaisante que je posterais plus tard, quand je l'aurai éprouvé un peu. Et les infos sympas et bien présentées, je les ai trouvées sur... Alsacreations : Guidelines, Sécurité front-end (HTTP).

Je renonce à savoir pourquoi avec la même config Helmet je n'avais pas la même résultat sur Express que sur Fastify. C'était un mauvais point de départ pour débuger et j'ai perdu pas mal de temps avec ça. Mais au final ce n'est pas très important, il vaut mieux se concentrer sur la logique CSP, c'est bien plus formateur et profitable. Du coup, suppression de Helmet.js : moins de "magie" et plus de compréhension du code fondamental (et en plus c'est plus rapide de 5 à 10% par rapport à Helmet selon les dire même du créateur du plugin). C'est toujours ça de pris.
Modifié par Olivier C (11 Feb 2024 - 14:44)