child-src

The child-src directive defines the valid sources for web workers and nested browsing contexts loaded using elements such as <frame> and <iframe>. It's a crucial CSP directive that helps prevent malicious code execution through workers and frames.

Recommended Values

  • 'self' Allows the resource to be loaded and executed

  • https://subdomain.domain.com/path Allows the resource to be loaded and executed

  • 'none' No sources are allowed

Recommended child-src configuration

Content-Security-Policy: child-src 'none';

Tips & Tricks

  • If child-src is not defined, the default-src directive will be used as fallback.

  • Use 'self' as a baseline and add specific trusted domains as needed.

  • Consider using frame-src for frame-specific controls and worker-src for worker-specific controls in modern browsers.

  • Avoid using broad permissions like '*' as it can expose your application to security risks.

Possible Values

  • 'none': No sources are allowed
  • 'self': Only resources from the same origin are allowed
  • URLs: Specific domains or paths (e.g., https://trusted-domain.com)
  • Schemes: Protocol schemes (e.g., https:, data:)

Example Configurations

Example policy with multiple sources

CSP Header allowing same-origin and specific domain

Content-Security-Policy: child-src 'self' https://example.com;

Allowed

<!-- allowed by 'self' -->
<iframe src="/local-frame.html"></iframe>

<!-- allowed by https://example.com -->
<iframe src="https://example.com/external-frame.html"></iframe>

<!-- allowed by 'self' -->
<script>
var worker = new Worker('/js/worker.js');
</script>

Blocked

<!-- blocked as https://malicious.website.com is not in the allowed sources -->
<iframe src="https://malicious.website.com"></iframe>

<!-- blocked as data: URI is not allowed -->
<script>
var blockedWorker = new Worker("data:application/JavaScript, ...");
</script>

Additional Information

  • The child-src directive is being replaced by more specific directives in modern browsers
  • Use frame-src for controlling frame sources
  • Use worker-src for controlling worker sources
  • If neither frame-src nor worker-src is specified, child-src acts as a fallback
  • Consider implementing additional security measures like sandbox attributes for iframes

Related Resources

External Articles

Related Documentation Sections