CODEWITHSUNDEEP
vue.jsvuejs2content-security-policynuxt.js
mahatmanich
mahatmanich

Reputation: 11013

Content Security Policy nuxtjs embedding youtube videos

I am totally new to javascript development and I am hitting a brick wall.

In my nuxtjs app I want to embed plyr (vue-plyr module) and some youtube videos.

Locally everything works flawlessly, but once I put the site online. Videos are not loading and plyr is also not loading.

So I have come to the issue of Content Security Policy. I have tried several things but none work.

Here is my latest attempt to get it to work:

  render: {
    csp: {
      reportOnly: true,
      hashAlgorithm: 'sha256',
      policies: {
        'default-src': ["'self'" ],
        'img-src': ['https:', 'http:',],
        'style-src': ["'self'", "'unsafe-inline'"],
        'script-src': [
          "'self'",
          "'unsafe-inline'",
          '*.youtube.com',
          '*.ytimg.com',
          '*.plyr.io',
        ],
        // 'connect-src': ['*.youtube.com', '*.ytimg.com'],  
      },
      // addMeta: true
    }
  },

Am I doing it right?

Upvotes: 0

Views: 1189

Answers (1)

granty
granty

Reputation: 8496

  1. CSP with reportOnly: true, blocks nothing, only sends reports. Therefore it should not affect Plyr player at all.
    You may be edit a file that is not actually being used to publish the CSP. Quite possible, really CSP is published by Helmet middleware.
    It need to see the CSP violation message from the browser console to understand what's going on.

  2. Content Security Policy to play youtube video via Plyr player a little bit more complicated than you shown.

Upvotes: 1

Related Questions