Security - Solving the "Content Security Policy (CSP) Header Not Set": frame-ancestors directive and frame-src directive

Resources

Content-Security-Policy: frame-ancestors directive

Content-Security-Policy: frame-src directive

Background

Since we don't yet know which related sites might embed our page, we don't need to include the frame-ancestors directive in the Content Security Policy (CSP) headers at this time.

Regarding the frame-src directive, our project contains an <iframe> element that loads a resource from https://my.auth.first.my.com.

Additionally, we load the script ${MY_AUTH_URL}/sso/sso.js from https://my.auth.first.my.com. This script creates an <iframe> element that loads resources from https://my.auth.second.my.com.

<script nonce={nonce} async src={`${MY_AUTH_URL}/sso/sso.js`} />

Step-by-Step Guide

Although we only know the domain value of MY_AUTH_URL, we don’t have the exact domain (https://my.auth.second.my.com) that is dynamically loaded by the script ${MY_AUTH_URL}/sso/sso.js.

However, based on the project requirements, we can assume that the domain used within the script will follow the pattern https://my.auth.XXX.my.com. To accommodate this, we can configure the frame-src directive to allow all subdomains under .my.com.

frame-src https://*.my.com;