web安全csp白名單的弊端

csp的使用方式：

<meta http-equiv="Content-Security-Policy" content="script-src 'self'  cdn.staticfile.org *.cnzz.com hm.baidu.com *.fraudmetrix.cn *.tongdun.net *.geetest.com blob: 'unsafe-inline' 'unsafe-eval'">

還可以強制本頁面資源升級到https：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

 

csp弊端：

 一. chrome-extension 直接嵌入script標簽的方式 ：

<script type="text/javascript" src="chrome-extension://cfjajdmplgcnfchakhmfonhbckkjefng/js/kendogrid.js"></script>

CSP會進行攔截報錯，不加載js：

 

二. 使用谷歌插件對script標簽內的js進行攔截替換

<script type="text/javascript" src="//<?= STATIC_DOMAIN ?>/js/sea-css.js"></script>

假設頁面存在以上資源，現用插件對其進行攔截替換本地包的資源：

chrome.webRequest.onBeforeRequest.addListener(
    function(details) {
        var lowerDetails = details.url.toLowerCase();
        if(lowerDetails.indexOf("sea-css.js"))
        {
            return {redirectUrl: chrome.extension.getURL("js/sea-css.js")}; //你要替換的js腳本
        }

    },
    {
        urls: [
            "http://xxx/*/sea-css.js*"
        ],  //你要攔截的url地址
        types: ["script"]       //攔截類型為script，
    },
    ["blocking"] //類型blocking為攔截,
);

CSP攔截拒絕訪問：

 

三. 動態插入chrome-extension js時

injectJs('chrome-extension://cfjajdmplgcnfchakhmfonhbckkjefng/js/kendogrids.js')

// 向頁面插入JS
function injectJs(jsPath)
{
    var tem = document.createElement('script');
    tem.setAttribute('type', 'text/javascript');
    tem.src = jsPath
    document.body.appendChild(tem);
}

 此時頁面可以正常訪問js資源，csp不對動態插入的 chrome-extension 進行攔截限制