浏览器插件如何绕过网页的 CSP

,

先来解释下什么是 csp

CSP 的工作原理是允许网站管理员定义哪些来源是可信的，并阻止来自不可信来源的脚本、图像和其他内容加载到页面中。

浏览器插件有时候为了获取页面某些信息需要注入脚本到宿主页面，当宿主页面开启 csp 策略时常常使得插件的 content-scripts 失效，所以需要使用些特殊手段来绕过 csp 策略。

csp 网站的特征1：html 页面有 meta 标识

1
2
3
<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; img-src https://*; child-src 'none';" />

csp 网站的特征2：资源文件响应头有 Content-Security-Policy 字段：

1
Content-Security-Policy: default-src 'self' *.trusted.com

既然知道了服务器如何告诉浏览器开启 csp 策略并生效，就有了解决思路来绕过。

  1. 使用 Content Security Policy (CSP) 插件 API

使用chrome.webRequest API来拦截并修改HTTP响应头。下面是一个简单的示例，展示了如何在Chrome扩展中实现这一点：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
chrome.webRequest.onHeadersReceived.addListener(
  function(details) {
    for (let i = 0; i < details.responseHeaders.length; ++i) {
      if (details.responseHeaders[i].name.toLowerCase() === 'content-security-policy') {
        details.responseHeaders.splice(i, 1);
        break;
      }
    }
    return { responseHeaders: details.responseHeaders };
  },
  {
    urls: ["*://example.com/*"], // 你想要绕过CSP策略的域名
    types: ["main_frame", "sub_frame"]
  },
  ["blocking", "responseHeaders"]
);
  1. 动态注入JavaScript
    另一种方法是动态注入JavaScript代码，来修改网页的CSP策略。
    1
    2
    3
    4
    5
    6
    7
    8
    let script = document.createElement('script');
    script.innerHTML = `
      let meta = document.createElement('meta');
      meta.httpEquiv = 'Content-Security-Policy';
      meta.content = 'default-src *; script-src *; connect-src *; img-src *; style-src *;';
      document.getElementsByTagName('head')[0].appendChild(meta);
    `;
    document.documentElement.appendChild(script);