ios客户端浏览器样式加载失效问题

最近线上测试中出现一个奇怪的问题，ios客户端浏览器样式加载失效。

从表象来看，同样的css，安卓手机上可以正常展示，但是到ios手机上首次进入页面就不能正常显示

这时候，我们首先会考虑是不是ios设备的兼容问题？

于是乎，第一想到的就是问度娘，ios手机浏览器不能正常展示css是什么原因？这么泛泛的问题，想找到你的答案如同大海捞针。

其次想到的就是在测试环境调试一下，结果测试机在测试环境看是正常的，线上环境看问题复现率100%。这时就想着看看css资源路径有什么差异，为什么上面的css不展示，下面的都正常展示了？

答案是：ios客户端将访问强制切换https安全协议，而页面提供的资源是http协议的。于是就引发了上面的问题，因为https地址中，如果加载了http资源，浏览器将认为这是不安全的资源，将会默认阻止，这就会给你带来资源不全的问题了，比如：图片显示不了，样式加载不了，JS加载不了。

解决方案一：

在html文件的head标签中添加<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

当浏览器支持“upgrade-insecure-requests”属性时，会自动将http链接替换为https

解决方案二：

将连接中的算有http连接更换为https

解决方案三：

客户端修改为http，或允许混合模式（http与https），如果不单独设置，WebView是不支持在Https域名下加载Http资源的。

深入一点

• 为什么不允许？

  当用户访问HTTPS页面时，与WEB服务器之间的连接是使用SSL加密的，从而保护连接不受嗅探器和中间人攻击。

  如果HTTPS页面包含由普通明文HTTP连接的内容，那么连接只是被部分加密，非加密的内容可以被嗅探者入侵，并且可以被中间人攻击者修改，因此连接不再受到保护。

  当一个网页出现这种情况时，它被称为混合内容页面。

• 混合内容页面的类型

  • 混合被动/显示内容

    使用HTTP内容包含在一个HTTPS页面，但它不能改变网页的其他部分。

    攻击者可以用一张不恰当的图片替换掉原始的图片，并根据替换的图片内容判断用户正在访问的页面等。

    这些内容包括：<img>,<audio>,<video>,<object>(进行http请求时)等标签

  • 混合活动内容

    访问全部或部分HTTPS页面文档对象模型的内容。这种类型的混合内容可以改变HTTPS页面的行为并可能向用户窃取敏感数据

    在混合活动内容情况下,中间人攻击者可以拦截HTTP请求的内容。攻击者也可以重写响应来包含恶意的JavaScript代码。恶意的活动内容可以窃取用户的凭据,获得关于用户的敏感数据，甚至在用户的系统上安装恶意软件（例如，通过浏览器漏洞或插件）。

    混合内容的风险取决于用户访问网站的类型和网站数据暴漏的的敏感程度。网页可能有公共访问数据或需有通过身份验证的私有数据。如果网页是公开的并且没有关于用户的敏感数据，使用混合活动内容仍可能为攻击者提供将用户重定向到其他HTTP页面并从那些网站上窃取HTTP cookie的机会。

    混合活动内容包括：

    • <script>
    • <link>
    • XMLHttpRequest
    • <iframe>
    • 所有在CSS中用到url的场景，如@font-face, cursor, background-image
    • <object>用data属性时

作者：旧旧的 <393210556@qq.com> 解决问题的方式，就是解决它一次