Helmet at nodejs project. Content Security Policy directive

Question

Helmet at nodejs project. Content Security Policy directive

eugenestepanyuk opened this issue a year ago · comments

Hi! I'm trying to add to the electronic signature project helmet. The widget is connected via iframe.
.use(helmet())
And after that there is a mistake of this kind

After that I tried to add directives to contentSecurityPolicy:

.use(helmet())
.use(
    helmet.contentSecurityPolicy({
    directives: {
       ...helmet.contentSecurityPolicy.getDefaultDirectives(),
       "script-src": ["'self'", "'unsafe-inline'", "http://localhost:80/"],
       "script-src-attr": ["'none'", "'unsafe-inline'", "http://localhost:80/"],
       "connect-src": ["'self'", "http://localhost:80/"],
       },
   })
)

But such a mistake arises, the solution of which I did not find, maybe there will be some advice

I use the script directly on the HTML page and read the information that helmet does not like it and I need to put the script into the module and connect it. Right?
<script type="module" src="..."></script>
I did it, but the error remains.

I tried many options, the question arose, how safe is it if you completely disable contentSecurityPolicy?

I will be grateful in helping this problem

Evan Hahn · Answer 1 · Thu Feb 23 2023 10:35:54 GMT+0800 (China Standard Time)

It looks like the Content-Security-Policy header is not being updated after you make changes. Can you do a hard refresh in your browser?

Eugene Stepanyuk · Answer 2 · Thu Feb 23 2023 16:21:26 GMT+0800 (China Standard Time)

Yes, sure, I tried a hard refresh, the mistake remains

Update
I put the script into the module and the need for use of "script-src" and "script-src-attr" headers disappeared. Changed the resolution to "connect-src" to localhost:3030, and the first part of the script worked, but an error arose after trying to load the widget

After that, I added a resolution of the "frame-src" header

.use(
   helmet.contentSecurityPolicy({
      directives: {
          ...helmet.contentSecurityPolicy.getDefaultDirectives(),
          "connect-src": ["'self'", "http://localhost:3030/"],
          "frame-src": ["'self'", "https://eu.msn.com.ua/"],
       },
   })
)

There are no more errors of the headlines, but the iframe widget Does not open the site eu.msn.com.ua does not allow you to install the connection. Without Helmet, the widget opens. What could be the reason in this case?

Evan Hahn · Answer 3 · Thu Feb 23 2023 21:37:51 GMT+0800 (China Standard Time)

What's the value of the Content-Security-Policy response header? You can find this in your browser's developer tools, usually under the Network tab.

Eugene Stepanyuk · Answer 4 · Thu Feb 23 2023 23:24:28 GMT+0800 (China Standard Time)

Content-Security-Policy: default-src 'self';base-uri 'self';font-src 'self' https: data:;form-action 'self';frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src 'self';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests;connect-src 'self' http://localhost:3030/;frame-src 'self' https://eu.msn.com.ua/

Evan Hahn · Answer 5 · Fri Feb 24 2023 00:21:28 GMT+0800 (China Standard Time)

I'm not sure if this is a problem with Content Security Policy or with a different part of Helmet.

Do you see different behavior between these two snippets?

// Just use Helmet's Content-Security-Policy middleware.
// `helmet()` should not be used elsewhere.
app.use(
  helmet.contentSecurityPolicy({
    directives: {
      ...helmet.contentSecurityPolicy.getDefaultDirectives(),
      "connect-src": ["'self'", "http://localhost:3030/"],
      "frame-src": ["'self'", "https://eu.msn.com.ua/"],
    },
  }),
);

// Use all of Helmet, but configure the Content-Security-Policy middleware.
app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        ...helmet.contentSecurityPolicy.getDefaultDirectives(),
        "connect-src": ["'self'", "http://localhost:3030/"],
        "frame-src": ["'self'", "https://eu.msn.com.ua/"],
      },
    },
  }),
);

Eugene Stepanyuk · Answer 6 · Fri Feb 24 2023 15:10:52 GMT+0800 (China Standard Time)

found this warning in Network tab
Request URL: https://eu.msn.com.ua/sign-widget/v20200811/?address=http://localhost&formType=1&debug=false

Could this be the reason for blocking the widget?
I changed the code to:

