javascripthtmlmicrosoft-edgemicrosoft-edge-extension

How do I fix Content Security Policy directive "script-src 'self'" error?

my first Edge Extension which I am coding for learning purposes does not work, as it generates the following errors: Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

the same with: ... "script-src 'self''wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:*" ...

Error

The Extension is supposed to open a website which contains laws. The URL consists of some text, the legal code and the paragraph, which are input via text fields.

Although the input fields are displayed on click of the extension icon and I can input text and click the submit button, nothing happens.

The project consists of the following files:

manifest.json

{
    "name": "JurSearch",
    "version": "0.0.0.1",
    "author": "FN",
    "manifest_version": 3,
    "description": "An extension to search the German laws.",
    "icons": {
        "16": "icons/fernglas.png"
    },
    "action": {
        "default_popup": "popup/popup.html"
    },
    "permissions": [
        "contextMenus",
        "tabs",
        "storage",
        "activeTab"
    ],
     "background": {
        "service_worker": "js/background.js",
        "type": "module"
    }
}

popup.html

<html lang="de">
    <head>
        <meta charset="UTF-8" />
        <title>Search</title>
    </head>
    <body>
        <div>
            <form id="form" onsubmit="return false;">
                <label for="Gesetz">Legal Code:</label>
                <input type="text" id="Gesetz" name="Gesetz"/><br><br>
                <label for="Norm">§/Art.:</label>
                <input type="text" id="Norm" name="Norm"><br><br>
                <input type="submit" value="Submit" onclick="OpenSite();"/>
            </form>
        </div>
    </body>
</html>

background.js

function OpenSite() {
    let Gesetz = document.getElementById("Gesetz").value;
    let Norm = document.getElementById("Norm").value;
    let Web = "https://dejure.org/gesetze/";
    let Site = Web.concat(Gesetz, "/", Norm, ".html");
    window.open(Site, "_blank");
    }

I do not know how to fix it and am new to coding so I would be very thankful for your help.

Thank you

Solution

  • CSP, that is, Content Security Policy (see here) is defined as

    Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft, to site defacement, to malware distribution.

    Basically, the server defines what the CSP is for the site, either in a response header or a meta tag.

    So, the first thing to do is to find out how is CSP defined at your end by doing the following steps:

    Now, let's click on the request's record in the network tab and carefully read the response headers. For stackoverflow.com it looks like this:

    enter image description here

    If you see something like this:

    content-security-policy: upgrade-insecure-requests; frame-ancestors 'self' https://stackexchange.com

    then CSP is defined as a response header. If not, then look for a meta tag defining it.

    Secondly, when you found your CSP definition, look for script-src 'self' or script-src and make sure that you append the domain your inline handler was about to reach out to.

    If this is a response header, then you will need to adjust the conf of the webserver you use. Once you find the content-security-policy and its script-src, make sure you add dejure.org to it, save, deploy it if needed (depending on what webserver you use) and restart the service.