-
Notifications
You must be signed in to change notification settings - Fork 579
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
Comments
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 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 <!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> |
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. |
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.
The text was updated successfully, but these errors were encountered: