Content Security Policy
Last updated: Nov 19th, 11:49pm
Content Security Policy (CSP) is a security measure that helps prevent a range of attacks on a website, including Cross Site Scripting (XSS), clickjacking, and other code injection attacks. CSP adds a special HTTP header to web pages that tells the browser to load only approved content sources for each type of resource, such as scripts, stylesheets, and images. By enforcing these restrictions, CSP limits the potential attack vectors for malicious actors.
To integrate PayPal's JavaScript SDK, you need to add PayPal's script sources to your CSP's approved list so the browser trusts the scripts to handle transactions. You reduce the risk of XSS and similar attacks by ensuring that only scripts from trusted PayPal sources can run.
Our CSP recommendation: use 'unsafe-inline'
Note: If you prefer to not use 'unsafe-inline' see the following Using a nonce instead of 'unsafe-inline' section for more details.
| Value | Description |
|---|---|
child-src |
*.paypal.com *.paypalobjects.com *.venmo.com |
connect-src |
*.paypal.com *.paypalobjects.com *.venmo.com |
frame-src |
*.paypal.com *.paypalobjects.com *.venmo.com |
img-src |
*.paypal.com *.paypalobjects.com *.venmo.com data: |
script-src |
*.paypal.com *.paypalobjects.com *.venmo.com 'unsafe-inline' |
style-src |
*.paypal.com *.paypalobjects.com *.venmo.com 'unsafe-inline' |
Example CSP
1default-src 'self'; script-src 'self' *.paypal.com *.paypalobjects.com *.venmo.com 'unsafe-inline'; connect-src 'self' *.paypal.com *.paypalobjects.com *.venmo.com; child-src 'self' *.paypal.com *.paypalobjects.com *.venmo.com; frame-src 'self' *.paypal.com *.paypalobjects.com *.venmo.com; img-src 'self' *.paypal.com *.paypalobjects.com *.venmo.com data:; style-src 'self' *.paypal.com *.paypalobjects.com *.venmo.com 'unsafe-inline';
Using a nonce instead of 'unsafe-inline'
Using a nonce with your CSP is safer than 'unsafe-inline'. A nonce is a random string added to a script or style tag and in the CSP header, permitting specific inline scripts or styles while blocking others. This method is more secure than 'unsafe-inline', which can create potential security risks.
Our CSP recommendation: use a nonce
Note: When using a nonce, be sure to pass the nonce into your JS SDK script. See the following Adding nonce to your JS SDK integration section for more details.
| Value | Description |
|---|---|
child-src |
*.paypal.com *.paypalobjects.com *.venmo.com |
connect-src |
*.paypal.com *.paypalobjects.com *.venmo.com |
frame-src |
*.paypal.com *.paypalobjects.com *.venmo.com |
img-src |
*.paypal.com *.paypalobjects.com *.venmo.com data: |
script-src |
*.paypal.com *.paypalobjects.com *.venmo.com nonce-YOUR_NONCE |
style-src |
*.paypal.com *.paypalobjects.com *.venmo.com nonce-YOUR_NONCE |
Example CSP
1default-src 'self'; script-src 'self' *.paypal.com *.paypalobjects.com *.venmo.com nonce-aus44zz6eg; connect-src 'self' *.paypal.com *.paypalobjects.com *.venmo.com; child-src 'self' *.paypal.com *.paypalobjects.com *.venmo.com; frame-src 'self' *.paypal.com *.paypalobjects.com *.venmo.com; img-src 'self' *.paypal.com *.paypalobjects.com *.venmo.com data:; style-src 'self' *.paypal.com *.paypalobjects.com *.venmo.com nonce-aus44zz6eg;
Adding nonce to your JS SDK integration
- Vanilla JS
- React (JS)
- ES Module
1<script nonce="YOUR_NONCE" data-csp-nonce="YOUR_NONCE" src="https://www.paypal.com/sdk/js?client-id=test" />2<script nonce="YOUR_NONCE">3 paypal.Buttons().render('#paypal-button');4</script>