Best Practices
Last updated: Apr 2nd, 10:58am
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>
Cross-Origin-Opener-Policy
Cross-Origin-Opener-Policy (COOP) is a security feature that helps prevent cross-origin attacks, such as cross-site scripting (XSS) and data leaks. It allows a web application to control how it interacts with other browsing contexts, like iframes and popups, from different origins.
By setting a COOP header, a website can ensure that its documents can only be opened by documents from the same origin. This can help isolate the web application from potentially malicious content loaded from different origins, enhancing security and user privacy.
If you are using the PayPal Web SDK on your webpage, we recommend that you set the header to Cross-Origin-Opener-Policy: same-origin-allow-popups
.
For more details, you can refer to the Cross-Origin-Opener-Policy documentation