.use(
        helmet({
          contentSecurityPolicy: {
            directives: {
              ...helmet.contentSecurityPolicy.getDefaultDirectives(),
              "connect-src": ["'self'", "http://localhost:3030/"],
              "frame-src": ["'self'", "https://eu.msn.com.ua/"],
            },
          },
          crossOriginResourcePolicy: { policy: "cross-origin" }
        })
      )

but it did not help

Evan Hahn · Answer 7 · Fri Feb 24 2023 22:02:49 GMT+0800 (China Standard Time)

You're embedding an iframe from another origin, triggering the document's "cross-origin embedder policy". This policy, controlled by the Cross-Origin-Embedder-Policy header, has three modes:

unsafe-none, the default value. Your page can load cross-origin resources without permission from the remote origin.

For example, your page on example.com would be able to load <img src="https://example.com/foo.png"> with no issues.
require-corp, Helmet's default value. Your page can load cross-origin resources, but the remote origin has to give explicit permission. It can do this with the Cross-Origin-Resource-Policy header or by using CORS.

For example, your page on example.com can load <img src="https://example.com/foo.png"> only if uilogos.co allows it. They'd need to do some work to support this.
credentialless. Your page can load cross-origin resources, but they can't include credentials like cookies. This isn't supported by all browsers.

I would recommend trying the credentialless policy to see if that works for you.

app.use(
  helmet({
    // ...
    crossOriginEmbedderPolicy: { policy: 'credentialless' }
  })
)

Eugene Stepanyuk · Answer 8 · Fri Feb 24 2023 22:11:10 GMT+0800 (China Standard Time)

adding credentialless policy didn't help, the warning remains for some reason

Evan Hahn · Answer 9 · Fri Feb 24 2023 22:44:30 GMT+0800 (China Standard Time)

What if you disable it?

app.use(
  helmet({
    // ...
    crossOriginEmbedderPolicy: false
  })
)

Eugene Stepanyuk · Answer 10 · Fri Feb 24 2023 22:47:27 GMT+0800 (China Standard Time)

didn't help either

tried setting for iframe as stated in the article, did not help
https://web.dev/coop-coep/?utm_source=devtools

in Application tab, chapter Frames

Evan Hahn · Answer 11 · Sat Feb 25 2023 03:12:14 GMT+0800 (China Standard Time)

To be clear: did you set the crossorigin attribute on the iframe?

Eugene Stepanyuk · Answer 12 · Sat Feb 25 2023 03:57:47 GMT+0800 (China Standard Time)

This is how the iframe element is created in the signature library file

var iframe = document.createElement("iframe");
iframe.setAttribute("src", src + srcParams);
iframe.setAttribute("id", id);
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowtransparency", "true");
iframe.setAttribute("width", "100%");
iframe.setAttribute("height", "100%");
iframe.setAttribute("crossorigin", "anonymous");
document.getElementById(parentId).appendChild(iframe);

I added the line iframe.setAttribute("crossorigin", "anonymous"); but it did not help
Access is denied, as I understand it, on the line adding an iframe element to the page document.getElementById(parentId).appendChild(iframe);

Eugene Stepanyuk · Answer 13 · Wed Mar 01 2023 21:54:36 GMT+0800 (China Standard Time)

The issue still persists, is there any other solution?

Evan Hahn · Answer 14 · Wed Mar 01 2023 22:07:50 GMT+0800 (China Standard Time)

Sorry for my slow response.

I don't know why this is happening, but some part of Helmet seems to be causing it.

The top-level helmet function is a wrapper around 14 smaller middlewares. I would start by disabling all of them and slowly re-introducing them, one by one,

For example, start with this:

