What I am trying to achieve is displaying html content to a user from another server (external server That I do not own) that is normally accessed through a browser.
To get the right html to display to the user, cookies related to that server’s domain must be provided.
APPROACH 1:
Easiest approach I tried is using an iframe. And of course, I got the usual CSP error from the chrome console:
Refused to frame ‘{{URL}}’ because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘self’ {{ACCEPTED DOMAINS}}”.
APPROACH 2:
I made a local proxy server in node.js and tried to setup a proxied request in browser axios:
axios.get("{{URL to external server}}", { proxy: { host: "localhost", port: 5050 }});
I quickly realized that axios proxy is a node only feature per this issue.
CONCLUSION:
I can’t find a way to make a GET request to get html in a browser to a cookie protected and CSP protected server/domain. If I am able to display html in the first place, I can probably use the same system to show a login page to update the user’s cookies. Just a heads up I am using react / node.js.
If you know of a better approach that completely scraps away my code or uses a different technology, please share!
Thank you in advance.