0

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 :(

  • Container doesn't support CSP for API's and CDN. Check the teams Dreamforce presentation, it's told at the limitations. The workaround would be posting messages to the parent component and let it do the communication. – dzh May 3 '18 at 16:14
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.

| improve this answer | |
-1

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

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.