app.use(helmet({
  contentSecurityPolicy: false,
  crossOriginEmbedderPolicy: false,
  crossOriginOpenerPolicy: false,
  crossOriginResourcePolicy: false,
  dnsPrefetchControl: false,
  frameguard: false,
  hidePoweredBy: false,
  hsts: false,
  ieNoOpen: false,
  noSniff: false,
  originAgentCluster: false,
  permittedCrossDomainPolicies: false,
  referrerPolicy: false,
  xssFilter: false,
});

This won't do anything at all!

Then just try reintroducing CSP:

app.use(helmet({
  contentSecurityPolicy: { /* ... */ },
  crossOriginEmbedderPolicy: false,
  crossOriginOpenerPolicy: false,
  // ...
});

Then try introducing the next one:

app.use(helmet({
  contentSecurityPolicy: { /* ... */ },
  crossOriginEmbedderPolicy: true,
  crossOriginOpenerPolicy: false,
  // ...
});

Eventually, I hope this will help you find the culprit.

Eugene Stepanyuk · Answer 15 · Thu Mar 02 2023 16:13:24 GMT+0800 (China Standard Time)

I tested middlewares

.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        ...helmet.contentSecurityPolicy.getDefaultDirectives(),
        "connect-src": ["'self'", "http://localhost:3030/"],
        "frame-src": ["'self'", "https://eu.msn.com.ua/"],
      },
    },
    crossOriginEmbedderPolicy: false,
    crossOriginOpenerPolicy: true,
    crossOriginResourcePolicy: true,
    dnsPrefetchControl: true,
    frameguard: true,
    hidePoweredBy: true,
    hsts: true,
    ieNoOpen: true,
    noSniff: true,
    originAgentCluster: true,
    permittedCrossDomainPolicies: true,
    referrerPolicy: true,
    xssFilter: true,
  })
)

in this format the widget opens, mby problem in crossOriginEmbedderPolicy, { policy: "credentialless" } dosen't help

Evan Hahn · Answer 16 · Thu Mar 02 2023 21:26:30 GMT+0800 (China Standard Time)

In that case, it sounds like disabling that one middleware solves your problem. I would recommend doing that.

Does that help?

Eugene Stepanyuk · Answer 17 · Thu Mar 02 2023 23:17:43 GMT+0800 (China Standard Time)

yes, with crossOriginEmbedderPolicy: false the widget works.
Please tell me, will this affect safety? I read, this may leave my app vulnerable to certain types of attacks.

And read info
If you are experiencing an access error for the iframe widget when crossOriginEmbedderPolicy is set to true, it is likely because the iframe is trying to access a resource that is restricted by the policy. You will need to ensure that the iframe is not trying to access any restricted resources, or you can consider adding a crossOriginOpenerPolicy header to your server response, which can provide a more lenient policy for cross-origin iframe loading.

What do you say about this?

Eugene Stepanyuk · Answer 18 · Thu Mar 02 2023 23:32:36 GMT+0800 (China Standard Time)

I tried set headers

crossOriginResourcePolicy: { policy: "same-origin" },
crossOriginOpenerPolicy: { policy: "same-origin"}

but that doesn't help either

this error doesn't go away

Evan Hahn · Answer 19 · Mon Mar 06 2023 22:23:36 GMT+0800 (China Standard Time)

tl;dr: You're probably safe to disable it.

First, there's the embedder and the resource. You control the embedder—it's your website. You don't control the resource, en.msn.com.ua, which is what you're putting in an iframe.

Cross-Origin-Embedder-Policy is a header for the embedder. It says how the browser should embed cross-origin resources.

If it's set to unsafe-none (or is unset), the browser can embed whatever resource it wants. If it's set to require-corp, the browser can only embed resources that support CORS or set the Cross-Origin-Resource-Policy header. (There's a third option, credentialless, which doesn't work in all browsers.)

There are some side-channel vulnerabilities when embedding an iframe in the same address space as your site. An iframe on another site might be able to read the memory of your site! That's bad! But there's good news: modern browsers protect against this even without any special headers. You need these headers for certain advanced things, like SharedArrayBuffer, but most people don't need this. Because of this, I plan to disable this header (by default) in future versions of Helmet.

As you might expect, you have no control over en.msn.com.ua, so you can't make them set any headers. That's why you're seeing those errors despite setting the Cross-Origin-Resource-Policy header yourself: the error is coming from the resource and has nothing to do with the header you're setting.

Given that you don't control the resource, you have a few options:

Disable the Cross-Origin-Embedder-Policy header. This will let you embed whatever resources you want.
Get en.msn.com.ua to set the Cross-Origin-Resource-Policy header. This probably involves emailing someone and hoping they'll make your change.
Give up on this entirely, and stop trying to embed the iframe.

Given all that, I would recommend the first option—just disable the header on your site.

I'm going to close this issue because I think I've resolved your problem.

Eugene Stepanyuk · Answer 20 · Mon Mar 06 2023 22:48:29 GMT+0800 (China Standard Time)

thank you for your great help!