Skip to main content
CESDK/CE.SDK/FAQ

CORS, CSP and Web Security

Tips on how to deal with issues related to CORS and CSP

Assets and CORS#

The following error messages indicate that the image you have passed to the SDK could not be loaded due to Cross-Origin Resource Sharing (CORS):

  • Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at [...] may not be loaded.
  • SECURITY_ERR: DOM Exception 18
  • Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

If you are loading images from external sources (e.g. from an AWS bucket), you need to first configure Cross-Origin Resource Sharing for both the server and the image:

  • If you're loading images from S3, make sure you created a CORS policy for your S3 bucket (More information here)
  • If you're loading images from your own server, make sure the CORS header is set (More information here)
  • Make sure you enable CORS for the loaded image (More information here)

Content-Security-Policy (CSP) problems#

If you work in an environment with a strict content security policy, you might encounter issues related to script-src restrictions.

The following is an example of a minimal CSP setup required by CE.SDK to work:

script-src 'self' 'unsafe-eval' mydomain.com:* mycdn.com:* cdn.img.ly; worker-src blob:;

  • 'unsafe-eval' This is required because some code generated by our web-assembly compiler relies on runtime-evaluated functions to integrate the WASM runtime properly into its Javascript environment. It is also required to allow instantiating WASM modules at all.

  • mydomain.com:* Replace this with the actual origin that you serve the @cesdk/cesdk-js code from. You can probably also use 'self' if you serve Javascript from the same page as your HTML. In case you are using a bundler like webpack to build your app, this would be the origin that you serve your app bundle from.

  • mycdn.com:* Replace this with your actual CDN domain. If you are hosting our assets on your own CDN you need to whitelist those in your CSP.

  • cdn.img.ly If you are loading our assets from the IMG.LY CDN (this is the default, if you don't configure baseUrl), you need to add this domain to your CSP

  • worder-src: blob: (note the colon) This is only required if both of these points are true:

    • you are using our web worker (currently this is only used for video export)
    • you serve our assets (which contain the web worker source) from an origin that is different from the one you use to serve @cesdk/cesdk-js (or your application bundle)

    In that scenario, we are using a workaround involving a Blob-URL to avoid the problem that web browsers enforce a same-origin policy when instantiating web workers. We don't need that workaround when assets are served from the same origin as your main script.