title: Problem with Content-Security-Policy, Next JS and AMP
body: <p>I am developing an AMP application using Next JS, it is working great in localhost, but in production I have errors coming from AMP that is not allowed to load its workers.</p>
  <p>The initial error is :</p>
  <blockquote>
  <p>Refused to create a worker from 'blob:' because it violates the following Content Security Policy directive: &quot;default-src * data: 'unsafe-eval' 'unsafe-inline'&quot;. Note that 'worker-src' was not explicitly set, so 'default-src' is used as a fallback.</p>
  </blockquote>
  <p>Ok I understand this error, I can see the header sent by next JS by default is <code>default-src * data: 'unsafe-eval' 'unsafe-inline'</code> and it doesn't allow <code>blob:</code> to be loaded, so the browser is refusing to load AMP's scripts.</p>
  <p>So I add an header in <code>next.config.js</code> (I am using next 9.5 which has this new feature) to allow blob for workers :</p>
  <pre><code>async function headers() {
    return [
      {
        source: &quot;/&quot;,
        headers: [
          {
            key: &quot;Content-Security-Policy&quot;,
            value: &quot;default-src * data:  'unsafe-eval' 'unsafe-inline'; worker-src blob:;&quot;,
          },
        ],
      }
    ];
  }
  </code></pre>
  <p>With this configuration, I can see the header is correctly added in the response, but now there are two headers, nextJS is still sending his header by default :</p>
  <p><a href="https://i.stack.imgur.com/BPvUA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BPvUA.png" alt="enter image description here" /></a></p>
  <p>So now I have two headers in the response, the first one is mine and defines worker-src, the second one is the next JS default one and doesn't define worker-src.<br />
  I would expect the browser to understand it but it doesn't work, I still have the same error, the browser doesn't pick up my worker-src policy.</p>
  <p>Note: I can't use tag <code>&lt;meta http-esquiv=&quot;content-security-policy&quot; /&gt;</code> because it is not valid AMP.</p>
  <p>Note 2 : The workers are loaded only by some AMP components, I think the main ones are amp-bind and amp-script. With a lot of components I don't have this problem.</p>
  <p>Does anyone have a solution for this ?</p>
  <p>Thank you very much for reading.</p>