Helmet Express ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200

Question

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

score 23 · Accepted Answer · answered Jan 18 '22 at 15:04

23

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.

answered Jan 18 '22 at 15:04

Evan Hahn

12,147
9
41
59

1

i tried the above workaround but still the same error – shamon shamsudeen Mar 25 '22 at 16:32
2

in react app if you don't add crossorigin="true" to img tag, it won't work – Hakim Asa Apr 29 '22 at 08:56
I added this flag but I still need the `crossorigin` tag on embedded images to access. I do not want this. How can make it work without needing that tag? – Mote Zart Jan 30 '23 at 22:47
@MoteZart It's possible that this is happening because you need to do a hard refresh in your browser. Does that fix things? – Evan Hahn Jan 31 '23 at 13:19
For a requested asset to work inside an html image (on a browser) I needed `app.use(helmet({ crossOriginResourcePolicy: false, crossOriginEmbedderPolicy: false, }));` – Mote Zart Feb 01 '23 at 15:34
In reactjs app, @MoteZart your answer works for me. Thanks – Luccin Feb 24 '23 at 17:55
1

@HakimAsa - You deserve some sort of award!! – Alan Spurlock Aug 24 '23 at 19:17

score 6 · Answer 2 · edited Apr 19 '22 at 19:34

6

I had this same problem, this fixed it:

helmet({
    crossOriginResourcePolicy: false,
})

edited Apr 19 '22 at 19:34

Tyler2P

2,324
26
22
31

answered Apr 15 '22 at 00:05

Promise Ihunna

293
3
8

fyi, this didn't work for me, i had to use the solution in accepted answer `crossOriginEmbedderPolicy: false,`, see also: https://github.com/helmetjs/helmet/issues/343#issuecomment-1006259994 – user1063287 Dec 27 '22 at 05:53
wrap that in app.use() – Promise Ihunna Jan 02 '23 at 09:45

score 2 · Answer 3 · edited Feb 27 '22 at 08:25

2

If versioning is a better option for you, I had this same issue on helmet >=5.0.0. Dropping to 4.6.0 solved this error.

edited Feb 27 '22 at 08:25

Tyler2P

2,324
26
22
31

answered Feb 26 '22 at 21:35

Daniel A

77
1
2
12

jeremyl · Answer 4 · 2022-01-18T09:16:44.040

1

After a long look on google I get the solution from here : https://github.com/helmetjs/helmet/issues/176 I add this line :

res.setHeader('Cross-Origin-Resource-Policy', 'same-site');

and just do refresh and clear cache (cmd + R on MAC and ctrl+R on others) and it's worked like a charm. Thanks Evan Hahn

edited Jan 18 '22 at 09:16

answered Jan 18 '22 at 09:01

jeremyl

115
1
1
8

score 1 · Answer 5 · answered Feb 26 '22 at 19:35

1

In my case, I used that way

    helmet({
      crossOriginResourcePolicy: false,
    })

The issue is with the cross-origin resource policy which should be same-site as the browser treats as another origin.

answered Feb 26 '22 at 19:35

devXd

177
3
4

fyi, this didn't work for me, i had to use the solution in accepted answer `crossOriginEmbedderPolicy: false,`, see also: https://github.com/helmetjs/helmet/issues/343#issuecomment-1006259994 – user1063287 Dec 27 '22 at 05:54

score 0 · Answer 6 · edited May 05 '23 at 14:43

I searched a lot, and none of the solutions above didn't work for me, unfortunately. But in the end, I found this solution:

// Helmet for the security
server.use(helmet());

// Static File Serving Access for Uploads
server.use("/uploads",
    express.static(path.join(env.UPLOADS_BASE_PATH, "uploads"), {
    setHeaders: (res) => {
      res.setHeader("Access-Control-Allow-Origin", env.CLIENT_URL);
    },
  }),
);

// Cors Origin for Client Access
const corsOptions = {
  origin: env.CLIENT_URL,
  methods: ["GET", "POST", "PUT", "DELETE"],
  allowedHeaders: ["Content-Type", "Authorization"],
  credentials: true,
  optionsSuccessStatus: 200,
};

server.use(cors(corsOptions));

Just change the env.UPLOADS_BASE_PATH and env.CLIENT_URL variables and the "uploads" route for your preferences. It seems that route settings were not being applied correctly. With this update, it ensures that the Access-Control-Allow-Origin header is set for the static file responses. (server is Express btw.)

I hope this will help someone too. Good luck.

P.S: Most important part was setting the header for my static route. Cors options can be simple than that.

Helmet Express ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200

6 Answers6

Linked