1

I can't use livereload anymore, because I get

Refused to load the script 'http://www.company.de:35729/livereload.js' because it violates the following Content Security Policy directive ... Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback."

Im not sure why I get this error even though the script is hosted on my own server.

I tried to allow it like this in my

app\code\Company\Csp\etc\csp_whitelist.xml

<?xml version="1.0"?>
<csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp/etc/csp_whitelist.xsd">
    <policies>
        <policy id="script-src">
            <values>
                <value id="livereload" type="host">www.company.de*</value>
                ...

But it does not work this way.

Notes:

<?php

namespace Company\Csp\Plugin;   // <-- in my real script, Company is replaced by my vendor name

use Magento\Csp\Model\Collector\CspWhitelistXmlCollector;
use Magento\Csp\Model\Policy\FetchPolicy;

class Csp
{

    /**
     * @inheritDoc
     */
    public function afterCollect(CspWhitelistXmlCollector $cspWhitelistXmlCollector, $defaultPolicies = []): array
    {
        $ip = dns_get_record($_SERVER['HTTP_HOST'],DNS_A)[0]['ip'];
        $port = "35729";
        $hostUrl = $ip . ':' . $port;

        $defaultPolicies[] = new FetchPolicy(
            "connect-src",
            false,
            [$hostUrl, "ws://" . $hostUrl],
            [],
            false,
            false,
            false,
            [],
            [],
            false,
            false
        );
        $defaultPolicies[] = new FetchPolicy(
            "script-src",
            false,
            [$hostUrl],
            [],
            false,
            false,
            false,
            [],
            [],
            false,
            false
        );
        return $defaultPolicies;
    }
}
Improve this question

3 Answers 3

Reset to default
2

Check out this extension:

https://github.com/ghostunicorns/module-csp-livereload

How to install:

composer require ghostunicorns/module-csp-livereload

Cheers

Improve this answer
1

I had the same issue, and fixed it with the following:

Create a plugin

app/code/Company/Csp/etc/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Csp\Model\Collector\CspWhitelistXmlCollector">
        <plugin name="cspAddLivereload" type="MyCompany\Csp\Plugin\Csp" sortOrder="1" disabled="false"/>
    </type>
</config>

app/code/Company/Csp/Plugin/Csp.php

<?php

namespace Company\Csp\Plugin;

use Magento\Csp\Model\Collector\CspWhitelistXmlCollector;
use Magento\Csp\Model\Policy\FetchPolicy;

class Csp
{

    /**
     * @inheritDoc
     */
    public function afterCollect(CspWhitelistXmlCollector $cspWhitelistXmlCollector, $defaultPolicies = []): array
    {
        $defaultPolicies[] = new FetchPolicy(
            "connect-src",
            false,
            ["www.company.de:35729", "ws://www.company.de:35729"],
            [],
            false,
            false,
            false,
            [],
            [],
            false,
            false
        );
        $defaultPolicies[] = new FetchPolicy(
            "script-src",
            false,
            ["www.company.de:35729"],
            [],
            false,
            false,
            false,
            [],
            [],
            false,
            false
        );
        return $defaultPolicies;
    }
}

This adds the specified policies to the Csp programmatically.

I have changed some things to work with your URL, so it's not fully tested

Improve this answer
15
  • Does not work unfortunatelly. I still get the error. I changed company to my own vendor/domain everywhere of course.
    – Black
    Aug 12, 2020 at 10:25
  • Have you tried running bin/magento setup:di:compile and ensured that the module is enabled?
    – Toine H
    Aug 12, 2020 at 11:54
  • Your URL should appear in the CSP in the headers of the HTML page. Chrome dev console -> Network Tab -> your html page -> Headers -> Content-Security-Policy
    – Toine H
    Aug 12, 2020 at 12:09
  • The module is enabled and compiled. There is no content-security-policy there is only content-security-policy-reporty-only in "Response Headers"
    – Black
    Aug 12, 2020 at 12:34
  • The cache should also be cleaned if you haven't already. If that doesn't help, then please check if the Plugin is loaded. Possibly adding die; somewhere in the afterCollect() function (if you are on a dev environment). If that doesn't do anything, the Plugin may not be loaded correctly
    – Toine H
    Aug 12, 2020 at 12:55
1

Create csp_whitelist.xml path: app/code/Sample/Module/etc/csp_whitelist.xml If your livereload connects to ws://127.0.0.1:35729/livereload it should be this:

<csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
               xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp/etc/csp_whitelist.xsd">
    <policies>
        <policy id="connect-src">
            <values>
                <value id="livereload" type="host">ws://127.0.0.1:35729/livereload</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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