Loading model via GLTFLoader with 0.133 throws CSP Error in my web plugin

I’m getting the following issue after upgrading ThreeJS from 0.103 to 0.118 in Chrome and Edge:

Refused to connect to ‘blob:’ because it violates the following Content Security Policy directive: "connect-src ‘self’ *.

I guess that’s a similar issue of nzjony question, but I’m not able to change the Content Security Policy of my plugin webserver users.
Is there anything that I can do to pass through this?

There are many parts of the three.js codebase that might use Object (Blob) URLs, which appear to be blocked by your CSP here. If you can share a demo or the code we might be able to tell you which feature you’re using that conflicts, otherwise I think you’ll need to inspect the code in your application and the error yourself. GLTFLoader would be one example, I think you could avoid using Blobs by switching from .glb to .gltf with external textures if necessary.

Thank you for your valuable time, McCurdy!

I’m getting this GLTFLoader error:

image

My avatar is loaded but without any textures.

I’m catching the textureLoader with this:

 #loadTexture = async (textureUrl: string) => {
        return new Promise((resolve, reject) => {
            if (!this.#textureLoader) this.#textureLoader = new TextureLoader();
            this.#textureLoader.load(textureUrl, resolve, reject, (e) => {
                reject(e)
            });
        }).catch(() => {
            throw this.#throwExceptionWithCallback(unhandledTexturePromise);
        })
    };

And using GLTFLoader like this:

#asyncLoadGLTF = (
        url: string,
        onProgress: OnProgress,
        onError?: OnError,
    ): Promise<GLTF> =>
        new Promise((res: (scene: GLTF) => void, rej: (err: Error) => void) => {
            if (!this.#gltfLoader) return rej(errorAvatarNotInitialized);
            const onLoaded = (scene: GLTF) => res(scene);
            const onErrorGLTF = onError || ((e: ErrorEvent) => rej(e.error));
            this.#gltfLoader.load(url, onLoaded, onProgress, onErrorGLTF);
        });

Remembering that this error only occurs only from 0.118

The code above looks OK, unfortunately can’t tell which part of your larger codebase violates the CSP though. My guess would be that a blob URL is created here:

This is how GLTFLoader handles textures embedded in a .glb file. The same code exists in r103 though, so I’m not sure why the error would be new. You may need to experiment to see what happens without textures, etc., to narrow things down.

1 Like