Uploading Widget v3 CSP

  • 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 jQuery widget:

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 API
  • https://uploadcare.s3-accelerate.amazonaws.com — Multipart uploading
  • wss://ws.pusherapp.com or ws://ws.pusherapp.com — Pusher WebSocket server we're using to track uploading status. Protocol (secure or insecure) depends on window.location.protocol value.