Refused to frame because of ancestor violation with CSP's while using a connected app and displayed through the canvas app

Question

Received this error:

Refused to frame '' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' *.force.com *.visualforce.com ".

I added the urls to my CSP FRAME ANCESTORS and I am still getting the errors - I did notice that when using the canvas app and the connected app together in the visualforce iframe the source code shows that my page is an iframe in an iframe. I have a suspicion that the iframe "inception" is causing issues with recognizing the CSP ancestors.

I need to follow this route essentially because our app has auth0 as part of the flow and had to follow the connected app route.

Answer 1

Canvas apps are served from "*.salesforce.com" so that also needs to be included in your CSP header. For example with a Lightning + VisualForce + Canvas combination the following CSP header should do the trick:

Content-Security-Policy: frame-ancestors https://{NAME}.lightning.force.com https://{NAME}--c.vf.force.com https://{NAME}.my.salesforce.com

where {NAME} is appropriately substituded.

You can check the canvas origin yourself by using browser developer tools and checking what the origin header is set to for request that is triggered by Canvas.

To check the visualforce iframe origin, you can include javascript on the visual force page that logs the origin:

<script>
  console.log("My origin:", window.location.origin);
</script>