Mixed Content

https网页中，如果请求的内容属于http协议，则称为 Mixed Content，W3C 将 Mixed Content 分为 Optionally-blockable 和 Blockable，Optionally-blockable定义为：

请求的资源风险较小，即使被中间人拦截并篡改也不会造成很大影响。现代浏览器默认会加载这类资源，但会在控制台打印警告信息，这类资源包括:

    通过 <img> 标签加载的图片；
    通过 <video> / <audio> 和 <source> 标签加载的视频或音频；
    预读的（Prefetched）资源；

除Optionally-blockable之外所有的 Mixed Content 都是Blockable，浏览器必须禁止加载这类资源。

所以现代浏览器中，对于 HTTPS 页面中的 JavaScript、CSS 等 HTTP 资源，一律不加载，直接在控制台打印错误信息，如下：

Mixed Content: The page at 'https://your.page.url' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://your.request.url'. This request has been blocked; the content must be served over HTTPS.

处理Blockable

1. 如果是js等静态资源，可以下载下来由自己维护；
2. 升级http为https；
3. 如果请求的是第三方接口类资源，可以将接口在自己后台二次封装或在nginx上做代理，前台使用https访问nginx，nginx将请求代理到http服务器，例如：

代理前的请求地址：http://bt.net:8138/deptExamination/pageEventInfo

代理后的请求地址：`/operaterApi/deptExamination/pageEventInfo` （相对路径）

nginx配置：
        location /operaterApi/ {
            proxy_redirect off;
            proxy_pass_header Server;
            proxy_set_header X-Scheme $scheme;
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header x-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://bt.net:8138/; # '/'表示将符合规则的请求转发到proxy_pass，路径中不会携带operaterApi
        }

CSP

Content Security Policy，csp有多种指令，用于实现页面内容安全相关功能。

block-all-mixed-content

对于 HTTPS 中的 Optionally-blockable 类 HTTP 资源，现代浏览器默认会加载。因为图片类资源被劫持通常不会有太大风险，但有些情况除外，例如网页按钮是用图片实现的，中间人把这些图片改掉，会干扰用户使用。

通过 CSP 的 block-all-mixed-content 指令，可以让页面进入混合内容严格检测（Strict Mixed Content Checking）模式。在这种模式下，所有非 HTTPS 资源都不允许加载。跟其它所有 CSP 规则一样，可以通过以下两种方式启用这个指令：

http 头部定义方式：

Content-Security-Policy：block-all-mixed-content

meta标签方式：

<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">

upgrade-insecure-requests

通过 upgrade-insecure-requests 指令，页面中所有 HTTP 资源，都会首先被替换为 HTTPS 地址再发起请求；页面所有站内链接，点击后会被替换为 HTTPS 地址再跳转。

`upgrade-insecure-requests 适用于网站资源已经做了https升级，但是页面链接需要改造的工作量太大，可以使用此指令快速实现目的。

但是该指令只替换协议部分，因此只适用于转换后的https资源已经存在的情况。

CSP防止XSS攻击

通过限制CSP规则可以实现XSS攻击保护，以下为CSP限制规则：

script-src：外部脚本

style-src：样式表

img-src：图像

media-src：媒体文件（音频和视频）

font-src：字体文件

object-src：插件（比如 Flash）

child-src：框架

frame-ancestors：嵌入的外部资源（比如<frame>、<iframe>、<embed>和<applet>）

connect-src：HTTP 连接（通过 XHR、WebSockets、EventSource等）

worker-src：worker脚本

manifest-src：manifest 文件

使用示例：

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">

该meta标签标示：

脚本：只信任当前域名

<object>标签：不信任任何URL，即不加载任何资源

样式表：只信任cdn.example.org和third-party.org

框架（frame）：必须使用HTTPS协议加载

其他资源：没有限制

参考链接1 参考链接2