Android：Charles修改WebView图片不生效的问题解决

有时候我们可以使用Charles等抓包工具将请求数据和返回数据进行修改，以方便我们的调试。 平时这样修改 API 接口的时候没有任何问题。今天突然对 WebView 中的 HTML 进行修改的时候，发现没有生效。界面上被修改图片的位置是一片空白。

通过翻阅日志和查找资料，发现是因为一些前端的限制，解决办法如下：

1. 找到需要被替换的图片

比如

https://images2015.cnblogs.com/blog/408483/201606/408483-20160615140433463-1600020511.png

2. 解决CSP问题

CSP：Content Security Policy：使用白名单的方式告诉客户端（浏览器）允许加载和不允许加载的资源。因此需要给CSP添加我们新增图片的 HOST 的白名单，否则会自动过滤

拦截资源，找到 Response 的 Header，找到 Content-Security-Policy 字段，在

img-src 'self' data:

后面添加被替换图片的 HOST，白名单之间用空格隔开，末尾用分号隔开。比如

img-src 'self' data: https://images2015.cnblogs.com https://hm.baidu.com;

3. 解决防盗链的问题

一些站点为了防止自己的资源被恶意调用，所以加了防盗链。所以需要在 HTML 内容添加一个标签

<meta name="referrer" content="no-referrer" />

4. 替换资源URL

找到想要被替换的 img 标签，将 src 内容替换为目标图片的 url

作者：HyperionChen
链接：https://www.jianshu.com/p/948f0f28055f