Uploading Widget v3 CSP
On this page
- We’ve built the next version of File Uploader. Check out its CSP rules here.
Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement to malware distribution.
-- MDN Web Docs
Here is the basic list of rules needed for the Uploading Widget v3:
frame-src https://social.uploadcare.com/;
script-src https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js https://ucarecdn.com/libs/widget-tab-effects/1.x/uploadcare.tab-effects.js;
img-src https://ucarecdn.com blob: data:;
media-src blob:;
style-src 'sha256-z2tSHZZND7S0k4apE+cUuKYecpmTP6hEpQNUsBKJ7/k=' 'sha256-Svhv+Czr4YhnAxqEBWYz7xQFr62J0XStJJwc2l72URI=';
connect-src https://upload.uploadcare.com https://uploadcare.s3-accelerate.amazonaws.com wss://ws.pusherapp.com ws://ws.pusherapp.com
frame-src
frame-src https://social.uploadcare.com/;
We use iframe
to integrate external upload sources.
You MUST add this rule if you are using an external upload
source (such as Facebook or Google Drive).
The list of all available upload sources is here.
script-src
script-src-elem https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js https://ucarecdn.com/libs/widget-tab-effects/1.x/uploadcare.tab-effects.js;
This rule applies if you integrate File Uploader via the script tag. Here you should specify the list of URLs that you use to connect the File Uploader.
The example above specifies two URLs:
https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js
https://ucarecdn.com/libs/widget-tab-effects/1.x/uploadcare.tab-effects.js
Those are File Uploader full minified bundle and Effects Tab bundle.
img-src and media-src
img-src https://ucarecdn.com blob: data:;
media-src https://ucarecdn.com blob:;
Here, https://ucarecdn.com
is our default CDN.
You should change it in case you're using Custom CDN CNAME.
blob:
and data:
are needed to be able to show previews
before file upload.
style-src
style-src 'sha256-z2tSHZZND7S0k4apE+cUuKYecpmTP6hEpQNUsBKJ7/k=' 'sha256-Svhv+Czr4YhnAxqEBWYz7xQFr62J0XStJJwc2l72URI=';
The example above specifies two SHA hashes: File Uploader styles and Effects Tab styles.
File Uploader adds inline styles dynamically, so you need to specify SHA hash for those styles or use the unsafe-inline flag, which is highly unrecommended.
To calculate SHA hash, you could use Chrome Developer Tools:
- Open page with enabled CSP and integrate File Uploader.
- Open Developer Tools and see the console output.
uploadcare.full.min.js:35 Refused to apply inline style because it violates the
following Content Security Policy directive: "default-src 'self'".
Either the 'unsafe-inline' keyword, a hash ('sha256-4G3/zsAXNgsfv+V7zWLxJbqyQgdoBPW9c9QT3xIa6L4='),
or a nonce ('nonce-...') is required to enable inline execution.
Here is, 'sha256-4G3/zsAXNgsfv+V7zWLxJbqyQgdoBPW9c9QT3xIa6L4='
is the
style's calculated SHA hash which you can use for style-src
rule.
connect-src
connect-src https://upload.uploadcare.com https://uploadcare.s3-accelerate.amazonaws.com wss://ws.pusherapp.com ws://ws.pusherapp.com
While running, File Uploader could make requests to the following list of domains:
https://upload.uploadcare.com
— Upload APIhttps://uploadcare.s3-accelerate.amazonaws.com
— Multipart uploadingwss://ws.pusherapp.com
orws://ws.pusherapp.com
— Pusher WebSocket server we're using to track uploading status. Protocol (secure or insecure) depends onwindow.location.protocol
value.