The Content-Security-Policy directive 'frame-ancestors' does not support the source expression ''unsafe-inline'' for allowed site - Magento

EricBrown
August 20, 2021
81 views
0 votes
2 Answers

I am working on a Magento 2 site with a custom extension to add a whitelist to Magento’s CSP. I am running into an issue with the following error: "The Content-Security-Policy directive ‘frame-ancestors’ does not support the source expression ”unsafe-inline”"

The source of this issue is the following file: https://translate.googleapis.com/element/TE_20210503_00/e/js/element/element_main.js

The problem is, I have this site whitelisted under frame-ancestors, yet it’s still being blocked. Here is the policy I have so far:

<policy id="frame-ancestors">
    <values>
        <value id="google-apis" type="host">*.googleapis.com</value>
    </values>
</policy>

This is the same format I have for all other policies and all those policies have been whitelisted correctly. This is the only one that isn’t being affected.

I have followed this tutorial for making my CSP extension, for reference: https://magento.stackexchange.com/a/312350/73083

I’m not sure what I am doing wrong, this is the last issue I need to fix before adding CSP to the site.

Tags: content-security-policy magento2

Answers

- granty
- August 20, 2021 at 1:49 pm
- 0 votes
0
1. frame-ancestors directive, indeed, does not support an 'unsafe-inline' token. This token is supported by script-src, style-src and defaulr-src directives only.
If you have got error: "The Content-Security-Policy directive ‘frame-ancestors’ does not support the source expression ”unsafe-inline”" this means you have a rule: frame-ancestors ... 'unsafe-inline' ...; in the CSP.
Possible you mistakenly publishes somewhere a second CSP with this rule. Or this error occurs in the third-party iframe, but not in your web app.
1. You have to use not frame-ancestors but frame-src directive if you wish to allow something like <frame src='https://accounts.googleapis.com/auth/...'. Because frame-ancestors *.googleapis.com controls an embedding your web site into *.googleapis.com web page. Whereas frame-src controls which sites are allowed to be embeded on your page.
Login or Signup to reply.

- RohitChauhan
- September 2, 2022 at 2:35 pm
- 0 votes
0
It has mentioned in 2.4.3 release Magento doc., this is still a known issue with Magento: https://devdocs.magento.com/guides/v2.4/release-notes/open-source-2-4-3.html#known-issues. So, we can do is a temporary fix for being time.

The solution is to creating own custom module to extending the Magento_Csp module. In the etc/config.xml file we want to modify the frame-ancestor policy and set it to 0.
```
<?xml version="1.0"?>
 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
<default>
    <csp>
        <policies>
            <storefront>
                <frame-ancestors>
                    <inline>0</inline>
                </frame-ancestors>
            </storefront>
            <admin>
                <frame-ancestors>
                    <inline>0</inline>
                </frame-ancestors>
            </admin>
        </policies>
    </csp>
</default>
```
Then run:
```
bin/magento s:up
bin/magento s:s:d -f
bin/magento c:f
```
This will help it’s a working solution.

Happy Coding!!
Login or Signup to reply.