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' 'wasm-unsafe-eval' mydomain.com:* mycdn.com:* cdn.img.ly; worker-src blob:;

  • script-src 'wasm-unsafe-eval' This is required to allow instantiating the WASM module inside the Creative Engine. Note: If you need to support Safari 15 or lower, you will have to use unsafe-eval instead, because wasm-unsafe-eval is only supported in Safari 16 and later versions.

  • script-src 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.

  • script-src 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.

  • script-src 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

  • worker-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 core assets (which contain the WASM and 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.

Custom URI Resolvers#

If you

  • are using our video export web worker
  • are using a custom URI resolver via via engine.editor.setURIResolver()

you will have to also add script-src 'unsafe-eval' to your CSP. We use eval() to serialize the uri resolver function into a string to pass it into the Worker.

This can be avoided by using absolute URLs for all your assets.