Frontend make request to proxy which is a plugin in backend.

these request are made with proxyheader: which is localhost:7007/api/proxy (prometheys does it like this)

Request is made from frontend are just pages. like localhost:3000/grafana/whatever. is going to grafana page, similar to how localhost:3000/catalog goes to catalog page which is a frontend plugin. These pages are defined in App.tsc in packages/app

Backend plugin:

they can make request to ourside.

formate: locahost:7007/api/<plugin id>/<router paths defined in that plugin>

ex: proxy is a backend plugin used by frontend elements to make requests outside.

iframe: can’t make requests to backend. It directly embeds whatever you place.

if you place: url = /grafana/<whatever> if will show [localhost:3000/grafana/<whatever](http://localhost:3000/grafana/<whatever?)> so if that page is not defined in App.tsx you see backstags 404

if you pleac: url = [http://localhost:7007/api/proxy/<a](http://localhost:7007/api/proxy/<a) defined end point in app-confg>/request.

here backend will take that request. where proxy will get it cause of plugin id and since proxy plugin had routes defined for different path added in app-config. this request is made outside.

There is no way, in proxy plugin to change response recived. so if response blocks the request you see nothing in the iframe

Middleware:

extending the proxy plugin with a route made for iframe. which takes tokens from app-config and update headers in response. then iframe will show the contents.

So, Plan, Pick the proxy plugin and extend the page with middleware.

these settings are required for iframe to stop putting frontend domain infront of urls.

  csp:
    connect-src: ["'self'", 'http:', 'https:']
    frame-src: ["'self'", 'http:', 'https:']    # allows iframes to load content from these sources
    frame-ancestors: ["'self'", '<http://localhost:3000>', '<http://localhost:7007>']  # allows your frontend to embed backend pages
    # Content-Security-Policy directives follow the Helmet format: <https://helmetjs.github.io/#reference>
    # Default Helmet Content-Security-Policy values can be removed by setting the key to false

After this: if iframe has http://localhost:7007/api/…. it will start like that. Before it use to become like this: [http://localhost:3000/so](<http://localhost:3000/soe>)me defaultpage/<http://localhost:7007/api/…>

Issue: proxy plugin already creates routes for any endpoint we add in app-config proxy.endpoints. right. Facts. now our exertion will add a router for a particular endpoint. If this endpoint is also mentioned in app-config then proxy plugin will create 2 routers for same endpoint

Thought:

either we prevent people to make that endpoint. >> now we dont have source for token for this request so we will have to rely on cookiee and manually adding credentials.

Import note on dangenoulsy allowed auth module: defaut has been changed.

https://backstage.io/docs/next/releases/v1.28.0/#breaking-proxy-backend-plugin-protected-by-default:~:text=The new default is require%2C replacing the old dangerously-allow-unauthenticated. This means some previously permitted requests may now result in 401 Unauthorized responses. This does not apply if backend.auth.dangerouslyDisableDefaultAuthPolicy is set to true