浏览器控制台报错

Myth丶恋晨 2024-02-19 12:34 75阅读 0赞

> 异常问题：浏览器关闭连接
> 
> Failed to load resource: net::ERR\_CONNECTION\_CLOSED

异常原因：项目中混用http协议和https协议

解决方案：指示 User Agent 将 HTTP 更改为 HTTPS

> 异常内容：页面的script标签内容没有解析
> 
> Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'".  
> Either the 'unsafe-inline' keyword, a hash ('sha256-FHnVzrXhpOtWrkgyliiAXazqbkNKS+/DFGxknB42YNc='),  
> or a nonce ('nonce-...') is required to enable inline execution.  
> Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

异常的原因：Content-Security-Policy的默认配置是default-src 'self'。

解决方案：添加script-src \* 'unsafe-inline'，对于页面内部标签不进行安全验证。

终极解决：<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

参考文档：[Google内容安全政策][Google]

CSP 提供了一个丰富的政策指令集：

*  **`script-src`** 用于控制脚本对于某个特定页面所享有的一组权限。
 *  **`base-uri`** 用于限制可在页面的 `<base>` 元素中显示的网址。
 *  **`child-src`** 用于列出适用于工作线程和嵌入的帧内容的网址。例如：`child-src https://youtube.com` 将启用来自 YouTube（而非其他来源）的嵌入视频。 使用此指令替代已弃用的 **`frame-src`** 指令。
 *  **`connect-src`** 用于限制可（通过 XHR、WebSockets 和 EventSource）连接的来源。
 *  **`font-src`** 用于指定可提供网页字体的来源。Google 的网页字体可通过 `font-src https://themes.googleusercontent.com` 启用。
 *  **`form-action`** 用于列出可从 `<form>` 标记提交的有效端点。
 *  **`frame-ancestors`** 用于指定可嵌入当前页面的来源。此指令适用于 `<frame>`、`<iframe>`、`<embed>` 和 `<applet>` 标记。此指令不能在 `<meta>` 标记中使用，并仅适用于非 HTML 资源。
 *  **`frame-src`** 已弃用。请改用 **`child-src`**。
 *  **`img-src`** 用于定义可从中加载图像的来源。
 *  **`media-src`** 用于限制允许传输视频和音频的来源。
 *  **`object-src`** 可对 Flash 和其他插件进行控制。
 *  **`plugin-types`** 用于限制页面可以调用的插件种类。
 *  **`report-uri`** 用于指定在违反内容安全政策时浏览器向其发送报告的网址。此指令不能用于 `<meta>` 标记。
 *  **`style-src`** 是 `script-src` 版的样式表。
 *  **`upgrade-insecure-requests`** 指示 User Agent 将 HTTP 更改为 HTTPS，重写网址架构。 该指令适用于具有大量旧网址（需要重写）的网站。

> 异常问题：
> 
> Cross-Origin Read Blocking (CORB) blocked cross-origin response [https://www.chromium.org/][https_www.chromium.org] with MIME type text/html. See [https://www.chromestatus.com/...][https_www.chromestatus.com_...] for more details.

异常原因：浏览器版本不同， 我当前的 chrome 版本是 v62没有任何警告，同事的版本是v73发生了该警告。

> CORB（Cross-Origin Read Blocking）：  
> an algorithm by which dubious cross-origin resource loads may be identified and blocked by web browsers before they reach the web page.
> 
> 浏览器在加载可以跨域资源时，在资源载入页面之前，对其进行识别和拦截的算法。

[Google]: https://developers.google.cn/web/fundamentals/security/csp/?hl=zh-cn
[https_www.chromium.org]: https://www.chromium.org/
[https_www.chromestatus.com_...]: https://www.chromestatus.com/feature/5629709824032768