我出于学习目的编码的第一个Edge扩展不起作用,因为它会生成以下错误: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.

与:."脚本-SRC ' self '' wasm-inline-intentional-rules ' http://localhost:* http://127.0.0.1:*".

Error

该扩展应该打开一个包含法律的网站.URL由一些文本、法律代码和段落组成,这些文本通过文本字段输入.

尽管输入字段会在单击扩展图标时显示,并且我可以输入文本并单击提交按钮,但什么也没有发生.

该项目由以下文件组成:

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");
    }

我不知道如何修复它,而且是编码新手,所以我非常感谢您的帮助.

谢谢你

推荐答案

MPS,即内容安全政策(请参阅here)定义为

内容安全策略(MPS)是一个额外的安全层,有助于检测和缓解某些类型的攻击,包括跨站点脚本(XSS)和数据注入攻击.这些攻击可用于从数据盗窃、网站污损到恶意软件分发的各种行为.

基本上,服务器定义了站点的CST,以response headermeta tag形式.

因此,首先要做的就是通过执行以下步骤了解您的终端如何定义MPS:

  • 打开浏览器
  • 任意位置单击鼠标右键
  • 单击判断或判断元素
  • 单击网络选项卡
  • 导航至您遇到问题的页面

现在,让我们单击网络选项卡中的请求记录并仔细阅读响应标题.对于stackoverflow.com来说,它看起来是这样的:

enter image description here

如果您看到这样的事情:

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

然后将MPS定义为响应标头.如果没有,则寻找定义它的meta标签.

其次,当您找到您的MPS定义时,查找script-src 'self'script-src,并确保添加了您的内联处理程序即将访问的域.

如果这是响应标头,那么您将需要调整您使用的Web服务器的配置.找到content-section-policy及其脚本-SRC后,请确保将dejure.org添加到其中、保存、在需要时部署它(取决于您使用的Web服务器)并重新启动服务.

Javascript相关问答推荐

如何解决(不忽略)reaction详尽的linter规则,而不会在获取数据时导致无限的reender循环

获取表格的左滚动位置

React Native平面列表自动滚动

使用print This时, map 容器已在LeafletJS中初始化

浮动Div的淡出模糊效果

在Vite React库中添加子模块路径

在数组中查找重叠对象并仅返回那些重叠对象

如何使用JS创建一个明暗功能按钮?

TypeError:无法读取未定义的属性(正在读取';宽度';)

使用Ace编辑器对子组件实例的native-element 进行Angular 获取时面临的问题

如何为仅有数据可用的点显示X轴标签?

将相关数据组合到两个不同的数组中

Django导入问题,无法导入我的应用程序,但我已在设置中安装了它

自动滚动功能在当前图像左侧显示上一张图像的一部分

Reaction即使在重新呈现后也会在方法内部保留局部值

JavaScript将字符串数字转换为整数

TabNavigator和StackNavigator之间的Reaction Native中的导航问题

连续添加promise 时,如何在所有promise 都已结算时解除加载覆盖

重新渲染过多(&Q).REACT限制渲染次数以防止无限循环.使用REACT下拉菜单时

脚本语法错误只是一个字符串,而不是一个对象?