Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSP Header Options and iframe incompatibility #345

Closed
jberry777 opened this issue Aug 31, 2021 · 2 comments
Closed

CSP Header Options and iframe incompatibility #345

jberry777 opened this issue Aug 31, 2021 · 2 comments

Comments

@jberry777
Copy link

If I'm trying to embed our MITRE Navigator page via an iframe, it fails due to missing Content-Security-Policy headers specifying the allowed frame-ancestors.

I noticed there was a previous issue opened regarding embedding here: #13. But it doesn't address the problem with the missing headers that would allow for the Navigator to be iframed in a separate page.

Is there a way to configure response headers in the Navigator?
I've added the CSP headers as a meta tag in the index.html file but these don't appear in the response headers.

@isaisabel
Copy link
Contributor

isaisabel commented Sep 1, 2021

Hi @jberry777,

It is my understanding that CSP headers are HTTP headers, and therefore not part of the HTML template but rather part of the HTTP response. This is essentially metadata attached to the information sent back to a web client when it requests data from a web server.

Such headers are outside of the scope of the Navigator codebase itself, as this repo only covers up to the generation of the static HTML, CSS and JS that represents the application when loaded in the web client. This repo doesn't cover tools for transmitting those artifacts to the web client, which for a production environment would typically involve something like apache2 or nginx.

My recommendation is to look into how to add CSP headers in your web server of choice instead of using the ng serve dev environment, which probably doesn't include options for such configuration.

For what it's worth, I'm still able to embed the Navigator in an iframe, so it may be an aspect of how your custom instance is hosted (compared to the official live instance). Save the following as index.html and open it in your web browser to see the iframe working for the official Navigator instance:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe test</title>
</head>
<body>
    <h3>Below is an iframe of the Navigator:</h3>
    <iframe src="https://mitre.github.io/attack-navigator/" width="1000" height="500"></iframe> 
</body>
</html>

@jberry777
Copy link
Author

Hello @isaisabel,

Thank you for the response. I think you're right that it probably has something to do with how Navigator is hosted on my end. I thought that since React.js appears to have the option to set custom headers, maybe there's something similar in Angular.

Currently the web app deployed as a docker image running on a GCP compute instance. So it's not being hosted on an actual web server. Traffic is routed to it from VPC routes in the instance's network config and proxied there from a remote nginx server where requests are initially received for the domain name. I modified the headers on the domain config side of things but it hasn't had any effect, they haven't been picked up.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants