拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src 'self'”

Posted 2023-02-22

【中文标题】拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src \'self\'”

【英文标题】：Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'"拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src 'self'”

【发布时间】：2013-07-13 06:24:26

【问题描述】：

我正在为 Rss 阅读器创建一个 chrome 扩展，因为我遇到了上述错误。请帮忙

ma​​nifest.json

    "name": "Tutorialzine Extension",
        "manifest_version": 2,
        "version": "1.1",
        "description": "Making your first Google Chrome extension.",
        "icons": 
        "128": "icon_128.png"
    ,
        "web_accessible_resources": ["script.js", "https://query.yahooapis.com"],
        "browser_action": 
        "default_icon": "icon.png",
            "default_popup": "tutorialzine.html"
    ,
        "permissions": ["tabs", "<all_urls", "http://localhost/",
        "http://*/*", "https://*/*", "https://query.yahooapis.com"],
        "content_security_policy": "script-src 'self'; 'https://query.yahooapis.com';unsafe-inline; object-src 'self'"

script.js

$(document).ready(function () 

    var query = "SELECT * FROM feed WHERE url='http://feeds.feedburner.com/Tutorialzine' LIMIT 2";

    // Storing the seconds since the epoch in now:
    var now = (new Date()).getTime() / 1000;

    // If there is no cache set in localStorage, or the cache is older than 1 hour:
    if (!localStorage.cache || now - parseInt(localStorage.time) > 1 * 60 * 60) 
        $.get("yahoo.js", function (msg) 

            // msg.query.results.item is an array:
            var items = msg.query.results.item;
            var htmlString = "";

            for (var i = 0; i < items.length; i++) 
                var tut = items[i];

                // Extracting the post ID from the permalink:
                var id = tut.guid.content.match(/(\d+)$/)[0];

                // Looping and generating the markup of the tutorials:

                htmlString += '<div class="tutorial">\
                            <img src="http://tutorialzine.com/img/posts/' + id + '.jpg" />\
                            <h2>' + tut.title + '</h2>\
                            <p>' + tut.description + '</p>\
                            <a href="' + tut.link + '" target="_blank">Read more</a>\
                            </div>';
            

            // Setting the cache
            localStorage.cache = htmlString;
            localStorage.time = now;

            // Updating the content div:
            $('#content').html(htmlString);
        , 'json');
     else 
        // The cache is fresh, use it:
        $('#content').html(localStorage.cache);
    

jquery.min.js 中的错误：

jquery.min.js 包含内联脚本做什么

parentNode:d.removeChild(d.appendChild(s.createElement("div"))).parentNode===null,deleteExpando:true,checkClone:false,scriptEval:false,noCloneEvent:true,boxModel:null;b.type="text/javascript";tryb.appendChild(s.createTextNode("window."+f+"=1;"))catch(i)a.insertBefore(b,a.firstChild);if(A[f])c.support.scriptEval=true;delete A[f]trydelete b.testcatch(o)c.support.deleteExpando=falsea.removeChild(b);if(d.attachEvent&&d.fireEvent)d.attachEvent("onclick",function k()c.support.noCloneEvent=

【问题讨论】：

您的 CSP 有一些错误。它应该是："script-src 'self' https://query.yahooapis.com; object-src 'self'"。在web_accessible_resources 中也不需要https://query.yahooapis.com；该数组用于本地托管的扩展资源，您希望它们可用于常规的非扩展网页。

不应标记为 google-chrome-app，因为应用程序和扩展程序之间的 CSP 问题不同。

【参考方案1】：

在使用 LinkedIn oAuth API 时，我也遇到过此类问题。

我使用linkedIn API 并为cordova 设置了以下设置

config.xml

 <access origin="*" launch-external="yes"/>
  <allow-navigation href="*" />

元标记是

 <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

脚本

<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script>

当我在模拟器上运行应用程序时，它会给予

修复了将uri添加到元标记http://platform.linkedin.comlike

的问题

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://platform.linkedin.com ">

【讨论】：

切记使用 unsafe-eval 和 unsafe-inline 存在安全风险。使用“self”和“unsafe-inline”可能没问题。

'unsafe-inline' 是一种违规行为，您最好没有 CSP

@George unsafe-inline 的替代方式是什么

@ChiragPatel 我相信虽然不确定，但最好的解决方案是使用在构建时生成的哈希字符串，或者在服务器端动态生成的随机数值。但我可能完全错了，所以我建议先研究可信来源。我不是安全专家，所以请注意我的暂定语言。

【参考方案2】：

如果您的 htaccess 中有此代码，这可能是原因。注释掉这可以解决您的问题

<IfModule mod_headers.c>
  Header set Content-Security-Policy "script-src 'self' https://www.example.com/"
</IfModule>

【讨论】：

非常感谢。这对我来说是个问题