I have a React Router app, and I need to have a content security policy just for one of the routes. So, for that route I have this inside a component:

  useEffect(() => {
    const csp = document.createElement('meta');
    csp.httpEquiv = "Content-Security-Policy";
    csp.content = "default-src 'none'; style-src embed.typeform.com; script-src 'self' embed.typeform.com; frame-src form.typeform.com";
    document.head.append(csp);
    return () => {
      document.head.removeChild(csp);
    }
  }, []);

My problem is that even though the code works, and the meta element is added and deleted as intended, Chrome doesn't remove the policy internally and it is always present once I have attached it once. So i get a lot of default-src 'none' errors on the other routes.

Any idea what is wrong?