Lighting:container – Refused to load the script ‘https://www.youtube.com/iframe_api’ because it violates the following Content Security Policy

The below is a React Component that I’m loading from lightning:container

import React, { Component } from 'react';
import Plyr from 'plyr';

import '../node_modules/plyr/dist/plyr.css';
import './App.css';

class App extends Component {
    componentDidMount() {
        new Plyr('#player');
    }

    render() {
        return (
            <div className="App">
                Player
                <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="hKSr14cUn9Q" />
            </div>
        );
    }
}

export default App;

I’m running into the below issue:

Refused to load the script ‘https://www.youtube.com/iframe_api‘
because it violates the following Content Security Policy directive:
“script-src ‘self’ chrome-extension: ‘unsafe-eval’
https://sfdc.azureedge.net *.visualforce.com ‘unsafe-eval’
https://ssl.gstatic.com/accessibility/

From this link (https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/container_csp.htm) I tried adding the landing_pages to manifest.json:

"landing-pages": [{
    "path": "index.html",
    "content-security-policy-type": "custom",
    "content-security-policy": "script-src 'unsafe-inline' https://www.youtube.com;"
  }]

Even then I’m running into the same issue 🙁
But if I use iframe instead of lightning:container it loads fine.

Any suggestions on what should I do to fix this issue when using lightning:container.

Thanks

— Update
mainfest.json:
{
“landing-pages”: [{
“path”: “index.html”,
“content-security-policy-type”: “custom”,
“content-security-policy”: “script-src ‘self’ www.youtube.com”
}]
}

Should the CSP be added to the response header? but I dont see it 🙁

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

It seems this link: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/container_csp.htm is outdated … script-src wont be obeyed.

Hence third party js files wont be added, so https://www.youtube.com/iframe_api wont work.

Method 2

Did you try adding YouTube URL in content security policy in setup? Type CSP in setup. Click on CSP Trusted sites. Add new CSP Trusted Site just like we used to add a remote site setting. Use below link for further information.
https://help.salesforce.com/articleView?id=csp_trusted_sites.htm&type=5

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0