堆棧內存溢出
  簡體   English   中英

拒絕應用內聯樣式，因為它違反了以下內容安全策略指令

[英]Refused to apply inline style because it violates the following Content Security Policy directive

 原文  2013-07-20 21:21:42  6   6    javascript/ google-chrome-extension/ content-security-policy

問題描述

所以，在大約 1 小時內，我的擴展失敗了。

我正在做我的擴展，它正在做我假裝的事情。 我做了一些更改，因為我不喜歡我刪除了它們，現在我的擴展程序拋出錯誤：

拒絕應用內聯樣式，因為它違反了以下內容安全策略指令：“default-src 'self'”。 請注意，'style-src' 未明確設置，因此使用 'default-src' 作為后備。

是什么導致了這個錯誤？

我在以下方面進行了更改：

彈出窗口.html

<!DOCTYPE html>
<html ng-app="PinIt" ng-csp>
    <head>
        <link rel="stylesheet" href="css/popup.css">
        <script src="js/lib/jquery-1.8.2.min.js"></script>
        <script src="js/lib/angular.min.js"></script>
        <script src="js/app/app.js"></script>
        <script src="js/app/popup.js"></script> 
    </head>
    <body id="popup">
        <header>
            <h1>PinIt</h1>
        </header>
    <div ng-controller="PageController">
            <div>{{message}}</div>
            <h2>Page:</h2>
            <div id="elem">{{title}}</div>
            <div>{{url}}</div>
            <h2>Imagens:</h2>
            <ul>
                <li ng-repeat="pageInfo in pageInfos" style="list-style: none">
                    <div class="imgplusshare">
                    <img src={{pageInfo}} class="imagemPopup"/>
                    <ul class="imas">
                      <li id="liFacebook" ng-click="fbshare(pageInfo)">
                      <span>
                      <img src="facebook_16.png"/>Facebook
                      </span>
                    </li>
                    <li id="liTwitter" ng-click="twshare(pageInfo)">
                    <span>
                    <img src="twitter-bird-16x16.png"/>Twitter
                    </span>
                    </li>
                    <li id="liGooglePlus" ng-click="gpshare(pageInfo)">
                    <span><img src="gplus-16.png"/>Google+</span>
                    </li>
                    <li id="liEmail" ng-click="mailshare(pageInfo)">
                    <span><img src="mail_icon_16.png"/>Email</span>
                    </li>
                    <hr>
                    </ul>

                    </div>
                    </li>

                    </ul>
</div>
    </body>
</html>

彈出窗口.js

  myApp.service('pageInfoService', function() {
        this.getInfo = function(callback) {
            var model = {};

            chrome.tabs.query({'active': true},
            function (tabs) {
                if (tabs.length > 0)
                {
                    model.title = tabs[0].title;
                    model.url = tabs[0].url;

                    chrome.tabs.sendMessage(tabs[0].id, { 'action': 'PageInfo' }, function (response) {

                        model.pageInfos = response;

                        callback(model);
                    });

                }

            });
        };
    });
    myApp.controller("PageController", function ($scope, pageInfoService) {

        pageInfoService.getInfo(function (info) {           
            $scope.title = info.title;
            $scope.url = info.url;
            $scope.pageInfos = info.pageInfos;
            $scope.fbshare =  function($src) {
             chrome.windows.create({url:"http://www.facebook.com/sharer/sharer.php?u="+$src});
      };    
            $scope.twshare =  function($src) {
             chrome.windows.create({url:"https://twitter.com/intent/tweet?url="+$src});
      };
            $scope.gpshare =  function($src) {
             chrome.windows.create({url:"https://plus.google.com/share?url="+$src});
      };
            $scope.mailshare =  function($src) {
             chrome.windows.create({url:"mailto:?subject=Imagem Partilhada por PinIt&body=<img src=\""+$src+"\"\\\>"});
      };



            $scope.$apply();


        });
    });

這是我的清單文件：

{
    "name": "PinIt",
    "version": "1.0",
    "manifest_version": 2,

    "description": "Pin It",
    "icons": {
        "128": "icon128.png"
    },
    "browser_action": {
        "default_icon": "img/defaultIcon19x19.png",
        "default_popup": "popup.html",
        "default_title": "PinIt"
    },
    "content_scripts": [ {
    "js": [ "js/lib/jquery-1.8.2.min.js", "js/app/content.js", "js/jquery-ui-1.10.3.custom.js" ],
    "matches": [ "*://*/*" ],
    "run_at": "document_start"
    } ],
    "minimum_chrome_version": "18",
    "permissions": [ "http://*/*", "https://*/*", "unlimitedStorage", "contextMenus", "cookies", "tabs", "notifications" ],
    "content_security_policy": "default-src 'self'"
}

任何建議？

6 個解決方案

