0

Updating details to understand more: *In my project, user uploads html themes. For each user, if they authenticate, I am creating a public static folder for authenticated user in the same theme folder they are requesting. Then there is a editor in the front end where they can edit html theme contents. I am trying to show html themes in the editor using a iframe using the static link from backend. But the problem is I can't add script to the html theme in the iframe. It's saying permission denied. How can I solve this problem?

I am using express in backend and nextjs in frontend. I have added this code in helmet middleware.

app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        'connect-src': ["'self'", 'http://localhost:3000'],
        'default-src': "'self'",
        'frame-ancestors': ["'self'", 'http://localhost:3000'],
        sandbox: ['allow-forms', 'allow-scripts'],
        'script-src': ["'self'", 'http://localhost:3000'],
 
      },
    },
  })
);

For cross site scripting,

app.use(xss())

But still getting error in iframe. Nextjs error of cross site scripting

From Backend I am trying to allow a route to be use in iframe in the frontend. Since, both server have different port in localhost, it's violating cross site embed and scripting. So, I am using helmet and xss package. I need help to configure it.

I am using iframe's onload attribute to check if it is loaded and then injecting another script to the iframe from frontend.

Abu Sayeed Mondal
  • 365
  • 4
  • 17
  • 2
    Cross site iframe access regulated by [Same Origin Policy](https://stackoverflow.com/questions/8291362/cross-site-scripting-with-iframe), not Content Security Policy (CSP). CSP can protect from XSS, but can't deliberate allow it. – granty Jun 24 '21 at 08:58
  • How to allow some domain to be able to do cross site scripting, in my express server – Abu Sayeed Mondal Jun 26 '21 at 05:04
  • "Cross site scripting" mean a "cross domain scripting". Access to the same domain is not counted as cross site scripting. Access between domain <-> it subdomain also can be allowed to bypass CORS. – granty Jun 26 '21 at 11:30
  • In my project, user uploads html themes. For each user, if they authenticate, I am creating a public static folder for authenticated user in the same theme folder they are requesting. Then there is a editor in the front end where they can edit html theme contents. I am trying to show html themes in the editor using a iframe using the static link from backend. But the problem is I can't add script to the html theme in the iframe. It's saying permission denied. How can I solve this problem? Is it clear now? This is the problem I am having – Abu Sayeed Mondal Jun 27 '21 at 05:44

1 Answers1

0

You have an issue of Same Origin Policy, not with Content Security Policy. Helmet package can't help you.

Set the value document.domain = 'example.com'; (example.com = 'localhost' in your case) both in the iframe and in the main page. It will reset port number to null and subdomain any.example.com to domain example.com, see test.

If both iframe and main page are on the same domain, you can just set document.domain = document.domain;.

Both variants leads resetting port number to null. therefore yoy'll be able to acces iframe with a different port number.

granty
  • 7,234
  • 1
  • 14
  • 21