Playwright无头浏览器混合内容问题：如何强制使用HTTP请求？

要强制所有请求使用HTTP并绕过混合内容限制，可通过以下几种方案实现：

1. 启动浏览器时禁用混合内容安全限制 #

针对Chromium内核（Playwright无头模式默认使用），添加启动参数允许加载不安全内容：

JavaScript/TypeScript 示例 #

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({
    headless: true,
    args: [
      '--allow-running-insecure-content', // 允许加载HTTP资源
      '--mixed-content-mode=allow' // 关闭混合内容阻止策略
    ]
  });
  const page = await browser.newPage();
  
  // 访问你的网站（直接使用HTTP地址）
  await page.goto('http://api.myapi.dev/');
  
  // 后续操作逻辑
  await browser.close();
})();

Python 示例 #

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(
        headless=True,
        args=[
            "--allow-running-insecure-content",
            "--mixed-content-mode=allow"
        ]
    )
    page = browser.new_page()
    
    page.goto("http://api.myapi.dev/")
    
    # 后续操作逻辑
    browser.close()

2. 拦截请求并强制转换为HTTP #

通过Playwright的请求拦截功能，自动将所有HTTPS请求替换为HTTP：

JavaScript/TypeScript 示例 #

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage();
  
  // 拦截所有请求，替换HTTPS为HTTP
  await page.route('**/*', (route) => {
    const originalUrl = route.request().url();
    const httpUrl = originalUrl.replace('https://', 'http://');
    route.continue({ url: httpUrl });
  });
  
  await page.goto('http://api.myapi.dev/');
  
  // 后续操作逻辑
  await browser.close();
})();

Python 示例 #

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page()
    
    # 拦截并转换协议
    page.route("**/*", lambda route: route.continue_(
        url=route.request.url.replace("https://", "http://")
    ))
    
    page.goto("http://api.myapi.dev/")
    
    # 后续操作逻辑
    browser.close()

3. 调整页面内容安全策略（CSP） #

如果目标页面设置了严格的Content Security Policy（CSP）导致HTTP资源被阻止，可拦截响应并修改CSP头：

JavaScript/TypeScript 示例 #

await page.route('**/*', async (route) => {
  const response = await route.fetch();
  const headers = { ...response.headers() };
  
  // 修改CSP，允许HTTP资源加载
  headers['Content-Security-Policy'] = 'default-src http: https:; script-src http: https:; style-src http: https:';
  
  route.fulfill({
    response,
    headers
  });
});

内容的提问来源于stack exchange，提问作者Liron Tal