search

lichess-org / lila

♞ lichess.org: the forever free, adless and open source chess server ♞
https://lichess.org
GNU Affero General Public License v3.0
15.15k stars 2.24k forks source link

make puzzles embeddable via iframe #11337

Open ericries opened 2 years ago

ericries commented 2 years ago

Currently, analysis boards, live games, and the puzzle of the day are available to embed via iframe. Other pages are blocked from embedding because of the Cross-Origin-Opener-Policy header (set in LilaController.scala)

other open-source projects (such as chessli, which integrates lichess with Anki) have to work around this limitation by using another website's puzzle viewer embedded in an iframe. It would be much better to be able to use the lichess puzzle viewer (which is way better)

for what it's worth, other similar sites don't have such a restrictive content policy. for example, the thing that originally got me down this rabbit hole was using Anki to study puzzles in go/baduk, using the open-source online-go.org and Anki. because they do not have a restrictive content policy, their existing puzzle pages work nicely embedded in iframes. I recognize that their scale and significance is different from lichess, I just thought that was an interesting datapoint.

labbeast89 commented 2 years ago

I would like that feature too!

ssrihari4102 commented 1 year ago

I would like to work on this. @benediktwerner I noticed you mentioned there is an API endpoint to get a puzzle in https://github.com/lichess-org/api/issues/183. Do you have any code or documentation pointers on where I could get started on making a proper embed page for puzzles? Also, I still need to play around with this myself but I was wondering what the main issues that exist if one were to currently replace the src field in the iframe with the aforementioned endpoint (is it just the cross origin issue mentioned by @ericries?).

benediktwerner commented 1 year ago

The API endpoint returns puzzles as JSON. It's entirely unrelated to iframe embeds. It just can get you the puzzle data to make your own "embed"/puzzle widget.

Closer would be using the actual puzzle page from the website, but besides the "cross origin issue" (really, the main issue is surely the x-frame-options: DENY header), it obviously also has a bunch of additional stuff like the navigation menu that you don't want in an embed. So it needs a separate embed endpoint that excludes all that, probably has some custom CSS, and allows embedding.

Similar embeddable endpoints do exist for studys, games, etc. which can be used as reference:

But ofc it needs to integrate the stuff from the puzzle endpoint instead.

ericries commented 1 year ago

Please let me know if I can help. I think the plan of taking one of the existing embeds (maybe study is closest?) and replacing the contents with the puzzle logic is sound.

FWIW, as a workaround, I built my own HTML/javascript version that pulls data from the puzzle API and the massive puzzle CSV to produce something that looks a lot like lichess. But I would much rather replace all that jank with a proper iframe.

ssrihari4102 commented 1 year ago

I'm working on this issue with @jbaker05 for a college project. We have setup our dev environments and started looking through the code pointers above. Our understanding is that we first need to create an embed route for the puzzles page which simply returns the puzzles page as it is. After this, we can write custom CSS for the embed route so it strips away extraneous elements, such as navigation.

We are not sure if we need to explicitly set the x-frame-options to SAMEORIGIN for our embed page or if that will be handled by default? In general, we were not able to determine where this setting is configurable based on the codebase and previous discussions in the discord.

ericries commented 1 year ago

I am happy to help with that when you get that far. I managed to find and change the x-frame-options setting when I was testing different configurations before. I think you will be able to simplify the puzzle page logic quite a bit, but your instinct is right:

  1. create a new embed_puzzle route
  2. clone the puzzle page entirely and see that it works normally
  3. change the x-frame-options to make it embeddable (but ugly)
  4. strip away pieces of logic and presentation one at a time, always testing that it still works as you go

One thing to look at is "zen mode" - when I did my experiments I found this helped a lot. it hides almost everything you want hidden for an embed anyway. So once you learn how the zen mode javascript works, you'll be pretty close to knowing what logic can be safely removed.

On Sun, Nov 13, 2022 at 3:08 PM Srihari Srinivasan @.***> wrote:

I'm working on this issue with @JBaker05 https://github.com/JBaker05 for a college project. We have setup our dev environments and started looking through the code pointers above. Our understanding is that we first need to create an embed route for the puzzles page which simply returns the puzzles page as it is. After this, we can write custom CSS for the embed route so it strips away extraneous elements, such as navigation.

We are not sure if we need to explicitly set the x-frame-options to SAMEORIGIN for our embed page or if that will be handled by default? In general, we were not able to determine where this setting is configurable based on the codebase and previous discussions in the discord.

— Reply to this email directly, view it on GitHub https://github.com/lichess-org/lila/issues/11337#issuecomment-1312847735, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACKSLRS4OK3FARQQTKPDTMDWIFYFJANCNFSM557ODTYA . You are receiving this because you were mentioned.Message ID: @.***>

ssrihari4102 commented 1 year ago

