The Content Security Policy 'default-src * data:;' was delivered via a element outside the document's

Question

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <script src="lib/angular/angular.min.js"></script>
    <script src="lib/onsenui/js/onsenui.min.js"></script>
    <script src="lib/onsenui/js/angular-onsenui.min.js"></script>

    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
    <link rel="stylesheet" href="css/style.css">
</head>

This 'meta' tag is working in index.html but it doesn't work in other .html pages. I tried to change the config.html from this

<allow-navigation href="*"/>

to this.

<allow-navigation href="http://*/*"/>

I've tried to change the meta tag but I still get this error.

Can anyone help me? Thanks in advance.

The “delivered via a `` element outside the document's ``“ part seems to mean you have a `` element that is in the `` instead of the head. It must either be a duplicate of the one in the head or there is some other element in your document (not shown in your snippet) that is causing the browser’s HTML parser to start the `` at some point before that ``. So you should post the full source for your actual document so that others here can check it and see what the cause is. — sideshowbarker, Sep 23 '16 at 11:34
My guess is that you are loading templates into a navigator and they are separate files. Then my guess would be you have meta tags in those files - which you should not have. This would cause this. — Munsterlander, Sep 24 '16 at 01:08
I agree with Munsterlander - the pages which you are receiving are being inserted into the document as child elements to some onsen component rather than being loaded in the browser directly, so when those pages are loaded they are actually put inside your index.html which has that meta tag - so omitting it in the inner pages shouldn't be a problem imo. Try to remove all meta tags outside index.html and you should be fine. Also in the other pages you can just put the content, you don't need to put html, head, body etc - just put the html which you would use for the body :) — Ilia Yatchev, Sep 25 '16 at 20:32

score 4 · Answer 1 · answered May 09 '18 at 19:04

Regarding your error. I was getting the same error but it was because I was var_dump-ing to the screen above the <head> as part of my testing. I suppose similar problem or error would arise if you printed/echoed/wrote to the screen above the meta tag somewhere.

score 0 · Answer 2 · answered Nov 15 '18 at 19:25

I saw this error because I was doing an include of a file that contained the meta tag and the utf8 prefix on the file was causing the issue. Using an IIS web.config like so made it work and easier to manager changes then an include

<?xml version="1.0"?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <!-- In Order for the Mobile App to Access Sota we need to remove the X-Fram-Options and fall back to the newer Content-Security-Policy we include /include/Content-Security-Policy-->
        <remove name="X-Frame-Options"/>        
        <add name="Content-Security-Policy" value="default-src 'self'; style-src 'self' 'unsafe-inline';  media-src *; script-src 'self' 'unsafe-eval' 'unsafe-inline'; img-src 'self'"/>
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

score 0 · Answer 3 · answered Oct 04 '22 at 22:14

Similar to Andrew DeVries' answer https://stackoverflow.com/a/53326635/31668, my issue in a custom VS Code extension, which is based on Electron, also experienced the same error, and was due to a UTF-8 BOM.

In my case the fix was to remove the BOM from the document, which many text editors support. For example, in Windows Notepad you can select Save As, and then choose the encoding as UTF-8, which does not have a BOM.

Then in VS Code this file worked with a <meta http-equiv="Content-Security-Policy" content="..." /> tag.

The Content Security Policy 'default-src * data:;' was delivered via a element outside the document's

3 Answers3