解決方案1
 91 已采納  2013-08-25 11:08:50

您還可以通過添加style-src 'self' 'unsafe-inline';來放松您的 CSP 樣式style-src 'self' 'unsafe-inline';

"content_security_policy": "default-src 'self' style-src 'self' 'unsafe-inline';"

這將允許您在擴展中繼續使用內聯樣式。

重要的提示

正如其他人指出的那樣，不建議這樣做，您應該將所有 CSS 放在一個專用文件中。 請參閱有關為什么 CSS 可以成為攻擊向量的OWASP 解釋（感謝 @ KaayakinKoder 提供的鏈接）。

解決方案2
 23  2013-07-21 03:37:44

正如錯誤消息所說，您有一個 CSP 禁止的內聯樣式。 我在您的 HTML 中至少看到一個 ( list-style: none )。 將該樣式放在您的 CSS 文件中。

進一步解釋一下，內容安全策略不允許內聯 CSS，因為它可能很危險。 從內容安全策略介紹：

“如果攻擊者可以注入一個直接包含一些惡意負載的腳本標簽......瀏覽器沒有機制可以將其與合法的內聯腳本標簽區分開來。CSP 通過完全禁止內聯腳本來解決這個問題：這是唯一的方法當然。”

解決方案3
 10  

根據http://content-security-policy.com/最好的起點：

    default-src 'none'; 
    script-src 'self'; 
    connect-src 'self'; 
    img-src 'self'; 
    style-src 'self';
    font-src 'self';

切勿內聯樣式或腳本，因為它會破壞 CSP 的目的。 您可以使用樣式表來設置樣式屬性，然后使用.js文件中的函數來更改樣式屬性（如果需要）。

解決方案4
 4  2014-11-23 11:01:20

另一種方法是通過 DOM 節點上的style屬性使用 CSSOM（CSS 對象模型）。

var myElem = document.querySelector('.my-selector');
myElem.style.color = 'blue';

更多關於 CSSOM 的細節： https : //developer.mozilla.org/en-US/docs/Web/API/HTMLElement.style

正如其他人所提到的，為 css 啟用unsafe-line是解決此問題的另一種方法。

解決方案5
 1  2020-05-22 20:06:30

好吧，我認為為時已晚，到目前為止，許多其他人都有解決方案。

但我希望這可以幫助：

我正在為身份服務器使用 react，所以“不安全內聯”根本不是一個選項。 如果您查看您的控制台並實際閱讀 CSP 文檔，您可能會發現有三個選項可以解決該問題：

  1. 'unsafe-inline' 就像它所說的不安全，如果您的項目使用 CSP 是出於一個原因，就像扔掉完整的政策一樣，與根本沒有 CSP 政策是一樣的

    1. 'sha-XXXCODE' 這是好的，安全但不是最佳的，因為有很多手動工作，每次編譯 SHA 可能會改變，所以它很容易變成一場噩夢，只有在腳本或樣式不太可能改變並且有很少參考

    2. 隨機數。 這是贏家！

Nonce 的工作方式與腳本類似

CSP HEADER ///csp 東西 nonce-12331

<script nonce="12331">
   //script content
</script>

因為csp中的nonce和tag是一樣的，所以腳本會被執行

對於內聯樣式，隨機數也以屬性的形式出現，因此適用相同的規則。

所以生成隨機數並將其放在您的內聯腳本中

如果你正在使用 webpack，也許你正在使用 style-loader

以下代碼將解決問題


module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: 'style-loader',
            options: {
              attributes: {
                nonce: '12345678',
              },
            },
          },
          'css-loader',
        ],
      },
    ],
  },
};

解決方案6
 -1  2017-10-13 12:20:10

您可以在 Content-security-policy 添加“img-src 'self' data:;” 並使用大綱 CSS。不要使用內聯 CSS。它是安全的，不會受到攻擊者的攻擊。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 jQuery：拒絕應用內聯樣式，因為它違反了以下內容安全策略指令 拒絕加載腳本，因為它違反了以下內容安全策略指令：“style-src 'self' 'unsafe-inline' Chrome 擴展策略錯誤：拒絕執行內聯事件處理程序，因為它違反了以下內容安全策略指令 拒絕執行內聯腳本，因為它違反了以下內容安全策略指令 Firebase Chrome 擴展 - 拒絕執行內聯腳本，因為它違反了以下內容安全策略指令 Cordova 錯誤：拒絕執行內聯腳本，因為它違反了以下內容安全策略指令 我不斷收到錯誤“拒絕執行內聯事件處理程序，因為它違反了以下內容安全策略指令 拒絕加載腳本，因為它違反了以下內容安全策略指令 拒絕執行內聯腳本，因為它違反了以下內容安全策略指令：“default-src 'self'” 拒絕加載腳本，因為它違反了以下內容安全策略指令
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM