在 Chrome 中禁用同源策略

技术背景

同源策略是浏览器的一个重要安全机制，它限制了一个源（协议、域名和端口）的网页如何与另一个源的资源进行交互。在开发过程中，有时需要绕过这个策略来进行跨域请求或访问本地文件等操作，因此需要禁用 Chrome 的同源策略。

实现步骤

Windows

1. 创建快捷方式：在桌面创建 Chrome 的快捷方式。
2. 编辑属性：右键点击快捷方式，选择“属性”，在“目标”字段的末尾添加参数。有以下几种添加方式：
   • 添加 --disable-web-security --user-data-dir="D:/Chrome"，完整示例："C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="D:/Chrome"
   • 添加 --args --disable-web-security，完整示例："C:\Program Files\Google\Chrome\Application\chrome.exe" --args --disable-web-security
   • 也可以通过命令行创建并运行：cmd /c start chrome --disable-web-security --user-data-dir="c:\temp\chrome"

Mac OS X / macOS

打开终端，执行以下命令：

• 打开新的禁用安全的 Chrome 实例：open -na Google\ Chrome --args --user-data-dir=/tmp/temporary-chrome-profile-dir --disable-web-security
• 指定用户数据目录：open -na Google\ Chrome --args --disable-web-security --user-data-dir=$HOME/profile-folder-name

Linux

在终端运行以下命令：

• 通用禁用：google-chrome --disable-web-security
• 同时运行正常和不安全会话：google-chrome --user-data-dir=/tmp --disable-web-security

Selenium Webdriver

在代码中设置 Chrome 启动参数：

@driver = Selenium::WebDriver.for(:Chrome, { 
    :detach => false,
    :switches => ["--disable-web-security"]
})

核心代码

Windows 快捷方式目标示例

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="D:/Chrome"

Mac 终端命令示例

open -na Google\ Chrome --args --user-data-dir=/tmp/temporary-chrome-profile-dir --disable-web-security

Linux 终端命令示例

google-chrome --disable-web-security

Selenium Webdriver 代码示例

@driver = Selenium::WebDriver.for(:Chrome, { 
    :detach => false,
    :switches => ["--disable-web-security"]
})

最佳实践

• 使用独立的用户数据目录：通过 --user-data-dir 参数指定一个独立的目录，避免影响正常的 Chrome 配置和数据。
• 使用 Chrome 扩展：可以使用“Allow-Control-Allow-Origin: *”扩展来临时启用跨域请求，但该扩展有一定的局限性，仅适用于 GET 请求且无自定义 HTTP 头的情况。
• 使用 CORS 代理：如果上述方法都不适用，可以使用 CORS 代理，如 [https://cors-anywhere.herokuapp.com/] 或自己搭建一个，例如使用 npm install -g corsproxy 安装本地代理。

常见问题

1. 警告信息：启动 Chrome 时会提示“你正在使用不受支持的命令行标志：–disable-web-security。稳定性和安全性将受到影响。”，在开发阶段可以忽略该提示。
2. 扩展局限性：“Allow-Control-Allow-Origin: *”扩展仅适用于 GET 请求且无自定义 HTTP 头的情况，对于其他请求可能会失败。
3. 近期 Chrome 版本不支持：--disable-web-security 在近期 Chrome 版本中可能不再被支持，可以尝试使用 CORS 代理来解决跨域问题。
4. 用户数据断开：使用 --user-data-dir 参数可能会导致 Chrome 与用户数据文件夹断开连接，需要在后续打开时不使用该参数来恢复。