this post was submitted on 04 Jul 2023
5 points (100.0% liked)

Web Development

3441 readers
4 users here now

Welcome to the web development community! This is a place to post, discuss, get help about, etc. anything related to web development

What is web development?

Web development is the process of creating websites or web applications

Rules/Guidelines

Related Communities

Wormhole

Some webdev blogsNot sure what to post in here? Want some web development related things to read?

Heres a couple blogs that have web development related content

CreditsIcon base by Delapouite under CC BY 3.0 with modifications to add a gradient

founded 1 year ago
MODERATORS
snowe
erlingur
Ategon
5
CORS error while making request to lemmy API (self.webdev)
submitted 1 year ago by starman to c/webdev
15 comments fedilink hide all child comments
 

Hello, I have a problem with CORS and I think this is right community to get help.

When I use this code:

import { LemmyHttp } from 'lemmy-js-client';
const client = new LemmyHttp('https://lemmy.ml');
const { posts } = await client.getPosts({
    limit: 10,
    page: 1
});

to get posts from lemmy.ml (using lemmy-js-client), I get:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://lemmy.ml/api/v3/post/list?limit=10&page=1. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 400.

I have tried to add header like this:

const client = new LemmyHttp('https://lemmy.ml', {
    headers: {
        'Access-Control-Allow-Origin': '*'
    }
});

but result is the same.

Can someone help me with this?

top 14 comments
sorted by: hot top controversial new old
[–] data0 3 points 1 year ago* (last edited 1 year ago) (1 children)

The Access-Control-Allow-Origin is meant to be set on the server side and is part of a mechanism called CORS. MDN has a good guide on CORS (It might seem too long and complex to read if you just want to access some data on an API, but knowing how it works is essential if you plan to work with HTTP-based APIs.)

In short, lemmy.ml (and probably most other Lemmy instances) doesn't seem to allow API access from within a browser. You'll have to build a Node.js proxy (with lemmy-js-client) and use that to connect the browser to.

[–] starman 2 points 1 year ago* (last edited 1 year ago)

Thanks for the link, I'll read it.

[–] [email protected] 2 points 1 year ago* (last edited 1 year ago) (1 children)

you can't add cors headers on client side, they should be added on the server of lemmy.ml. In addition to that I made a GET request with curl to the URL of https://lemmy.ml/api/v3/post/list?limit=10&page=1 and It worked. Try this on your terminal

curl --location 'https://lemmy.ml/api/v3/post/list?limit=10&page=1'

EDIT: I tried to lemmy-js-client and it worked.

[–] RonSijm 3 points 1 year ago (2 children)

curl doesn't care about CORS, CORS is a browser implementation.

For CORS to work the url should be returning a header of access-control-allow-origin : * (or an header specific to the origin)

It seems like they are working on it: https://github.com/LemmyNet/lemmy/pull/3421

[–] [email protected] 1 points 1 year ago

yes but OP still can't do anything on the client side, it should be configured on the server

[–] starman 1 points 1 year ago* (last edited 1 year ago) (1 children)

So I'll have to wait for this PR to be merged. I think they will do it soon because it provides more positive value that negative at this moment

[–] RonSijm 1 points 1 year ago (1 children)

I don't know if the PR is going to solve it though.

If I'm looking at the file changed: https://github.com/LemmyNet/lemmy/pull/3421/files

It seems like the "Lemmy Instance Owner" would have to set an environment variable of "LEMMY_CORS_ORIGIN" - and if there's no variable set it defaults back to:

.allow_any_origin() .allow_any_method() .allow_any_header()

I don't know if instances are going to "allow *"

[–] starman 1 points 1 year ago* (last edited 1 year ago) (1 children)

I haven't found .allow_any_origin() in source (query), but isn't it sorta equivalent to Access-Control-Allow-Origin: *? Or I'm misinterpreting something

Edit: from the author of PR:

It's also worth noting that the behavior of allow_any_origin makes the server echo back CORS headers that respect the request's Origin header, as opposed to send_wildcard which sends back * for the CORS headers. I don't think this really matters, but it's something to keep in mind.

[–] data0 1 points 1 year ago (1 children)

Setting it to * will prevent the browser from including credentials in the request (cookies). Dynamically setting it to the origin of the requesting client effectively does the same but also allows for using credentials.

[–] RonSijm 1 points 1 year ago (1 children)

I don't think it would be a very good implementation to just let any site dynamically request to be allowed by CORS, including with credentials... A malicious site could do way too many things on the users behave

A possible solution would be something like how reddit or github do it - have the user first accept an "Allow third party app / website to access my account" - and after that, add those sites to the Access-Control-Allow-Origin

[–] data0 1 points 1 year ago (1 children)

What are the exact attack vectors you're thinking of?

[–] RonSijm 1 points 1 year ago

Well I'm not expert on CORS, nor with the Lemmy API, so it's probably better to read about CORS exploits in more detailed articles.. https://www.freecodecamp.org/news/exploiting-cors-guide-to-pentesting/ for example

It seems Lemmy is storing a JWT in the cookiejar, so with Access-Control-Allow-Credentials:true and the domain in Access-Control-Allow-Origin a site should be able to do authenticated get requests on a users behave with the JWT, and access personal data.

The "GET https://programming.dev/api/v3/private_message/" endpoint for example, would let someone read the private messages someone has send/received

I'm not sure whether someone could do POST requests and add credentials from the cookiejar this way though

[–] russmatney 1 points 1 year ago (1 children)

Not a direct answer, but for an explanation and history of CORS, this was a fun talk at stangeloop last year: https://youtube.com/watch?v=0YJ-yhoJh2I

[–] starman 1 points 1 year ago

Thanks, I'll watch it

load more comments
view more: next ›