chrome 扩展上的“不安全评估”

Question

我正在尝试运行以下命令：

chrome.tabs.onCreated.addListener(function (tab){
    if (tab.url.indexOf(".salesforce.com/") != -1 || tab.url.indexOf(".force.com/") != -1) {
        chrome.tabs.executeScript(tab.id, {
            "file": "loadScript.js"
        }, function () {
            console.log("Script Executed .. ");
        });
    } else {
        var wrongTab = chrome.i18n.getMessage("wrongTab");
        console.log(wrongTab);
        alert(wrongTab);
    }
});

哪个应该（理论上）在页面加载时运行 loadScript.js 文件.... loadScript.js 文件如下，这应该将文件附加到正在运行的页面，而不是像现在这样附加到后台页面:

/* Create a scriipt element in head of HTML and put /soap/ajax/31.0/connection.js in the src  */
var connectJsUrl = "/connection.js";

function loadScript(url, callback) {
    var head = document.getElementsByTagName("head")[0];
    var script = document.createElement("script");
    script.src = url;
    var done = false;
    script.onload = script.onreadystatechange = function() {
        if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
            done = true;
            callback();
            script.onload = script.onreadystatechange = null;
            head.removeChild(script);
        }
    };
    head.appendChild(script);
}

loadScript(connectJsUrl, function() {
    console.log("Script Confirmed...")
});

/* Check to see if the file have been appended correctly and works correctly */
var JSFile = "chrome-extension://" + window.location.host + connectJsUrl;
var req = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
if (req == null) {
    console.log("Error: XMLHttpRequest failed to initiate.");
};
req.onload = function() {
    try {
        eval(req.responseText);
    } catch (e) {
        console.log("There was an error in the script file.");
    }
};
try {
    req.open("GET", JSFile, true);
    req.send(null);
} catch (e) {
    console.log("Error retrieving data httpReq. Some browsers only accept cross-domain request with HTTP.");
};

我仍然是 Chrome Extensions and.js 的新手，如果我犯了一个愚蠢的错误，请原谅我:)

我从中得到的全部内容如下：拒绝将字符串评估为 JavaScript，因为“unsafe-eval”不是以下内容安全策略指令中允许的脚本源：“script-src 'self' chrome-extension-resource ：”。

Answer 1

为了防止跨站脚本，谷歌已经屏蔽了 eval 函数。

为了解决这个问题，将此代码添加到manifest.json

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",

如果您需要进一步解释，请发表评论

Answer 2

重要事项

如前所述，将其添加到您的 manifest.json 中：

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

确保将“manifest_version”设置为 2 aka

//this
"manifest_version": 2

出于某些安全原因，适用于 manifest_version 3 的 Chrome 扩展不支持不安全的评估。

还要确保重新加载您的扩展。

Answer 3

对于清单 V3

您不能在清单 v3 中运行带有不安全 eval 的代码，如果您使用 webpack 或 vite 等任何捆绑程序，您可以将代码更改为不使用 eval 或检查 package 包（如果它包含任何 eval），这里是您不使用的语法列表假设在manifest 3中使用

• 评估（）
• 设置超时（）
• 设置间隔（）
• 功能（）
• 设置立即（）
• 执行脚本（）

使用 unsafe-eval 添加 content_security_policy 是不安全的，因为站点可能容易受到XSS attack

但是，如果您偶然使用了任何 wasm 代码，那么下面的配置将可以避免manifest 3的 eval

"content_security_policy": {
   "extension_page":"script-src 'self' 'wasm-unsafe-eval'; object-src 'self'"
}

如果您使用的是任何 iframe，请同时添加以下代码

"content_security_policy": {
   "extension_page":"script-src 'self' 'wasm-unsafe-eval'; object-src 'self'",
   "sandbox":"script-src 'self' 'wasm-unsafe-eval'; object-src 'self'"
}

Answer 4

试验后，我发现运行托管 html 文件的 Web 服务器（正在运行您的 eval）仍然有效。 然后，将结果发送到父窗口并完成。

客户：

var elm = document.createElement('iframe');
elm.src = 'http://localhost:3000'; // I used a basic expressJS server
document.body.appendChild(elm);

服务器：

const express = require('express');
const socketIO = require('socket.io'); // Optional
const http = require('http');
const path = require('path');


const app = express();
let server = http.createServer(app);
let io = socketIO(server);

const publicPath = path.resolve(__dirname, '../public');
const port = process.env.PORT || 3000;

app.use(express.static(publicPath));

io.on('connection', (client) => {
    console.log('User connected');
});

server.listen(port, (err) => {
    if (err) throw new Error(err);
    console.log(`Server running on port ${port}`);
});

索引.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
</head>
<body>
    <script>
        eval(alert('test'))
    </script>

    <!-- Other html.. -->
</body>
</html>