[Docs Bug 🐞 report]: Some issue with links in Modelina Docs

[Dadi-yaswanth]

Describe the bug you found in AsyncAPI Docs.

I'm reading docs of Modelina to get familiar with it and when I tried to open the links attached to the defined in section, it broke the page and showed github.com refused to connect.
At first, I thought it was an issue because of my Chrome but then I checked Firefox and on my second laptop and mobile, it shows the same.

As I am a junior backend developer I don't have such a great idea about frontend but I opened the console section and it showed something like Refused to frame '' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

But I checked Google it showing because of the Content Security Policy (CSP) of the website and we here trying to embed external website content into our website and may that's the issue I was thinking about.

A simple fix I'm thinking : (Noob at frontend :P)
we can add target = "blank" to open it in a new tab or you guys can use some other method to resolve it.

Attach any resources that can help us understand the issue.

The link's section is showing refused to connect : (I checked other pages' links, and they also breaking)

When I clicked on the link it is showing like this (A refused to connect page)

Chrome dev console

Thank you
This is my first bug reporting so please avoid anything away from the code of conduct.

Code of Conduct

• I agree to follow this project's Code of Conduct

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[jonaslagoni]

Definitely a problem, but there does not seem to be a way to fix it natively in the tool that generate it...

Works if you open a new tab with the link, not sure if we can get typedoc to include links to open new tabs instead of in the frame 🤔

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[jonaslagoni]

@devilkiller-ag if you have any idea how to fix it let me know, otherwise I think we can close this one as something that we wont fix.

[devilkiller-ag]

@jonaslagoni This issue is because we are trying to open GitHub links in the iframe generated by TypeDoc( for rendering apidoc). GitHub doesn't allow its site to be opened in an iframe due to a Content Security Policy (CSP) in place that restricts the use of iframes. Specifically, the policy directive “frame-ancestors ‘none’” is set, which means that the website cannot be embedded in an iframe by any domain. (Source Stackoverflow). This is a security measure to prevent clickjacking attacks, where an attacker can trick a user into clicking on a malicious link disguised as a legitimate one (Source).

We will have to either set these links to open outside the iframe in the same tab or simply make it open on the new tab by setting target='_blank'. I think the second option will be better as it will enable users to not lose the current doc page while referencing GitHub links.

[devilkiller-ag]

After researching more about this I got following solution: sourceLinkExternal $ typedoc --sourceLinkExternal will treat source links as external links that open in a new tab when generating HTML (Source).

[devilkiller-ag]

So instead of using:

"docs:api": "typedoc src/index.ts --out ./modelina-website/public/apidocs/generated --name Modelina"

in package.json, we can use:

"docs:api": "typedoc --sourceLinkExternal src/index.ts --out ./modelina-website/public/apidocs/generated --name Modelina"

to achieve this.

[jonaslagoni]

Thanks @devilkiller-ag for this! 💪 Works like a charm 🔥