CORS problem on local and main

Developers
1

Hi,

Any reason why I can’t http_request between two canister, an asset canister and a server.mo canister on my localhost. I have tweaked the ic-asset.json5 without success. Strangely, I am able to call external cdn from the server canister when I add them to the ic-asset file.

Also, I had a look at the html source of the mycanister page (Internet Computer Loading) and it seems that the CSP open many address. This tag doesn’t appear for my canisters on both local and on ICP


<meta http-equiv="Content-Security-Policy" content="default-src 'none';
        connect-src 'self' https://identity.internetcomputer.org/ https://identity.ic0.app https://nns.ic0.app https://api.geoiplookup.net https://api.iplocation.net 'self' https://icp-api.io https://3r4gx-wqaaa-aaaaq-aaaia-cai.icp0.io https://2hx64-daaaa-aaaaq-aaana-cai.raw.icp0.io https://7hi6i-7iaaa-aaaaq-aaaqq-cai.raw.icp0.io https://7sppf-6aaaa-aaaaq-aaata-cai.raw.icp0.io https://zcdfx-6iaaa-aaaaq-aaagq-cai.raw.icp0.io https://3r4gx-wqaaa-aaaaq-aaaia-cai.icp0.io;
        img-src 'self' data: https://nns.internetcomputer.org/ https://nns.ic0.app/ https://nns.raw.ic0.app/ https://3r4gx-wqaaa-aaaaq-aaaia-cai.icp0.io;
        child-src 'self';
        manifest-src 'self';
        script-src 'unsafe-eval' 'unsafe-inline' 'strict-dynamic' 'sha256-z3re+V1Zk4tynXGrjrFoz8XdETFOQRY3SuiOP5WFHgQ=' 'sha256-5jvyMAjtYX4LBiTZYnv4rE0QmgsPCJ94RCKdzPXG1Mc=' 'sha256-gy87KdMwRAxWQJW/QU14NXUU8Hn/tBIzxZZ651zgco8=' 'sha256-E5BEJXRTSWCBLIMVYMfTu95YuG+DxN20F7HOfAGOKRU=';
        base-uri 'self';
        form-action 'none';
        style-src 'self' 'unsafe-inline';
        font-src 'self';
        upgrade-insecure-requests;">
2

Do I get it right, you cannot call a canister from your frontend app served in the browser right?

If correct, got few question:

It’s happening locally or on mainnet?
If locally, how do you serve your app (npm run … or dfx start)?
Your backend runs on the same domain / network?
The call that leads to the error is using agent-js?

Assuming it’s happening in a browser, can you maybe a screenshot of your browsers tab displaying the error?

3

Hi,

This is on my localhost and I’m using dfx start --clean
I don’t use agents, no JS on the frontend.

I have a frontend canister with an index.html file

This file use HTMX to make a Ajax call to the backend canister like this :

<div hx-get="http://be2us-64aaa-aaaaa-qaabq-cai.localhost:4943/" hx-trigger="load" hx-target="#outerBody" hx-swap="innerHTML">          
</div>

On my backend, I use the server.mo package to receive the call and return Html to the frontend :

server.get("/", func(req : Request, res : ResponseClass) : async Response {
		var contacts = await Contact.listContact(1);
		var templateContent = ContactView.templateContact(contacts);
		res.send({
		    status_code = 200;
		    headers = [("Content-Type", "text/html")];
		    body = Text.encodeUtf8(templateContent);
		    streaming_strategy = null;
		    cache_strategy = #noCache;
		 });

Here is the network tab

image
image2044×166 25.1 KB

I have tried on the mainnet and have the same problem, the message is a CSP error
https://su64i-vaaaa-aaaan-qek5q-cai.raw.icp0.io/

Currently, I’m running the frontend (serve the frontend code) on the backend, but I cannot access the assets correctly.
http://be2us-64aaa-aaaaa-qaabq-cai.raw.localhost:4943/ (Take more then 10 secondes to load)

4

This error on mainnet raw makes sense to me. The CSP does not accept the target domain in the connect-src rule. Add the targeted canister id to the rule and it should do.

Capture d’écran 2023-11-08 à 22.24.30
Capture d’écran 2023-11-08 à 22.24.303072×2062 614 KB

5

In you browser, which URL are you using to load your frontend locally?

It for example it’s on another port than the canister you try to call - http://be2us-64aaa-aaaaa-qaabq-cai.localhost:4943 - it might be the issue.

In addition, don’t know how the certificed asset canister of dfx works but, I can imagine that even locally a Content Security Header is defined so might good be that even locally the targeted canister is not white listed.

When you have the CORS error in your browser, did you check what’s the actually rule and if it matches the canister you are targeting?

1 Like
6

Ok! Thank you very much :slight_smile: I’m getting in this right now. I’ll have to get a better knowledge on CSP.

Also, I imagine you noticed how long it took for the page to load…
The first part of the page load in about 2-3 seconds, I’m ok with this. But the call to my contact actor canister to get the contact list take very long. I thought that a query func would take not more than 4 secondes, am I right on this ? This is the link for my actual frontend (its the backend who response) until : https://rnftg-fiaaa-aaaam-abxja-cai.raw.icp0.io/

7

A query function should be super fast, rather few milliseconds than seconds.

1 Like
8

Hi, just put back what I had a a couple of weeks ago at : https://su64i-vaaaa-aaaan-qek5q-cai.icp0.io/
Still stuck with this error

Access to fetch at ‘https://a4gq6-oaaaa-aaaab-qaa4q-cai.raw.icp0.io/contact/list?id=rnftg-fiaaa-aaaam-abxja-cai’ from origin ‘https://su64i-vaaaa-aaaan-qek5q-cai.icp0.io’ has been blocked by CORS policy: Request header field hx-target is not allowed by Access-Control-Allow-Headers in preflight response.

I have added the backend address to the “Content-Security-Policy” tag. I have tried different approach without success. Is there a tag in the ic-assets.json to allow a new type of request ?
Thank you

9

If you curl or use other method to fetch https://a4gq6-oaaaa-aaaab-qaa4q-cai.raw.icp0.io/contact/list?id=rnftg-fiaaa-aaaam-abxja-cai everything is fine and correct? Just to rule out other issues.

If no other issues, if you fully remove the CSP, does it works out?

10

Nope! Using this https://a4gq6-oaaaa-aaaab-qaa4q-cai.raw.icp0.io/index?id=rnftg-fiaaa-aaaam-abxja-cai with a GET in Postman return a 404. Surprisingly, https://rnftg-fiaaa-aaaam-abxja-cai.raw.icp0.io/index works! This is what I was using to make things work! Is this legal :smiley:

11

I’m not sure what your canister does so, I cannot really tell if surprising or not unfortunatelly. I would maybe try to solve the 404 before trying the solve the CSP issue, kind of feel that both are related. Locally everything works fine?

12

Yes, both are on localhost. . Using this method (https://rnftg-fiaaa-aaaam-abxja-cai.raw.icp0.io/) works fine. I was trying to resolve the 10-15 seconds delay between the canisters call, thought it would be related. Thank you for your help, I’ll try to resolve the 404 and report back if I find something.

1 Like