Search code examples
expresscorshelmet.jscross-origin-embedder-policycross-origin-resource-policy

Helmet Express ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200


please I need help, I checked on all google and not get really answer for to open my issue. I want to use helmet to secure my express server. But when I am using it I get this error : ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200 for loaded my images from my database. this is my server express :

// Initialize server
const app = express()
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(cookieParser());
app.use(cors())
app.use(helmet())

// CORS configuration
app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

I am getting my images from my database so the url in localhost is : http://localhost:3000/image/<name_image>

When i am not using helmet all works fine.

Please any help


Solution

  • tl;dr: disable the Cross-Origin-Embedder-Policy header, enabled by default in Helmet v5.

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

    Helmet maintainer here.

    Helmet sets the the Cross-Origin-Embedder-Policy HTTP response header to require-corp.

    Setting this header means that loading cross-origin resources (like an image from another resource) is trickier. For example, loading a cross-origin like this...

    <img alt="My picture" src="https://example.com/image.png">
    

    ...won't work unless example.com explicitly allows it, by setting some response headers of its own. Your browser will try to load example.com/image.png, and if it's not explicitly allowed, your browser will drop the response.

    To fix this, you can prevent Helmet from setting the Cross-Origin-Embedder-Policy header, like this:

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

    I made a small sample app you can use to play around with this. In my testing, it doesn't seem to work in HTTP but it does over HTTPS, which might explain why things only break in production.