We have locally created a Puzzle.embed endpoint and controller based off of the ones for Puzzle.show. After doing this, we tested that it has the same functionality as the existing endpoint by creating an HTML page that has an iframe with our local embed endpoint as its src.

For the view, we are trying to figure out how to control the CSS so we can strip away the same elements as zen mode does. Namely, we're struggling to figure out how the CSS for zen mode becomes active when you turn on zen mode. Do either of you have any thoughts on working on the view, especially with regards to zen mode?

ssrihari4102 commented 1 year ago

Hey @ericries and @benediktwerner. We were wondering if we could get some general feedback and advice on next steps for the above PR? In the PR description we discussed what we think went well and what still needs to be worked on for the PR to be merged. We understand that the needs of the repository as a whole take precedence; however, we were hoping to get some advice relatively soon since the deadline for our assignment is a week or so away and we would like to make as much progress on the issue as possible before then.

ericries commented 1 year ago

Are you able to log into the lichess discord server? I've found that a great place to ask for advice and help

On Wed, Nov 30, 2022 at 6:04 PM Srihari Srinivasan @.***> wrote:

Hey @ericries https://github.com/ericries and @benediktwerner https://github.com/benediktwerner. We were wondering if we could get some general feedback and advice on next steps for the above PR? In the PR description we discussed what we think went well and what still needs to be worked on for the PR to be merged. We understand that the needs of the repository as a whole take precedence; however, we were hoping to get some advice relatively soon since the deadline for our assignment is a week or so away and we would like to make as much progress on the issue as possible before then.

— Reply to this email directly, view it on GitHub https://github.com/lichess-org/lila/issues/11337#issuecomment-1333047726, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACKSLRQRH3ZCNJOHJVDEN53WLABSFANCNFSM557ODTYA . You are receiving this because you were mentioned.Message ID: @.***>

ssrihari4102 commented 1 year ago

Thanks for getting back to me! Yes I'm in the server. However, I only have access to the dev-onboarding channel. Also, since you two are somewhat familiar with this issue I figured I'd ask here first.

ericries commented 1 year ago

Happy to help if I can

On Wed, Nov 30, 2022 at 6:08 PM Srihari Srinivasan @.***> wrote:

Thanks for getting back to me! Yes I'm in the server. However, I only have access to the dev-onboarding channel. Also, since you two are somewhat familiar with this issue I figured I'd ask here first.

— Reply to this email directly, view it on GitHub https://github.com/lichess-org/lila/issues/11337#issuecomment-1333052295, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACKSLRUB73MTZZJZL7SROVTWLACDDANCNFSM557ODTYA . You are receiving this because you were mentioned.Message ID: @.***>

schlawg commented 1 year ago

Among people who regularly give onboarding advice, benedikt (1vader on discord) is probably a good one to bounce your embedding ideas off of. Also - friendly heads up re lichess discord - avoid pinging maintainers in non-emergency cases it won't speed up response.

benediktwerner commented 1 year ago

Sorry, I haven't really been following GitHub much the last few weeks.

Zen mode definitely doesn't seem like the way to go here. We just want to directly remove all that stuff. The main way to get rid of most of that is to use views.html.base.embed instead of views.html.base.layout in the view.

More fundamentally though, as Thibault mentioned in the Draft PR, it does seem kinda unclear what exactly this is supposed to do. Is it an embed of a single puzzle or can you continue playing puzzles after another?

ericries commented 1 year ago

Speaking as a potential customer of the feature, a single-use puzzle view would be ideal. Imagine wanting to embed a specific puzzle into a blog post so you could comment on it or discuss it.

I agree re: Zen mode. I think it’s useful as a way for a new person to the code base to see which elements are essential to the main view and which are not. It’s clearly better to remove the elements rather than hide them

On Fri, Dec 9, 2022 at 9:26 AM Benedikt Werner @.***> wrote:

Sorry, I haven't really been following GitHub much the last few weeks.

Zen mode definitely doesn't seem like the way to go here. We just want to directly remove all that stuff. The main way to get rid of most of that is to use views.html.base.embed instead of views.html.base.layout in the view.

More fundamentally though, as Thibault mentioned in the Draft PR, it does seem kinda unclear what exactly this is supposed to do. Is it an embed of a single puzzle or can you continue playing puzzles after another?

— Reply to this email directly, view it on GitHub https://github.com/lichess-org/lila/issues/11337#issuecomment-1344571149, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACKSLRUJTYGE4KBSS4Z755LWMNTTZANCNFSM557ODTYA . You are receiving this because you were mentioned.Message ID: @.***>

levallem commented 1 year ago

On many occasions I try to make an entry on my blog about tactical patterns and in fact I need to be able to put some puzzles that can be solved within my blog. At the moment I usually add the url of a lichess studio where they can do the exercises. But it is not ideal. I hope that in the future lichess can find a solution, it would be of great help to the chess community