title: because it violates the following Content Security Policy directive
body: <p>I am in a plain html file.</p>
  <p>I have three cdn's in my application and one static server file:</p>
  <pre><code> &lt;!-- Bootstrap core JavaScript --&gt;
  &lt;script src=&quot;https://code.jquery.com/jquery-3.2.1.slim.min.js&quot; integrity=&quot;sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js&quot; integrity=&quot;sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js&quot; integrity=&quot;sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;/static/js/main.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>And I am getting the following errors:</p>
  <pre class="lang-js prettyprint-override"><code>  localhost/:35 Refused to load the stylesheet 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' because it violates the following Content Security Policy directive: &quot;style-src 'self' https://localhost:* 'unsafe-inline'&quot;. Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.
  
  localhost/:1 Refused to load the script 'https://code.jquery.com/jquery-3.2.1.slim.min.js' because it violates the following Content Security Policy directive: &quot;script-src 'self'&quot;. Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
  
  localhost/:1 Refused to load the script 'https://code.jquery.com/jquery-3.2.1.slim.min.js' because it violates the following Content Security Policy directive: &quot;script-src 'self' https://localhost:* 'unsafe-inline' 'unsafe-eval'&quot;. Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
  
  localhost/:1 Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js' because it violates the following Content Security Policy directive: &quot;script-src 'self'&quot;. Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
  
  localhost/:1 Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js' because it violates the following Content Security Policy directive: &quot;script-src 'self' https://localhost:* 'unsafe-inline' 'unsafe-eval'&quot;. Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
  
  localhost/:1 Refused to load the script 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js' because it violates the following Content Security Policy directive: &quot;script-src 'self'&quot;. Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
  
  localhost/:1 Refused to load the script 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js' because it violates the following Content Security Policy directive: &quot;script-src 'self' https://localhost:* 'unsafe-inline' 'unsafe-eval'&quot;. Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
  </code></pre>
  
  <p>After scratching my head and using SO:</p>
  <pre><code>&lt;meta http-equiv=&quot;Content-Security-Policy&quot; content=&quot;default-src *; style-src 'self' https://localhost:* 'unsafe-inline'; script-src 'self' https://localhost:* 'unsafe-inline' 'unsafe-eval'&quot; /&gt;
  </code></pre>
  <p>But it also didn't work.</p>
  <p>Sorry if I am being stupid. I touched frontend development after a decade. What's the issue?</p>